fix: repair responsive design

src/blog/themes/blog/layout/_partial/footer.ejs

@@ -8,18 +8,18 @@
     <li class="social-li"><a class="social-link" href="#" alt="Gitlab"><i class="fa fa-fw fa-gitlab"></i></a></li>
   </ul>
 
-  <div class="columns">
+  <div class="footer-collumns">
-    <div class="column">
+    <div>
       <p>Le contenue de ce site, sauf mention contraire, est diffusé sous licence <strong>Creative Common Attribution - Partage à l'Identique 4.0</strong> - hors mention contraire.</p>
       <p>Cette licence vous autorise à partager et copier mes travaux, tant que vous me citiez en source, et que vous autorisez la même chose pour les travaux qui en seraient dérivés. N'hésitez pas à partager ! <i style="color:#FF0000" class="fa fa-heart"></i></p>
     </div>
 
-    <div class="column">
+    <div>
       <p>Theme réalisé avec le quadriciel <a href="https://getbootstrap.com/">Bootstrap4</a> et la banque d'icone <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a>.</p>
       <p><%= __('powered_by') %> <a href="http://hexo.io/" target="_blank">Hexo</a></p>
     </div>
 
-    <div class="column">
+    <div>
       <p><a href="https://git.chlore.net/Kazhnuz/kazhnuz.space">Code Source</a> du site</p>
     </div>
   </div>

src/blog/themes/blog/layout/_partial/header.ejs

@@ -1,20 +1,13 @@
 <header id="page-header">
-  <div class="columns">
+  <div class="header-collumns">
-    <div class="column col-6">
+    <div class="logo-area">
         <h1><a href="/"><img src="/img/logo.png" alt="Kazhnuz"/></a></h1>
     </div>
 
-    <div class="column col-md-6">
+    <div class="navbar-area">
-        <nav class="navbar">
+      <a href="/blog" class="btn btn-navbar">Blog</a>
-            <section class="navbar-section">
+      <a href="/textes" class="btn btn-navbar">Textes</a>
-
+      <a href="/apropos.html" class="btn btn-navbar">A propos</a>
-            </section>
-            <section class="navbar-section">
-                <a href="/blog" class="btn btn-link">Blog</a>
-                <a href="/textes" class="btn btn-link">Textes</a>
-                <a href="/apropos.html" class="btn btn-link">A propos</a>
-            </section>
-          </nav>
     </div>
   </div>
 </header>

src/scss/_definitions.scss

@@ -34,6 +34,69 @@ $fontweight_hyper: 800;
 $basefont: Open Sans, sans-serif;
 $titlefont: Amatic SC, sans-serif;
 
+
+// MIXINS RESPONSIVES
+
+// Small tablets and large smartphones (landscape view)
+$screen-sm-min: 576px;
+
+// Small tablets (portrait view)
+$screen-md-min: 768px;
+
+// Tablets and small desktops
+$screen-lg-min: 992px;
+
+// Large tablets and desktops
+$screen-xl-min: 1200px;
+
+// Very large desktops
+$screen-xxl-min: 1600px;
+
+
+// Small devices
+@mixin sm {
+   @media (min-width: #{$screen-sm-min}) {
+       @content;
+   }
+}
+
+// Medium devices
+@mixin md {
+   @media (min-width: #{$screen-md-min}) {
+       @content;
+   }
+}
+
+// Large devices
+@mixin lg {
+   @media (min-width: #{$screen-lg-min}) {
+       @content;
+   }
+}
+
+// Extra large devices
+@mixin xl {
+   @media (min-width: #{$screen-xl-min}) {
+       @content;
+   }
+}
+
+// Extra large desktops
+@mixin xxl {
+   @media (min-width: #{$screen-xxl-min}) {
+       @content;
+   }
+}
+
+// Custom devices
+@mixin rwd($screen) {
+   @media (min-width: $screen+'px' ) {
+      @content;
+   }
+}
+
+// MIXINS AUTRES
+
 @mixin borders() {
   border: $border-size solid rgba(0, 0, 0, 0.3)
 }

src/scss/_drawing.scss

@@ -67,6 +67,18 @@ a.article-nav-link-wrap {
   }
 }
 
+.btn-navbar {
+    @include button($button_small);
+    padding-left: $button_small;
+    padding-right: $button_small;
+    @include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-light);
+    @include sm() {
+        @include button($button_large);
+        padding-left: $button_large;
+        padding-right: $button_large;
+    }
+}
+
 .pigimg, .mb {
   padding-bottom:1.5rem;
 }

