up styles

templates/html/article.html.j2

@@ -106,10 +106,17 @@
             <div class="container">
                 <div class="site-footer-inner">
 
+
                     <div class="site-foot-soutien">
                     {{template_content['SOUTIEN']}}
                     </div>
                     <nav class="footer-nav">
+                    <form role="search" method="get" class="search-form" action="/" id="recherche_footer">
+                                <label>
+                                    <input class="search-field" placeholder="Recherche" value="" name="s" type="search">
+                                </label>
+                                <input class="is-hidden search-submit" value="Rechercher" type="submit">
+                            </form>
                         {{template_content['NAVIGATION']}}
                         <a href="/tags/">Tags</a>
                         <a href="{{template_content['NDD']}}/feed/">Flux Atom</a>

templates/styles/style_general.css

@@ -87,11 +87,10 @@ h3 {
 .content video,
 .content canvas,
 .content svg {
-  width: 75ch;
   display: block;
   margin-top: 1rem;
   margin-bottom: 1rem;
-  max-width: 65ch;
+  max-width: 100%;
 }
 
 pre,
@@ -106,6 +105,7 @@ a {
   text-decoration: none;
   padding: 0.25rem;
   max-width: 65ch;
+  word-wrap: anywhere;
 }
 main a:hover {
   background: #303030;
@@ -345,17 +345,49 @@ q {
 }
 
 .footer-nav {
-  width: 63ch;
+  max-width: 63ch;
   margin-top: 2rem;
 }
 
-@media (max-width: 75ch) {
+iframe {
+  max-width: 100%;
+}
+
+@media (max-width: 800px) {
   body {
     padding: 0;
   }
+  .header-img a {
+    float: left;
+  }
+  .site-icon {
+    width: 2rem;
+    height: 2rem;
+  }
   main {
     padding: 1rem;
   }
+  #recherche {
+    display: none;
+  }
+  #recherche_footer {
+    padding-left: 1.25rem;
+    font-size: 1rem;
+  }
+  .navbar-brand {
+    display: none;
+  }
+  .navbar-menu .logo {
+    display: none;
+  }
+  .navbar a {
+    font-size: 1rem;
+    padding: 0.5rem;
+    float: left;
+  }
+  .body-wrap {
+    margin-top: 0;
+  }
 }
 
 /*# sourceMappingURL=style_general.css.map */

templates/styles/style_general.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../styles_src/style_general.scss","../styles_src/_variables.scss"],"names":[],"mappings":";AAAA;AAIA;EACE;EACA;EACA;;AAEA;EAEE;;;AAIJ;EACE;EACA,aCmBiB;;;ADhBnB;EACE;EACA,WCLe;EDMf,aCDiB;EDEjB,OCvBW;EDwBX,YCvBiB;EDwBjB;EACA,gBCEW;;;ADCb;AAAA;AAAA;AAAA;EAIE,WCnBoB;EDoBpB;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,aCPoB;EDQpB,YClBW;EDmBX,eCjBW;EDkBX,OC5Cc;ED6Cd;EACA;EACA;EACA,aC5BoB;;;ADgCtB;AAAA;EAEE,YAvDW;EAwDX;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE,OCjEiB;EDkEjB,WCnDa;EDoDb;;;AAGF;EACE,WCvDa;EDwDb;;;AAGF;EACE,WC3Da;ED4Db;;;AAGF;EACE,WCnEkB;EDoElB;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE,OChFY;EDiFZ;EACA,YCrES;EDsET,eCtES;EDuET;;;AAIJ;AAAA;EAEE;;;AAIF;EACE;EACA,eC7EiB;ED8EjB,OC1GW;ED2GX;EACA;EACA;;AAEA;EACE,YC1GkB;ED2GlB,OCjHS;;ADmHT;EACE,OCpHO;;ADwHX;EAEE;EACA;EACA,cCtGS;EDuGT,eCvGS;;AD0GX;EACE;EACA;;;AAIJ;EACE,YCnGe;;ADqGf;EACE;EACA,YCxGe;;;AD4GnB;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;EACA,YClIW;EDmIX,eCpIW;EDqIX;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;AAAA;EAEE;;;AAGF;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;EACA,cCnKS;;;ADwKb;EACE;;;AAGF;EACE;EACA;;;AAIA;EACE;;;AAKF;EACE,OCvLS;EDwLT,QCxLS;EDyLT,cC3LS;;AD8LX;EACE;EACA;;;AAIJ;EACE,YCpMW;EDqMX,eCrMW;EDsMX;;AAEA;EACE;EACA,SC5MS;ED6MT;EACA,eCxMe;;;AD4MnB;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA,SCzNS;;;AD6Nb;EACE;EACA,SC/NW;EDgOX;EACA;;;AAGF;AAAA;EAGE,OChQiB;EDiQjB;EACA;EACA;;;AAGF;EACE,YCjQc;;;ADoQhB;EACE,YC3QiB;ED4QjB,SC/OkB;EDgPlB;EACA,YCrPW;EDsPX,eChPiB;EDiPjB;;AAEA;EACE;;;AAIJ;EACE;EACA,SC9PW;ED+PX,YCtRgB;EDuRhB,OCtRkB;;;ADyRpB;EACE,OCnRc;EDoRd;;;AAGF;EACE;EACA,SC5QW;;;AD+Qb;EACE;;;AAGF;EACE,YClRW;EDmRX,eCnRW;;ADqRX;EACE,eCtRS;EDuRT;EACA;;;AAIJ;EACE,YC/RW;EDgSX,eChSW;;ADkSX;EACE;EACA,SCrSS;;;AD4SX;AAAA;EACE;;AAGF;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA,SCtTO;;;AD2Tb;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA,cChUW;EDiUX,aClUW;EDmUX,gBCnUW;;;ADsUb;EACE;;;AAIA;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA,cCvVS;;;AD2Vb;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;IACE;;EAGF;IACE,SC9WS","file":"style_general.css"}
+{"version":3,"sourceRoot":"","sources":["../styles_src/style_general.scss","../styles_src/_variables.scss"],"names":[],"mappings":";AAAA;AAIA;EACE;EACA;EACA;;AAEA;EAEE;;;AAIJ;EACE;EACA,aCmBiB;;;ADhBnB;EACE;EACA,WCLe;EDMf,aCDiB;EDEjB,OCvBW;EDwBX,YCvBiB;EDwBjB;EACA,gBCEW;;;ADCb;AAAA;AAAA;AAAA;EAIE,WCnBoB;EDoBpB;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,aCPoB;EDQpB,YClBW;EDmBX,eCjBW;EDkBX,OC5Cc;ED6Cd;EACA;EACA;EACA,aC5BoB;;;ADgCtB;AAAA;EAEE,YAvDW;EAwDX;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE,OCjEiB;EDkEjB,WCnDa;EDoDb;;;AAGF;EACE,WCvDa;EDwDb;;;AAGF;EACE,WC3Da;ED4Db;;;AAGF;EACE,WCnEkB;EDoElB;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAME;EACA,YCrES;EDsET,eCtES;EDuET;;;AAIJ;AAAA;EAEE;;;AAIF;EACE;EACA,eC7EiB;ED8EjB,OC1GW;ED2GX;EACA;EACA;EACA;;AAEA;EACE,YC3GkB;ED4GlB,OClHS;;ADoHT;EACE,OCrHO;;ADyHX;EAEE;EACA;EACA,cCvGS;EDwGT,eCxGS;;AD2GX;EACE;EACA;;;AAIJ;EACE,YCpGe;;ADsGf;EACE;EACA,YCzGe;;;AD6GnB;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;EACA,YCnIW;EDoIX,eCrIW;EDsIX;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;AAAA;EAEE;;;AAGF;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;EACA,cCpKS;;;ADyKb;EACE;;;AAGF;EACE;EACA;;;AAIA;EACE;;;AAKF;EACE,OCxLS;EDyLT,QCzLS;ED0LT,cC5LS;;AD+LX;EACE;EACA;;;AAIJ;EACE,YCrMW;EDsMX,eCtMW;EDuMX;;AAEA;EACE;EACA,SC7MS;ED8MT;EACA,eCzMe;;;AD6MnB;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA,SC1NS;;;AD8Nb;EACE;EACA,SChOW;EDiOX;EACA;;;AAGF;AAAA;EAGE,OCjQiB;EDkQjB;EACA;EACA;;;AAGF;EACE,YClQc;;;ADqQhB;EACE,YC5QiB;ED6QjB,SChPkB;EDiPlB;EACA,YCtPW;EDuPX,eCjPiB;EDkPjB;;AAEA;EACE;;;AAIJ;EACE;EACA,SC/PW;EDgQX,YCvRgB;EDwRhB,OCvRkB;;;AD0RpB;EACE,OCpRc;EDqRd;;;AAGF;EACE;EACA,SC7QW;;;ADgRb;EACE;;;AAGF;EACE,YCnRW;EDoRX,eCpRW;;ADsRX;EACE,eCvRS;EDwRT;EACA;;;AAIJ;EACE,YChSW;EDiSX,eCjSW;;ADmSX;EACE;EACA,SCtSS;;;AD6SX;AAAA;EACE;;AAGF;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA,SCvTO;;;AD4Tb;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA,cCjUW;EDkUX,aCnUW;EDoUX,gBCpUW;;;ADuUb;EACE;;;AAIA;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA,cCxVS;;;AD4Vb;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;IACE;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;IACE,SC5XS;;ED+XX;IACE;;EAGF;IACE;IACA;;EAGF;IACE;;EAIA;IACE;;EAIJ;IACE;IACA;IACA;;EAGF;IACE","file":"style_general.css"}

templates/styles_src/style_general.scss

@@ -92,11 +92,11 @@ h3 {
   video,
   canvas,
   svg {
-    width: $article-width;
+
     display: block;
     margin-top: $spacing-sm;
     margin-bottom: $spacing-sm;
-    max-width: 65ch;
+    max-width: 100%;
   }
 }
 
@@ -113,6 +113,7 @@ a {
   text-decoration: none;
   padding: 0.25rem;
   max-width: 65ch;
+  word-wrap: anywhere;
 
   main &:hover {
     background: $color-link-hover-bg;
@@ -385,12 +386,54 @@ q {
   margin-top: 2rem;
 }
 
-@media (max-width: $article-width) {
+iframe {
+  max-width: 100%;
+}
+
+@media (max-width: 800px) {
   body {
     padding: 0;
   }
 
+  .header-img a {
+    float: left;
+  }
+
+  .site-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+
   main {
     padding: $spacing-sm;
   }
+
+  #recherche {
+    display: none;
+  }
+
+  #recherche_footer {
+    padding-left: 1.25rem;
+    font-size: 1rem;
+  }
+
+  .navbar-brand {
+    display: none;
+  }
+
+  .navbar-menu {
+    .logo {
+      display: none;
+    }
+  }
+
+  .navbar a {
+    font-size: 1rem;
+    padding: 0.5rem;
+    float: left;
+  }
+
+  .body-wrap {
+    margin-top: 0;
+  }
 }