Responsive un peu hackish mais fonctionnel
This commit is contained in:
Evarin
parent
6bc6b8c315
commit
6b51c7bd42
5 changed files with 248 additions and 71 deletions
|
|
@ -69,12 +69,12 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
|
|||
display: block;
|
||||
}
|
||||
|
||||
/* line 11, ../sass/screen.scss */
|
||||
/* line 13, ../sass/screen.scss */
|
||||
*, *:after, *:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* line 15, ../sass/screen.scss */
|
||||
/* line 17, ../sass/screen.scss */
|
||||
body, html {
|
||||
background: #fff9a4;
|
||||
padding: 0;
|
||||
|
|
@ -85,7 +85,7 @@ body, html {
|
|||
line-height: 1.45;
|
||||
}
|
||||
|
||||
/* line 26, ../sass/screen.scss */
|
||||
/* line 28, ../sass/screen.scss */
|
||||
body.plain #main {
|
||||
max-width: 500px;
|
||||
position: absolute;
|
||||
|
|
@ -96,7 +96,7 @@ body.plain #main {
|
|||
background: #fff9a4;
|
||||
padding: 25px;
|
||||
}
|
||||
/* line 36, ../sass/screen.scss */
|
||||
/* line 38, ../sass/screen.scss */
|
||||
body.plain #main button {
|
||||
background: #8c0e00;
|
||||
color: #fff9a4;
|
||||
|
|
@ -107,12 +107,12 @@ body.plain #main button {
|
|||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
/* line 48, ../sass/screen.scss */
|
||||
/* line 50, ../sass/screen.scss */
|
||||
h1, h2, h3, h4 {
|
||||
font-family: "Bitter", serif;
|
||||
}
|
||||
|
||||
/* line 52, ../sass/screen.scss */
|
||||
/* line 54, ../sass/screen.scss */
|
||||
h2 {
|
||||
font-size: 1.8em;
|
||||
text-align: center;
|
||||
|
|
@ -121,94 +121,113 @@ h2 {
|
|||
margin-bottom: 0.7em;
|
||||
}
|
||||
|
||||
/* line 60, ../sass/screen.scss */
|
||||
/* line 62, ../sass/screen.scss */
|
||||
strong, b {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* line 64, ../sass/screen.scss */
|
||||
/* line 66, ../sass/screen.scss */
|
||||
i, em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* line 68, ../sass/screen.scss */
|
||||
/* line 70, ../sass/screen.scss */
|
||||
a {
|
||||
color: #8c0e00;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* line 74, ../sass/screen.scss */
|
||||
/* line 76, ../sass/screen.scss */
|
||||
header {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
border-bottom: 3px solid #000;
|
||||
position: relative;
|
||||
padding-bottom: 30px;
|
||||
margin: 30px auto;
|
||||
}
|
||||
/* line 83, ../sass/screen.scss */
|
||||
header:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 110%;
|
||||
z-index: 1;
|
||||
left: -5%;
|
||||
bottom: 25px;
|
||||
border-bottom: 3px solid #000;
|
||||
@media screen and (min-width: 600px) {
|
||||
/* line 76, ../sass/screen.scss */
|
||||
header {
|
||||
border-bottom: 3px solid #000;
|
||||
position: relative;
|
||||
padding-bottom: 30px;
|
||||
margin: 30px auto;
|
||||
}
|
||||
/* line 86, ../sass/screen.scss */
|
||||
header:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 110%;
|
||||
z-index: 1;
|
||||
left: -5%;
|
||||
bottom: 25px;
|
||||
border-bottom: 3px solid #000;
|
||||
}
|
||||
}
|
||||
|
||||
/* line 94, ../sass/screen.scss */
|
||||
/* line 98, ../sass/screen.scss */
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
display: table;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
@media screen and (min-width: 600px) {
|
||||
/* line 98, ../sass/screen.scss */
|
||||
.container {
|
||||
display: table;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* line 103, ../sass/screen.scss */
|
||||
/* line 109, ../sass/screen.scss */
|
||||
.sidebar {
|
||||
width: 400px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
/* line 107, ../sass/screen.scss */
|
||||
/* line 113, ../sass/screen.scss */
|
||||
.sidebar .minimenu {
|
||||
display: none;
|
||||
}
|
||||
/* line 117, ../sass/screen.scss */
|
||||
.sidebar ul.nav {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
/* line 110, ../sass/screen.scss */
|
||||
/* line 120, ../sass/screen.scss */
|
||||
.sidebar ul.nav li {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
margin: 7px 0;
|
||||
}
|
||||
/* line 115, ../sass/screen.scss */
|
||||
/* line 125, ../sass/screen.scss */
|
||||
.sidebar ul.nav li a {
|
||||
border: 1px solid #8c0e00;
|
||||
background: #fff;
|
||||
color: #8c0e00;
|
||||
box-shadow: -2px 2px 0 #f08f00;
|
||||
padding: 10px 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
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);
|
||||
@media screen and (min-width: 600px) {
|
||||
/* line 125, ../sass/screen.scss */
|
||||
.sidebar ul.nav li a {
|
||||
box-shadow: -2px 2px 0 #f08f00;
|
||||
transition: box-shadow 0.4s ease-out, transform 0.4s ease-out;
|
||||
}
|
||||
/* line 137, ../sass/screen.scss */
|
||||
.sidebar ul.nav li a:hover {
|
||||
box-shadow: -6px 6px 0 #f08f00;
|
||||
transform: translateX(2px) translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
/* line 136, ../sass/screen.scss */
|
||||
/* line 148, ../sass/screen.scss */
|
||||
.main {
|
||||
background: #fff;
|
||||
flex-grow: 1;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
/* line 142, ../sass/screen.scss */
|
||||
/* line 154, ../sass/screen.scss */
|
||||
.main .last-publication a {
|
||||
display: block;
|
||||
max-width: 350px;
|
||||
|
|
@ -224,35 +243,35 @@ header:after {
|
|||
box-shadow: 0 0 0 rgba(140, 14, 0, 0);
|
||||
transition: box-shadow 1s ease-out;
|
||||
}
|
||||
/* line 157, ../sass/screen.scss */
|
||||
/* line 169, ../sass/screen.scss */
|
||||
.main .last-publication a:hover {
|
||||
box-shadow: 0 0 5px #8c0e00;
|
||||
}
|
||||
|
||||
/* line 163, ../sass/screen.scss */
|
||||
/* line 175, ../sass/screen.scss */
|
||||
.publication-list {
|
||||
margin: 10px 5px;
|
||||
margin-left: 30px;
|
||||
padding: 0 30px;
|
||||
max-width: 700px;
|
||||
}
|
||||
/* line 169, ../sass/screen.scss */
|
||||
/* line 181, ../sass/screen.scss */
|
||||
.publication-list .publication-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #86abcb;
|
||||
}
|
||||
/* line 175, ../sass/screen.scss */
|
||||
/* line 187, ../sass/screen.scss */
|
||||
.publication-list .publication-entry:first-child {
|
||||
border-top: 1px solid #86abcb;
|
||||
}
|
||||
/* line 179, ../sass/screen.scss */
|
||||
/* line 191, ../sass/screen.scss */
|
||||
.publication-list .publication-entry > span {
|
||||
padding: 7px 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
/* line 183, ../sass/screen.scss */
|
||||
/* line 195, ../sass/screen.scss */
|
||||
.publication-list .publication-entry .publication-date {
|
||||
text-align: right;
|
||||
font-weight: light;
|
||||
|
|
@ -260,16 +279,16 @@ header:after {
|
|||
font-style: italic;
|
||||
width: 100px;
|
||||
}
|
||||
/* line 190, ../sass/screen.scss */
|
||||
/* line 202, ../sass/screen.scss */
|
||||
.publication-list .publication-entry .publication-descr {
|
||||
font-size: 0.9em;
|
||||
opacity: 0.9;
|
||||
}
|
||||
/* line 193, ../sass/screen.scss */
|
||||
/* line 205, ../sass/screen.scss */
|
||||
.publication-list .publication-entry .publication-descr:before {
|
||||
content: "– ";
|
||||
}
|
||||
/* line 197, ../sass/screen.scss */
|
||||
/* line 209, ../sass/screen.scss */
|
||||
.publication-list .publication-entry a.overlay {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
|
@ -278,3 +297,74 @@ header:after {
|
|||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
/* line 221, ../sass/screen.scss */
|
||||
.container {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
/* line 224, ../sass/screen.scss */
|
||||
header, .sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
min-height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* line 230, ../sass/screen.scss */
|
||||
header {
|
||||
z-index: 15;
|
||||
right: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
/* line 234, ../sass/screen.scss */
|
||||
header img {
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
/* line 238, ../sass/screen.scss */
|
||||
.sidebar {
|
||||
z-index: 14;
|
||||
background: #fff9a4;
|
||||
border-bottom: 3px solid #8c0e00;
|
||||
padding: 4px;
|
||||
padding-top: 55px;
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
/* line 247, ../sass/screen.scss */
|
||||
.sidebar .minimenu {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
display: block;
|
||||
}
|
||||
/* line 252, ../sass/screen.scss */
|
||||
.sidebar .minimenu img {
|
||||
height: 50px;
|
||||
}
|
||||
/* line 256, ../sass/screen.scss */
|
||||
.sidebar ul.nav {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
font-size: 0.95em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/* line 264, ../sass/screen.scss */
|
||||
.sidebar ul.nav li {
|
||||
display: inline-block;
|
||||
min-width: 150px;
|
||||
margin: 5px;
|
||||
}
|
||||
/* line 268, ../sass/screen.scss */
|
||||
.sidebar ul.nav li a {
|
||||
padding: 10px;
|
||||
}
|
||||
/* line 275, ../sass/screen.scss */
|
||||
.sidebar.collapse ul {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
11
mainsite/static/img/minimenu.svg
Normal file
11
mainsite/static/img/minimenu.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
|
||||
<path fill="none" stroke="#8c0e00" stroke-width="2" d="M47.062,41.393c0,3.131-2.538,5.669-5.669,5.669H8.608 c-3.131,0-5.669-2.538-5.669-5.669V8.608c0-3.131,2.538-5.669,5.669-5.669h32.785c3.131,0,5.669,2.538,5.669,5.669V41.393z"/>
|
||||
<g>
|
||||
<line fill="none" stroke="#8c0e00" stroke-width="3" x1="10.826" y1="15" x2="40.241" y2="15"/>
|
||||
<line fill="none" stroke="#8c0e00" stroke-width="3" x1="10.826" y1="25" x2="40.241" y2="25"/>
|
||||
<line fill="none" stroke="#8c0e00" stroke-width="3" x1="10.826" y1="35" x2="40.241" y2="35"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 999 B |
|
|
@ -8,6 +8,8 @@
|
|||
|
||||
@import url('https://fonts.googleapis.com/css?family=Bitter:400,700|Source+Sans+Pro:400,700');
|
||||
|
||||
$switchwidth: 600px;
|
||||
|
||||
*, *:after, *:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -75,28 +77,32 @@ header {
|
|||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
border-bottom: 3px solid #000;
|
||||
position: relative;
|
||||
padding-bottom: 30px;
|
||||
margin: 30px auto;
|
||||
|
||||
&:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 110%;
|
||||
z-index: 1;
|
||||
left: -5%;
|
||||
bottom: 25px;
|
||||
@media screen and (min-width:$switchwidth) {
|
||||
border-bottom: 3px solid #000;
|
||||
position: relative;
|
||||
padding-bottom: 30px;
|
||||
margin: 30px auto;
|
||||
|
||||
&:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 110%;
|
||||
z-index: 1;
|
||||
left: -5%;
|
||||
bottom: 25px;
|
||||
border-bottom: 3px solid #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
display: table;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
@media screen and (min-width:$switchwidth) {
|
||||
display: table;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
}
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -104,6 +110,10 @@ header {
|
|||
width: 400px;
|
||||
padding-right: 40px;
|
||||
|
||||
.minimenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul.nav {
|
||||
margin-bottom: 30px;
|
||||
|
||||
|
|
@ -116,16 +126,18 @@ header {
|
|||
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);
|
||||
@media screen and (min-width:$switchwidth) {
|
||||
box-shadow: -2px 2px 0 $orange;
|
||||
transition: box-shadow 0.4s ease-out, transform 0.4s ease-out;
|
||||
|
||||
&:hover {
|
||||
box-shadow: -6px 6px 0 $orange;
|
||||
transform: translateX(2px) translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -204,3 +216,65 @@ header {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:$switchwidth) {
|
||||
.container {
|
||||
margin-top: 60px;
|
||||
}
|
||||
header, .sidebar {
|
||||
position:fixed;
|
||||
top: 0;
|
||||
min-height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
header {
|
||||
z-index: 15;
|
||||
right: 60px;
|
||||
height: 60px;
|
||||
img {
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
.sidebar {
|
||||
z-index: 14;
|
||||
background: $cadreclair;
|
||||
border-bottom: 3px solid $rouge;
|
||||
padding: 4px;
|
||||
padding-top: 55px;
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
|
||||
.minimenu {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
display: block;
|
||||
img {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
ul.nav {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
font-size: 0.95em;
|
||||
margin-bottom: 10px;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
min-width: 150px;
|
||||
margin: 5px;
|
||||
a {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.collapse {
|
||||
ul {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<div class="last-publication">
|
||||
<a href="{% url "latestPublication" %}">
|
||||
Demandez la <br />dernière édition !</a>
|
||||
Demandez la <br />dernière édition !</a>
|
||||
</div>
|
||||
|
||||
{{ site_config.homepageText | markdownify }}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<div id="sidebar" class="col-sm-3 col-md-2 sidebar collapse">
|
||||
{% load staticfiles %}
|
||||
<div id="sidebar" class="sidebar collapse">
|
||||
<a href="javascript:void(0);" onclick="document.getElementById('sidebar').classList.toggle('collapse');" class="minimenu"><img src="{% static "img/minimenu.svg" %}"></a>
|
||||
<ul class="nav nav-sidebar">
|
||||
<li>
|
||||
<a href="{% url "homepage" %}">
|
||||
|
|
|
|||
Loading…
Reference in a new issue