src/scss/_global.scss

@@ -12,8 +12,23 @@
 }
 
 @mixin container-big() {
-    padding-left: 3*$lineheight;
+    padding-left: $lineheight/2;
-    padding-right: 3*$lineheight;
+    padding-right: $lineheight/2;
+
+    @include sm() {
+        padding-left: $lineheight;
+        padding-right: $lineheight;
+    }
+
+    @include lg() {
+        padding-left: $lineheight*2;
+        padding-right: $lineheight*2;
+    }
+
+    @include xxl() {
+        padding-left: $lineheight*3;
+        padding-right: $lineheight*3;
+    }
 }
 
 .no-pills {
@@ -30,9 +45,45 @@
 
 #page-header {
     background: $color-turquoise url('img/background.png') center bottom repeat-x;
-    height:11*$lineheight;
     border-top: 6px solid $color-dark2;
     @include container-big();
+    padding-bottom:3rem;
+
+    .header-collumns {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-areas:
+      "nav"
+      "logo";
+      grid-template-rows: auto;
+      grid-gap: $lineheight;
+      padding-bottom: $lineheight;
+
+      .navbar-area {
+        grid-area: nav;
+        text-align: center;
+      }
+
+      .logo-area {
+        grid-area: logo;
+      }
+
+      @include lg() {
+        grid-template-columns: 1fr 1fr;
+        grid-template-areas: "logo nav";
+        height:11*$lineheight;
+        padding-bottom:0;
+        .navbar-area {
+          text-align: right;
+        }
+      }
+
+      @include xxl() {
+        height:13*$lineheight;
+
+      }
+
+    }
 }
 
 header h1 {
@@ -73,32 +124,46 @@ header h1 {
 
 .container-blog {
     @include container-big();
+
     display: grid;
-    grid-template-columns: auto 360px;
+    grid-template-columns: 1fr;
     grid-template-rows: auto;
     row-gap: $lineheight;
     column-gap: 3rem;
+    grid-template-areas:
+    "main"
+    "side";
 
-    grid-template-areas: "main sidebar";
+    @include lg() {
+      grid-template-columns: auto 360px;
+      grid-template-areas: "main side";
+    }
 }
 
-main.mainpane {
+.mainpane {
     grid-area: main;
 }
 
-section.sidebar {
+.sidebar {
-    grid-area: sidebar;
+    grid-area: side;
 }
 
 .container-preview {
     @include container-big();
+
     display: grid;
-    grid-template-columns: 360px auto;
+    grid-template-columns: 1fr;
     grid-template-rows: auto;
     row-gap: $lineheight;
     column-gap: 3rem;
+    grid-template-areas:
+    "main"
+    "side";
 
-    grid-template-areas: "sidebar main";
+    @include lg() {
+      grid-template-columns: 360px auto;
+      grid-template-areas: "side main";
+    }
 }
 
 .container-onecolumn {
@@ -165,6 +230,19 @@ footer {
     @include container-big();
     font-size: 0.8rem!important;
     padding-bottom:1.5rem;
+
+    .footer-collumns {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: auto;
+      grid-gap: $lineheight;
+      padding-bottom: $lineheight;
+
+      @include lg() {
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+
+    }
 }
 
 /* social media */

src/scss/components/_previews.scss

@@ -7,10 +7,18 @@ $preview-height: 8*$lineheight;
 
 .previews-section {
   display: grid;
-  grid-template-columns: auto auto auto;
+  grid-template-columns: 1fr;
   grid-template-rows: auto;
   grid-gap: $lineheight;
   padding-bottom: $lineheight;
+  
+  @include xl() {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @include xxl() {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
 }
 
 .preview-container {

src/static/includes/_footer.html

@@ -8,17 +8,18 @@
     <li class="social-li"><a class="social-link" href="#" alt="Gitlab"><i class="fa fa-fw fa-gitlab"></i></a></li>
   </ul>
 
-  <div class="columns">
+  <div class="footer-collumns">
-    <div class="column">
+    <div>
-      <p>Ce theme est diffusé sous licence <strong>Creative Common Attribution - Partage à l'Identique 4.0</strong> - hors mention contraire.</p>
+      <p>Le contenue de ce site, sauf mention contraire, est diffusé sous licence <strong>Creative Common Attribution - Partage à l'Identique 4.0</strong> - hors mention contraire.</p>
       <p>Cette licence vous autorise à partager et copier mes travaux, tant que vous me citiez en source, et que vous autorisez la même chose pour les travaux qui en seraient dérivés. N'hésitez pas à partager ! <i style="color:#FF0000" class="fa fa-heart"></i></p>
     </div>
 
-    <div class="column">
+    <div>
       <p>Theme réalisé avec le quadriciel <a href="https://getbootstrap.com/">Bootstrap4</a> et la banque d'icone <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a>.</p>
+      <p><%= __('powered_by') %> <a href="http://hexo.io/" target="_blank">Hexo</a></p>
     </div>
 
-    <div class="column">
+    <div>
       <p><a href="https://git.chlore.net/Kazhnuz/kazhnuz.space">Code Source</a> du site</p>
     </div>
   </div>

src/static/includes/_header.html

@@ -1,20 +1,13 @@
 <header id="page-header">
-  <div class="columns">
+  <div class="header-collumns">
-    <div class="column col-6">
+    <div class="logo-area">
         <h1><a href="/"><img src="/img/logo.png" alt="Kazhnuz"/></a></h1>
     </div>
 
-    <div class="column col-md-6">
+    <div class="navbar-area">
-        <nav class="navbar">
+      <a href="/blog" class="btn btn-navbar">Blog</a>
-            <section class="navbar-section">
+      <a href="/textes" class="btn btn-navbar">Textes</a>
-
+      <a href="/apropos.html" class="btn btn-navbar">A propos</a>
-            </section>
-            <section class="navbar-section">
-                <a href="/blog" class="btn btn-link">Blog</a>
-                <a href="/textes" class="btn btn-link">Textes</a>
-                <a href="/apropos.html" class="btn btn-link">A propos</a>
-            </section>
-          </nav>
     </div>
   </div>
 </header>

src/textes/themes/blog/layout/_partial/footer.ejs

@@ -8,18 +8,18 @@
     <li class="social-li"><a class="social-link" href="#" alt="Gitlab"><i class="fa fa-fw fa-gitlab"></i></a></li>
   </ul>
 
-  <div class="columns">
+  <div class="footer-collumns">
-    <div class="column">
+    <div>
       <p>Le contenue de ce site, sauf mention contraire, est diffusé sous licence <strong>Creative Common Attribution - Partage à l'Identique 4.0</strong> - hors mention contraire.</p>
       <p>Cette licence vous autorise à partager et copier mes travaux, tant que vous me citiez en source, et que vous autorisez la même chose pour les travaux qui en seraient dérivés. N'hésitez pas à partager ! <i style="color:#FF0000" class="fa fa-heart"></i></p>
     </div>
 
-    <div class="column">
+    <div>
       <p>Theme réalisé avec le quadriciel <a href="https://getbootstrap.com/">Bootstrap4</a> et la banque d'icone <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a>.</p>
       <p><%= __('powered_by') %> <a href="http://hexo.io/" target="_blank">Hexo</a></p>
     </div>
 
-    <div class="column">
+    <div>
       <p><a href="https://git.chlore.net/Kazhnuz/kazhnuz.space">Code Source</a> du site</p>
     </div>
   </div>

src/textes/themes/blog/layout/_partial/header.ejs

@@ -1,20 +1,13 @@
 <header id="page-header">
-  <div class="columns">
+  <div class="header-collumns">
-    <div class="column col-6">
+    <div class="logo-area">
         <h1><a href="/"><img src="/img/logo.png" alt="Kazhnuz"/></a></h1>
     </div>
 
-    <div class="column col-md-6">
+    <div class="navbar-area">
-        <nav class="navbar">
+      <a href="/blog" class="btn btn-navbar">Blog</a>
-            <section class="navbar-section">
+      <a href="/textes" class="btn btn-navbar">Textes</a>
-
+      <a href="/apropos.html" class="btn btn-navbar">A propos</a>
-            </section>
-            <section class="navbar-section">
-                <a href="/blog" class="btn btn-link">Blog</a>
-                <a href="/textes" class="btn btn-link">Textes</a>
-                <a href="/apropos.html" class="btn btn-link">A propos</a>
-            </section>
-          </nav>
     </div>
   </div>
 </header>