From 6b51c7bd4294400804a9d2a36bba9729e90f7432 Mon Sep 17 00:00:00 2001
From: Evarin <champrobin@hotmail.com>
Date: Thu, 19 Oct 2017 16:12:57 +0200
Subject: [PATCH] Responsive un peu hackish mais fonctionnel

---
 mainsite/static/css/screen.css            | 186 ++++++++++++++++------
 mainsite/static/img/minimenu.svg          |  11 ++
 mainsite/static/sass/screen.scss          | 116 +++++++++++---
 mainsite/templates/mainsite/homepage.html |   2 +-
 mainsite/templates/sidebar.html           |   4 +-
 5 files changed, 248 insertions(+), 71 deletions(-)
 create mode 100644 mainsite/static/img/minimenu.svg

diff --git a/mainsite/static/css/screen.css b/mainsite/static/css/screen.css
index 1bdd318..bd602fd 100644
--- a/mainsite/static/css/screen.css
+++ b/mainsite/static/css/screen.css
@@ -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;
+  }
+}
diff --git a/mainsite/static/img/minimenu.svg b/mainsite/static/img/minimenu.svg
new file mode 100644
index 0000000..8b565a7
--- /dev/null
+++ b/mainsite/static/img/minimenu.svg
@@ -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>
diff --git a/mainsite/static/sass/screen.scss b/mainsite/static/sass/screen.scss
index b0e7d83..e523e63 100644
--- a/mainsite/static/sass/screen.scss
+++ b/mainsite/static/sass/screen.scss
@@ -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;
+            }
+        }
+    }
+}
diff --git a/mainsite/templates/mainsite/homepage.html b/mainsite/templates/mainsite/homepage.html
index d14d72c..684ca0a 100644
--- a/mainsite/templates/mainsite/homepage.html
+++ b/mainsite/templates/mainsite/homepage.html
@@ -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&nbsp;!</a>
 </div>
 
 {{ site_config.homepageText | markdownify }}
diff --git a/mainsite/templates/sidebar.html b/mainsite/templates/sidebar.html
index 8f154ae..605ac4c 100644
--- a/mainsite/templates/sidebar.html
+++ b/mainsite/templates/sidebar.html
@@ -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" %}">