Site plus joli pas responsive
This commit is contained in:
Evarin
parent
ce694f617b
commit
6bc6b8c315
5 changed files with 238 additions and 94 deletions
|
|
@ -1,3 +1,4 @@
|
|||
@charset "UTF-8";
|
||||
/* Welcome to Compass.
|
||||
* In this file you should write your main styles. (or centralize your imports)
|
||||
* 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 */
|
||||
body, html {
|
||||
background: #660022;
|
||||
background: #fff9a4;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
|
|
@ -92,119 +93,188 @@ body.plain #main {
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateY(-50%) translateX(-50%);
|
||||
background: #fff7cc;
|
||||
background: #fff9a4;
|
||||
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 {
|
||||
font-family: "Bitter", serif;
|
||||
}
|
||||
|
||||
/* line 42, ../sass/screen.scss */
|
||||
/* line 52, ../sass/screen.scss */
|
||||
h2 {
|
||||
font-size: 1.8em;
|
||||
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 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* line 51, ../sass/screen.scss */
|
||||
/* line 64, ../sass/screen.scss */
|
||||
i, em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* line 55, ../sass/screen.scss */
|
||||
/* line 68, ../sass/screen.scss */
|
||||
a {
|
||||
color: #990033;
|
||||
color: #8c0e00;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* line 61, ../sass/screen.scss */
|
||||
.container, header {
|
||||
background: #fff;
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
/* line 67, ../sass/screen.scss */
|
||||
/* line 74, ../sass/screen.scss */
|
||||
header {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #000;
|
||||
border-bottom: 3px solid #000;
|
||||
position: relative;
|
||||
padding-bottom: 40px;
|
||||
padding-bottom: 30px;
|
||||
margin: 30px auto;
|
||||
}
|
||||
/* line 73, ../sass/screen.scss */
|
||||
/* line 83, ../sass/screen.scss */
|
||||
header:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
width: 110%;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
left: -5%;
|
||||
bottom: 25px;
|
||||
border-bottom: 2px solid #000;
|
||||
border-bottom: 3px solid #000;
|
||||
}
|
||||
|
||||
/* line 84, ../sass/screen.scss */
|
||||
/* line 94, ../sass/screen.scss */
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
display: table;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* line 91, ../sass/screen.scss */
|
||||
/* line 103, ../sass/screen.scss */
|
||||
.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 {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
margin: 5px 0;
|
||||
margin: 7px 0;
|
||||
}
|
||||
/* line 98, ../sass/screen.scss */
|
||||
/* line 115, ../sass/screen.scss */
|
||||
.sidebar ul.nav li a {
|
||||
background: #fff7cc;
|
||||
border: 1px solid #8c0e00;
|
||||
background: #fff;
|
||||
color: #8c0e00;
|
||||
box-shadow: -2px 2px 0 #f08f00;
|
||||
padding: 10px 0;
|
||||
display: block;
|
||||
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 {
|
||||
background: #fff;
|
||||
flex-grow: 1;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
/* line 114, ../sass/screen.scss */
|
||||
.main .last-publication {
|
||||
/* line 142, ../sass/screen.scss */
|
||||
.main .last-publication a {
|
||||
display: block;
|
||||
max-width: 300px;
|
||||
max-width: 350px;
|
||||
margin: 15px auto;
|
||||
margin-bottom: 30px;
|
||||
padding: 30px;
|
||||
border: 1px solid #fff;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
background: #ffe766;
|
||||
padding: 30px;
|
||||
background: #8c0e00;
|
||||
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 {
|
||||
margin: 10px 5px;
|
||||
margin-left: 30px;
|
||||
padding: 0 30px;
|
||||
max-width: 700px;
|
||||
}
|
||||
/* line 128, ../sass/screen.scss */
|
||||
.publication-list td {
|
||||
padding: 3px 5px;
|
||||
/* line 169, ../sass/screen.scss */
|
||||
.publication-list .publication-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #86abcb;
|
||||
}
|
||||
/* line 131, ../sass/screen.scss */
|
||||
.publication-list .publication-date {
|
||||
/* line 175, ../sass/screen.scss */
|
||||
.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;
|
||||
font-weight: light;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
$fond: #990033;
|
||||
$cadreclair: #fff7cc;
|
||||
$jaune: #f2ea5a;
|
||||
$rouge: #8c0e00;
|
||||
$bleu: #4679a5;
|
||||
$vert: #5e8c73;
|
||||
$cadreclair: #fff9a4;
|
||||
$eau: #38669a;
|
||||
$orange: #f08f00;
|
||||
$blanc: #fff;
|
||||
$pfont: "Source Sans Pro", sans-serif;
|
||||
$hfont: "Bitter", serif;
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@
|
|||
}
|
||||
|
||||
body, html {
|
||||
background: darken($fond, 10%);
|
||||
background: $cadreclair;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
font-family: "Source Sans Pro", sans-serif;
|
||||
font-family: $pfont;
|
||||
font-size: 18px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
|
@ -32,16 +32,29 @@ body.plain {
|
|||
transform:translateY(-50%) translateX(-50%);
|
||||
background: $cadreclair;
|
||||
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 {
|
||||
font-family: "Bitter", serif;
|
||||
font-family: $hfont;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8em;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #000;
|
||||
padding: 10px;
|
||||
margin-bottom: 0.7em;
|
||||
}
|
||||
|
||||
strong, b {
|
||||
|
|
@ -53,35 +66,34 @@ i, em {
|
|||
}
|
||||
|
||||
a {
|
||||
color: $fond;
|
||||
color: $rouge;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.container, header {
|
||||
background: #fff;
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
header {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #000;
|
||||
border-bottom: 3px solid #000;
|
||||
position: relative;
|
||||
padding-bottom: 40px;
|
||||
padding-bottom: 30px;
|
||||
margin: 30px auto;
|
||||
|
||||
&:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
width: 110%;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
left: -5%;
|
||||
bottom: 25px;
|
||||
border-bottom: 2px solid #000;
|
||||
border-bottom: 3px solid #000;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
display: table;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
|
|
@ -89,48 +101,106 @@ header {
|
|||
}
|
||||
|
||||
.sidebar {
|
||||
width: 210px;
|
||||
width: 400px;
|
||||
padding-right: 40px;
|
||||
|
||||
ul.nav li {
|
||||
ul.nav {
|
||||
margin-bottom: 30px;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
margin: 5px 0;
|
||||
margin: 7px 0;
|
||||
|
||||
a {
|
||||
background: $cadreclair;
|
||||
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
|
||||
// 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 {
|
||||
background: #fff;
|
||||
flex-grow: 1;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
|
||||
.last-publication {
|
||||
.last-publication a {
|
||||
display: block;
|
||||
max-width: 300px;
|
||||
max-width: 350px;
|
||||
margin: 15px auto;
|
||||
margin-bottom: 30px;
|
||||
padding: 30px;
|
||||
border: 1px solid #fff;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
background: darken($cadreclair, 20%);
|
||||
padding: 30px;
|
||||
background: $rouge;
|
||||
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 {
|
||||
margin: 10px 5px;
|
||||
margin-left: 30px;
|
||||
td {
|
||||
padding: 3px 5px;
|
||||
padding: 0 30px;
|
||||
max-width: 700px;
|
||||
|
||||
.publication-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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,10 +6,8 @@
|
|||
{% get_solo 'mainsite.SiteConfiguration' as site_config %}
|
||||
|
||||
<div class="last-publication">
|
||||
<p>
|
||||
Demandez la
|
||||
<a href={% url "latestPublication" %}>dernière édition</a> !
|
||||
</p>
|
||||
<a href="{% url "latestPublication" %}">
|
||||
Demandez la <br />dernière édition !</a>
|
||||
</div>
|
||||
|
||||
{{ site_config.homepageText | markdownify }}
|
||||
|
|
|
|||
|
|
@ -13,22 +13,22 @@ Millésime {{ year_range }}
|
|||
|
||||
<div class="intro-text">{{ intro_text | markdownify }}</div>
|
||||
|
||||
<table class="publication-list">
|
||||
<ul class="publication-list">
|
||||
{% for bocal in publications %}
|
||||
<tr class="publication-entry">
|
||||
<li class="publication-entry">
|
||||
{% if bocal.unknown_date %}
|
||||
<td class="publication-date">Date inconnue</td>
|
||||
<span class="publication-date">Date inconnue</span>
|
||||
{% else %}
|
||||
<td class="publication-date">{{ bocal.date | date:"d/m/Y" }}</td>
|
||||
<span class="publication-date">{{ bocal.date | date:"d/m/Y" }}</span>
|
||||
{% endif %}
|
||||
<td class="publication-body">
|
||||
<span class="publication-body">
|
||||
<a href="{{ bocal.url }}" title="Lire le BOcal !">{{ bocal }}</a>
|
||||
|
||||
{% if bocal.descr %}
|
||||
: <span class="publication-descr">{{ bocal.descr }}</span>
|
||||
<span class="publication-descr">{{ bocal.descr }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
</span>
|
||||
<a class="overlay" href="{{ bocal.url }}" title="Lire {{ bocal|escapejs }} !"></a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</ul>
|
||||
{% endblock content %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue