DGNum/www-bocal
6
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

Site plus joli pas responsive

Browse source
This commit is contained in:
Evarin 2017-10-19 15:36:19 +02:00
parent ce694f617b
commit 6bc6b8c315
5 changed files with 238 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

154
mainsite/static/css/screen.css
View file

@ -1,3 +1,4 @@
@charset "UTF-8";
/* Welcome to Compass. /* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports) * In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent: * Import this file using the following HTML or equivalent:
@ -75,7 +76,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
/* line 15, ../sass/screen.scss */ /* line 15, ../sass/screen.scss */
body, html { body, html {
background: #660022; background: #fff9a4;
padding: 0; padding: 0;
margin: 0; margin: 0;
height: 100%; height: 100%;
@ -92,119 +93,188 @@ body.plain #main {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%);
background: #fff7cc; background: #fff9a4;
padding: 25px; padding: 25px;
} }
/* line 36, ../sass/screen.scss */
body.plain #main button {
background: #8c0e00;
color: #fff9a4;
display: inline-block;
padding: 30px;
font: 25px "Source Sans Pro", sans-serif;
font-weight: bold;
border: 1px solid #fff;
}
/* line 38, ../sass/screen.scss */ /* line 48, ../sass/screen.scss */
h1, h2, h3, h4 { h1, h2, h3, h4 {
font-family: "Bitter", serif; font-family: "Bitter", serif;
} }
/* line 42, ../sass/screen.scss */ /* line 52, ../sass/screen.scss */
h2 { h2 {
font-size: 1.8em; font-size: 1.8em;
text-align: center; text-align: center;
border-bottom: 2px solid #000;
padding: 10px;
margin-bottom: 0.7em;
} }
/* line 47, ../sass/screen.scss */ /* line 60, ../sass/screen.scss */
strong, b { strong, b {
font-weight: bold; font-weight: bold;
} }
/* line 51, ../sass/screen.scss */ /* line 64, ../sass/screen.scss */
i, em { i, em {
font-style: italic; font-style: italic;
} }
/* line 55, ../sass/screen.scss */ /* line 68, ../sass/screen.scss */
a { a {
color: #990033; color: #8c0e00;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
} }
/* line 61, ../sass/screen.scss */ /* line 74, ../sass/screen.scss */
.container, header {
background: #fff;
margin: 0 auto;
max-width: 800px;
}
/* line 67, ../sass/screen.scss */
header { header {
max-width: 700px;
margin: 0 auto;
text-align: center; text-align: center;
border-bottom: 2px solid #000; border-bottom: 3px solid #000;
position: relative; position: relative;
padding-bottom: 40px; padding-bottom: 30px;
margin: 30px auto;
} }
/* line 73, ../sass/screen.scss */ /* line 83, ../sass/screen.scss */
header:after { header:after {
content: " "; content: " ";
position: absolute; position: absolute;
width: 100%; width: 110%;
z-index: 1; z-index: 1;
left: 0; left: -5%;
bottom: 25px; bottom: 25px;
border-bottom: 2px solid #000; border-bottom: 3px solid #000;
} }
/* line 84, ../sass/screen.scss */ /* line 94, ../sass/screen.scss */
.container { .container {
margin: 0 auto;
max-width: 1200px;
display: table; display: table;
display: flex; display: flex;
padding: 15px; padding: 15px;
width: 100%; width: 100%;
} }
/* line 91, ../sass/screen.scss */ /* line 103, ../sass/screen.scss */
.sidebar { .sidebar {
width: 210px; width: 400px;
padding-right: 40px;
} }
/* line 94, ../sass/screen.scss */ /* line 107, ../sass/screen.scss */
.sidebar ul.nav {
margin-bottom: 30px;
}
/* line 110, ../sass/screen.scss */
.sidebar ul.nav li { .sidebar ul.nav li {
display: block; display: block;
font-weight: normal; font-weight: normal;
margin: 5px 0; margin: 7px 0;
} }
/* line 98, ../sass/screen.scss */ /* line 115, ../sass/screen.scss */
.sidebar ul.nav li a { .sidebar ul.nav li a {
background: #fff7cc; border: 1px solid #8c0e00;
background: #fff;
color: #8c0e00;
box-shadow: -2px 2px 0 #f08f00;
padding: 10px 0; padding: 10px 0;
display: block; display: block;
text-align: center; text-align: center;
background: linear-gradient(to bottom, rgba(255, 247, 204, 0) 60%, #fff7cc 60%) no-repeat; transition: box-shadow 0.4s ease-out, transform 0.4s ease-out;
}
/* line 126, ../sass/screen.scss */
.sidebar ul.nav li a:hover {
box-shadow: -6px 6px 0 #f08f00;
transform: translateX(2px) translateY(-2px);
} }
/* line 109, ../sass/screen.scss */ /* line 136, ../sass/screen.scss */
.main { .main {
background: #fff;
flex-grow: 1; flex-grow: 1;
padding: 20px; padding: 20px;
width: 100%; width: 100%;
} }
/* line 114, ../sass/screen.scss */ /* line 142, ../sass/screen.scss */
.main .last-publication { .main .last-publication a {
display: block; display: block;
max-width: 300px; max-width: 350px;
margin: 15px auto; margin: 15px auto;
margin-bottom: 30px;
padding: 30px;
border: 1px solid #fff;
text-align: center; text-align: center;
font-size: 1.5em; font-size: 1.5em;
background: #ffe766; background: #8c0e00;
padding: 30px; color: #fff9a4;
font-family: "Bitter", serif;
box-shadow: 0 0 0 rgba(140, 14, 0, 0);
transition: box-shadow 1s ease-out;
}
/* line 157, ../sass/screen.scss */
.main .last-publication a:hover {
box-shadow: 0 0 5px #8c0e00;
} }
/* line 125, ../sass/screen.scss */ /* line 163, ../sass/screen.scss */
.publication-list { .publication-list {
margin: 10px 5px; margin: 10px 5px;
margin-left: 30px; margin-left: 30px;
padding: 0 30px;
max-width: 700px;
} }
/* line 128, ../sass/screen.scss */ /* line 169, ../sass/screen.scss */
.publication-list td { .publication-list .publication-entry {
padding: 3px 5px; display: flex;
align-items: center;
position: relative;
border-bottom: 1px solid #86abcb;
} }
/* line 131, ../sass/screen.scss */ /* line 175, ../sass/screen.scss */
.publication-list .publication-date { .publication-list .publication-entry:first-child {
border-top: 1px solid #86abcb;
}
/* line 179, ../sass/screen.scss */
.publication-list .publication-entry > span {
padding: 7px 5px;
display: inline-block;
}
/* line 183, ../sass/screen.scss */
.publication-list .publication-entry .publication-date {
text-align: right; text-align: right;
font-weight: light; font-weight: light;
font-size: 0.8em; font-size: 0.8em;
font-style: italic;
width: 100px;
}
/* line 190, ../sass/screen.scss */
.publication-list .publication-entry .publication-descr {
font-size: 0.9em;
opacity: 0.9;
}
/* line 193, ../sass/screen.scss */
.publication-list .publication-entry .publication-descr:before {
content: "– ";
}
/* line 197, ../sass/screen.scss */
.publication-list .publication-entry a.overlay {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
} }

10
mainsite/static/sass/_colors.scss
View file

@ -1,4 +1,10 @@
$fond: #990033; $jaune: #f2ea5a;
$cadreclair: #fff7cc; $rouge: #8c0e00;
$bleu: #4679a5;
$vert: #5e8c73;
$cadreclair: #fff9a4;
$eau: #38669a; $eau: #38669a;
$orange: #f08f00; $orange: #f08f00;
$blanc: #fff;
$pfont: "Source Sans Pro", sans-serif;
$hfont: "Bitter", serif;

142
mainsite/static/sass/screen.scss
View file

@ -13,11 +13,11 @@
} }
body, html { body, html {
background: darken($fond, 10%); background: $cadreclair;
padding: 0; padding: 0;
margin: 0; margin: 0;
height: 100%; height: 100%;
font-family: "Source Sans Pro", sans-serif; font-family: $pfont;
font-size: 18px; font-size: 18px;
line-height: 1.45; line-height: 1.45;
} }
@ -32,16 +32,29 @@ body.plain {
transform:translateY(-50%) translateX(-50%); transform:translateY(-50%) translateX(-50%);
background: $cadreclair; background: $cadreclair;
padding: 25px; padding: 25px;
button {
background: $rouge;
color: $cadreclair;
display: inline-block;
padding: 30px;
font: 25px $pfont;
font-weight: bold;
border: 1px solid #fff;
}
} }
} }
h1, h2, h3, h4 { h1, h2, h3, h4 {
font-family: "Bitter", serif; font-family: $hfont;
} }
h2 { h2 {
font-size: 1.8em; font-size: 1.8em;
text-align: center; text-align: center;
border-bottom: 2px solid #000;
padding: 10px;
margin-bottom: 0.7em;
} }
strong, b { strong, b {
@ -53,35 +66,34 @@ i, em {
} }
a { a {
color: $fond; color: $rouge;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
} }
.container, header {
background: #fff;
margin: 0 auto;
max-width: 800px;
}
header { header {
max-width: 700px;
margin: 0 auto;
text-align: center; text-align: center;
border-bottom: 2px solid #000; border-bottom: 3px solid #000;
position: relative; position: relative;
padding-bottom: 40px; padding-bottom: 30px;
margin: 30px auto;
&:after { &:after {
content: " "; content: " ";
position: absolute; position: absolute;
width: 100%; width: 110%;
z-index: 1; z-index: 1;
left: 0; left: -5%;
bottom: 25px; bottom: 25px;
border-bottom: 2px solid #000; border-bottom: 3px solid #000;
} }
} }
.container { .container {
margin: 0 auto;
max-width: 1200px;
display: table; display: table;
display: flex; display: flex;
padding: 15px; padding: 15px;
@ -89,48 +101,106 @@ header {
} }
.sidebar { .sidebar {
width: 210px; width: 400px;
padding-right: 40px;
ul.nav li { ul.nav {
display: block; margin-bottom: 30px;
font-weight: normal;
margin: 5px 0; li {
a {
background: $cadreclair;
padding: 10px 0;
display: block; display: block;
text-align: center; font-weight: normal;
background: linear-gradient(to bottom, rgba($cadreclair, 0) 60%, $cadreclair 60%) no-repeat margin: 7px 0;
a {
border: 1px solid $rouge;
background: $blanc;
color: $rouge;
box-shadow: -2px 2px 0 $orange;
padding: 10px 0;
display: block;
text-align: center;
// background: linear-gradient(to bottom, rgba($cadreclair, 0) 60%, $cadreclair 60%) no-repeat
transition: box-shadow 0.4s ease-out, transform 0.4s ease-out;
&:hover {
box-shadow: -6px 6px 0 $orange;
transform: translateX(2px) translateY(-2px);
}
}
} }
} }
} }
.main { .main {
background: #fff;
flex-grow: 1; flex-grow: 1;
padding: 20px; padding: 20px;
width: 100%; width: 100%;
.last-publication { .last-publication a {
display: block; display: block;
max-width: 300px; max-width: 350px;
margin: 15px auto; margin: 15px auto;
margin-bottom: 30px;
padding: 30px;
border: 1px solid #fff;
text-align: center; text-align: center;
font-size: 1.5em; font-size: 1.5em;
background: darken($cadreclair, 20%); background: $rouge;
padding: 30px; color: $cadreclair;
font-family: $hfont;
box-shadow: 0 0 0 rgba($rouge, 0);
transition: box-shadow 1s ease-out;
&:hover {
box-shadow: 0 0 5px $rouge;
}
} }
} }
.publication-list { .publication-list {
margin: 10px 5px; margin: 10px 5px;
margin-left: 30px; margin-left: 30px;
td { padding: 0 30px;
padding: 3px 5px; max-width: 700px;
}
.publication-date { .publication-entry {
text-align: right; display: flex;
font-weight: light; align-items: center;
font-size: 0.8em; position: relative;
border-bottom: 1px solid lighten($bleu, 20%);
&:first-child {
border-top: 1px solid lighten($bleu, 20%);
}
& > span {
padding: 7px 5px;
display: inline-block;
}
.publication-date {
text-align: right;
font-weight: light;
font-size: 0.8em;
font-style: italic;
width: 100px;
}
.publication-descr {
font-size: 0.9em;
opacity: 0.9;
&:before {
content: "– ";
}
}
a.overlay {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
} }
} }

6
mainsite/templates/mainsite/homepage.html
View file

@ -6,10 +6,8 @@
{% get_solo 'mainsite.SiteConfiguration' as site_config %} {% get_solo 'mainsite.SiteConfiguration' as site_config %}
<div class="last-publication"> <div class="last-publication">
<p> <a href="{% url "latestPublication" %}">
Demandez la Demandez la <br />dernière édition !</a>
<a href={% url "latestPublication" %}>dernière édition</a> !
</p>
</div> </div>
{{ site_config.homepageText | markdownify }} {{ site_config.homepageText | markdownify }}

20
mainsite/templates/mainsite/publications_list_view.html
View file

@ -13,22 +13,22 @@ Millésime {{ year_range }}
<div class="intro-text">{{ intro_text | markdownify }}</div> <div class="intro-text">{{ intro_text | markdownify }}</div>
<table class="publication-list"> <ul class="publication-list">
{% for bocal in publications %} {% for bocal in publications %}
<tr class="publication-entry"> <li class="publication-entry">
{% if bocal.unknown_date %} {% if bocal.unknown_date %}
<td class="publication-date">Date inconnue</td> <span class="publication-date">Date inconnue</span>
{% else %} {% else %}
<td class="publication-date">{{ bocal.date | date:"d/m/Y" }}</td> <span class="publication-date">{{ bocal.date | date:"d/m/Y" }}</span>
{% endif %} {% endif %}
<td class="publication-body"> <span class="publication-body">
<a href="{{ bocal.url }}" title="Lire le BOcal !">{{ bocal }}</a> <a href="{{ bocal.url }}" title="Lire le BOcal !">{{ bocal }}</a>
{% if bocal.descr %} {% if bocal.descr %}
: <span class="publication-descr">{{ bocal.descr }}</span> <span class="publication-descr">{{ bocal.descr }}</span>
{% endif %} {% endif %}
</td> </span>
</tr> <a class="overlay" href="{{ bocal.url }}" title="Lire {{ bocal|escapejs }} !"></a>
</li>
{% endfor %} {% endfor %}
</table> </ul>
{% endblock content %} {% endblock content %}