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

Responsive un peu hackish mais fonctionnel

Browse source
This commit is contained in:
Evarin 2017-10-19 16:12:57 +02:00
parent 6bc6b8c315
commit 6b51c7bd42
5 changed files with 248 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -69,12 +69,12 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
display: block; display: block;
} }
/* line 11, ../sass/screen.scss */ /* line 13, ../sass/screen.scss */
*, *:after, *:before { *, *:after, *:before {
box-sizing: border-box; box-sizing: border-box;
} }
/* line 15, ../sass/screen.scss */ /* line 17, ../sass/screen.scss */
body, html { body, html {
background: #fff9a4; background: #fff9a4;
padding: 0; padding: 0;
@ -85,7 +85,7 @@ body, html {
line-height: 1.45; line-height: 1.45;
} }
/* line 26, ../sass/screen.scss */ /* line 28, ../sass/screen.scss */
body.plain #main { body.plain #main {
max-width: 500px; max-width: 500px;
position: absolute; position: absolute;
@ -96,7 +96,7 @@ body.plain #main {
background: #fff9a4; background: #fff9a4;
padding: 25px; padding: 25px;
} }
/* line 36, ../sass/screen.scss */ /* line 38, ../sass/screen.scss */
body.plain #main button { body.plain #main button {
background: #8c0e00; background: #8c0e00;
color: #fff9a4; color: #fff9a4;
@ -107,12 +107,12 @@ body.plain #main button {
border: 1px solid #fff; border: 1px solid #fff;
} }
/* line 48, ../sass/screen.scss */ /* line 50, ../sass/screen.scss */
h1, h2, h3, h4 { h1, h2, h3, h4 {
font-family: "Bitter", serif; font-family: "Bitter", serif;
} }
/* line 52, ../sass/screen.scss */ /* line 54, ../sass/screen.scss */
h2 { h2 {
font-size: 1.8em; font-size: 1.8em;
text-align: center; text-align: center;
@ -121,94 +121,113 @@ h2 {
margin-bottom: 0.7em; margin-bottom: 0.7em;
} }
/* line 60, ../sass/screen.scss */ /* line 62, ../sass/screen.scss */
strong, b { strong, b {
font-weight: bold; font-weight: bold;
} }
/* line 64, ../sass/screen.scss */ /* line 66, ../sass/screen.scss */
i, em { i, em {
font-style: italic; font-style: italic;
} }
/* line 68, ../sass/screen.scss */ /* line 70, ../sass/screen.scss */
a { a {
color: #8c0e00; color: #8c0e00;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
} }
/* line 74, ../sass/screen.scss */ /* line 76, ../sass/screen.scss */
header { header {
max-width: 700px; max-width: 700px;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
border-bottom: 3px solid #000;
position: relative;
padding-bottom: 30px;
margin: 30px auto;
} }
/* line 83, ../sass/screen.scss */ @media screen and (min-width: 600px) {
header:after { /* line 76, ../sass/screen.scss */
content: " "; header {
position: absolute; border-bottom: 3px solid #000;
width: 110%; position: relative;
z-index: 1; padding-bottom: 30px;
left: -5%; margin: 30px auto;
bottom: 25px; }
border-bottom: 3px solid #000; /* 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 { .container {
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
display: table;
display: flex;
padding: 15px;
width: 100%; 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 { .sidebar {
width: 400px; width: 400px;
padding-right: 40px; 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 { .sidebar ul.nav {
margin-bottom: 30px; margin-bottom: 30px;
} }
/* line 110, ../sass/screen.scss */ /* line 120, ../sass/screen.scss */
.sidebar ul.nav li { .sidebar ul.nav li {
display: block; display: block;
font-weight: normal; font-weight: normal;
margin: 7px 0; margin: 7px 0;
} }
/* line 115, ../sass/screen.scss */ /* line 125, ../sass/screen.scss */
.sidebar ul.nav li a { .sidebar ul.nav li a {
border: 1px solid #8c0e00; border: 1px solid #8c0e00;
background: #fff; background: #fff;
color: #8c0e00; color: #8c0e00;
box-shadow: -2px 2px 0 #f08f00;
padding: 10px 0; padding: 10px 0;
display: block; display: block;
text-align: center; text-align: center;
transition: box-shadow 0.4s ease-out, transform 0.4s ease-out;
} }
/* line 126, ../sass/screen.scss */ @media screen and (min-width: 600px) {
.sidebar ul.nav li a:hover { /* line 125, ../sass/screen.scss */
box-shadow: -6px 6px 0 #f08f00; .sidebar ul.nav li a {
transform: translateX(2px) translateY(-2px); 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 { .main {
background: #fff; background: #fff;
flex-grow: 1; flex-grow: 1;
padding: 20px; padding: 20px;
width: 100%; width: 100%;
} }
/* line 142, ../sass/screen.scss */ /* line 154, ../sass/screen.scss */
.main .last-publication a { .main .last-publication a {
display: block; display: block;
max-width: 350px; max-width: 350px;
@ -224,35 +243,35 @@ header:after {
box-shadow: 0 0 0 rgba(140, 14, 0, 0); box-shadow: 0 0 0 rgba(140, 14, 0, 0);
transition: box-shadow 1s ease-out; transition: box-shadow 1s ease-out;
} }
/* line 157, ../sass/screen.scss */ /* line 169, ../sass/screen.scss */
.main .last-publication a:hover { .main .last-publication a:hover {
box-shadow: 0 0 5px #8c0e00; box-shadow: 0 0 5px #8c0e00;
} }
/* line 163, ../sass/screen.scss */ /* line 175, ../sass/screen.scss */
.publication-list { .publication-list {
margin: 10px 5px; margin: 10px 5px;
margin-left: 30px; margin-left: 30px;
padding: 0 30px; padding: 0 30px;
max-width: 700px; max-width: 700px;
} }
/* line 169, ../sass/screen.scss */ /* line 181, ../sass/screen.scss */
.publication-list .publication-entry { .publication-list .publication-entry {
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
border-bottom: 1px solid #86abcb; border-bottom: 1px solid #86abcb;
} }
/* line 175, ../sass/screen.scss */ /* line 187, ../sass/screen.scss */
.publication-list .publication-entry:first-child { .publication-list .publication-entry:first-child {
border-top: 1px solid #86abcb; border-top: 1px solid #86abcb;
} }
/* line 179, ../sass/screen.scss */ /* line 191, ../sass/screen.scss */
.publication-list .publication-entry > span { .publication-list .publication-entry > span {
padding: 7px 5px; padding: 7px 5px;
display: inline-block; display: inline-block;
} }
/* line 183, ../sass/screen.scss */ /* line 195, ../sass/screen.scss */
.publication-list .publication-entry .publication-date { .publication-list .publication-entry .publication-date {
text-align: right; text-align: right;
font-weight: light; font-weight: light;
@ -260,16 +279,16 @@ header:after {
font-style: italic; font-style: italic;
width: 100px; width: 100px;
} }
/* line 190, ../sass/screen.scss */ /* line 202, ../sass/screen.scss */
.publication-list .publication-entry .publication-descr { .publication-list .publication-entry .publication-descr {
font-size: 0.9em; font-size: 0.9em;
opacity: 0.9; opacity: 0.9;
} }
/* line 193, ../sass/screen.scss */ /* line 205, ../sass/screen.scss */
.publication-list .publication-entry .publication-descr:before { .publication-list .publication-entry .publication-descr:before {
content: "– "; content: "– ";
} }
/* line 197, ../sass/screen.scss */ /* line 209, ../sass/screen.scss */
.publication-list .publication-entry a.overlay { .publication-list .publication-entry a.overlay {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
@ -278,3 +297,74 @@ header:after {
top: 0; top: 0;
left: 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
View 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>
Side by side

After

Width:  |  Height:  |  Size: 999 B

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

@ -8,6 +8,8 @@
@import url('https://fonts.googleapis.com/css?family=Bitter:400,700|Source+Sans+Pro:400,700'); @import url('https://fonts.googleapis.com/css?family=Bitter:400,700|Source+Sans+Pro:400,700');
$switchwidth: 600px;
*, *:after, *:before { *, *:after, *:before {
box-sizing: border-box; box-sizing: border-box;
} }
@ -75,28 +77,32 @@ header {
max-width: 700px; max-width: 700px;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
border-bottom: 3px solid #000; @media screen and (min-width:$switchwidth) {
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; 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 { .container {
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
display: table; @media screen and (min-width:$switchwidth) {
display: flex; display: table;
padding: 15px; display: flex;
padding: 15px;
}
width: 100%; width: 100%;
} }
@ -104,6 +110,10 @@ header {
width: 400px; width: 400px;
padding-right: 40px; padding-right: 40px;
.minimenu {
display: none;
}
ul.nav { ul.nav {
margin-bottom: 30px; margin-bottom: 30px;
@ -116,16 +126,18 @@ header {
border: 1px solid $rouge; border: 1px solid $rouge;
background: $blanc; background: $blanc;
color: $rouge; color: $rouge;
box-shadow: -2px 2px 0 $orange;
padding: 10px 0; padding: 10px 0;
display: block; display: block;
text-align: center; 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 { @media screen and (min-width:$switchwidth) {
box-shadow: -6px 6px 0 $orange; box-shadow: -2px 2px 0 $orange;
transform: translateX(2px) translateY(-2px); 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;
}
}
}
}

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

@ -7,7 +7,7 @@
<div class="last-publication"> <div class="last-publication">
<a href="{% url "latestPublication" %}"> <a href="{% url "latestPublication" %}">
Demandez la <br />dernière édition !</a> Demandez la <br />dernière édition&nbsp;!</a>
</div> </div>
{{ site_config.homepageText | markdownify }} {{ site_config.homepageText | markdownify }}

4
mainsite/templates/sidebar.html
View file

@ -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"> <ul class="nav nav-sidebar">
<li> <li>
<a href="{% url "homepage" %}"> <a href="{% url "homepage" %}">