improvement: use latest css and static pages

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

@@ -10,3 +10,89 @@
 @import 'components/buttons';
 
 @import 'components/previews';
+
+.article-meta, .article-nav {
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 1.5rem;
+}
+
+.article-category-link {
+    @include button($button_small);
+    padding-left: $button_small;
+    padding-right: $button_small;
+    @include button-color($color-info, $color-button-light);
+      &:hover, &:active {
+          @include borders();
+      }
+
+      p &:last-child {
+          margin-bottom:0;
+      }
+}
+
+strong.btn-fake {
+  @include button($button_large);
+  @include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
+}
+
+a.article-nav-link-wrap {
+  @include button($button_large);
+  padding-left: $button_large;
+  padding-right: $button_large;
+    &:hover, &:active {
+        @include borders();
+    }
+
+    p &:last-child {
+        margin-bottom:0;
+    }
+    @include button-color($color-info, $color-button-light);
+}
+
+.article-more-link {
+  text-align: center;
+  a {
+      @include button($button_large);
+      padding-left: $button_large;
+      padding-right: $button_large;
+        &:hover, &:active {
+            @include borders();
+        }
+
+        p &:last-child {
+            margin-bottom:0;
+        }
+      @include button-fullcontrol(transparent, rgba(0,0,0,0.05), $color-primary);
+  }
+}
+
+.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;
+}
+
+#page-nav {
+  padding-bottom:1.5rem;
+  .page-number, .next, .prev {
+      @include button($button_small);
+      padding-left: $button_small;
+      padding-right: $button_small;
+      @include button-color($color-light2, $color-button-dark);
+
+      &.current {
+        @include button-color($color-info, $color-button-light);
+      }
+  }
+}

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:10*$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 {
@@ -161,9 +226,23 @@ body {
 
 footer {
     color: $color-footer-text;
-    margin-top:1.5em;
+    margin-top:1.5rem;
     @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/_typography.scss

@@ -55,6 +55,7 @@ p {
 
 ul, ol {
   @include paragraph();
+  list-style: disc;
   ul, ol {
     padding-bottom:0;
     margin:0;
@@ -72,6 +73,12 @@ ul, ol {
 /* 2.2 - Text Wrapper */
 
 .container-typographic {
+  p {
+    padding:0;
+    margin:0;
+    text-indent: 3rem;
+  }
+
   p, em, p em {
     font-weight:$fontweight_base;
   }
@@ -234,6 +241,7 @@ code {
 .container-typographic {
   max-width: 800px;
   margin:auto;
+  margin-bottom: 3rem;
 }
 
 

src/scss/components/_buttons.scss

@@ -11,6 +11,11 @@ $button_large: $lineheight;
 $button_small: $lineheight_quarter;
 
 @mixin button($size) {
+  @include button-nobiseau($size);
+  @include biseau($size);
+}
+
+@mixin button-nobiseau($size) {
     padding: $size;
     padding-top: $size/3;
     padding-bottom: $size/3;
@@ -31,8 +36,6 @@ $button_small: $lineheight_quarter;
         background-color:transparent;
     }
 
-    @include biseau($size);
-
     &:focus {
         outline: none;
 	    box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0);
@@ -53,7 +56,10 @@ $button_small: $lineheight_quarter;
 
 @mixin button-fullcontrol($background-color, $hover-color, $text-color) {
     @include colorize-button($background-color, $text-color);
-    &, &:not(.disabled):not(:disabled) {
+    &:visited {
+      @include colorize-button($background-color, $text-color);
+    }
+    &, &:visited, &:not(.disabled):not(:disabled) {
         &:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
         @include colorize-button($hover-color, lighten($text-color, 5%));
         }
@@ -91,7 +97,7 @@ $button_small: $lineheight_quarter;
 // NAVBAR SPECIAL BUTTONS
 
 .navbar .btn-link {
-    @include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-light)
+    @include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-light);
 }
 
 .btn-readmore {

src/scss/components/_cards.scss

@@ -66,6 +66,9 @@ $card-smallpad: $lineheight_half;
 
     &-header {
         @include card-header($card-bigpad);
+        .fa {
+          margin-right: 0.5em;
+        }
     }
 
     /* Menu handling */
@@ -73,7 +76,19 @@ $card-smallpad: $lineheight_half;
     &-menu  {
         display:flex;
         flex-direction: column;
-        .menu-element, .menu-element-link {
+
+        ul {
+          margin:0;
+          padding:0;
+        }
+
+        li {
+          list-style: none;
+          padding:0;
+          margin:0;
+        }
+
+        .menu-element, .menu-element-link, li a {
             display:flex;
             line-height:$lineheight;
             padding-right:$lineheight_half;
@@ -89,6 +104,11 @@ $card-smallpad: $lineheight_half;
             overflow:hidden;
 
             @include biseau($lineheight_half);
+
+            strong {
+              font-weight: 900;
+              color:$color-dark!important;
+            }
         }
 
         a {

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 {
@@ -187,11 +195,11 @@ $preview-height: 8*$lineheight;
 }
 
 .mwarea {
-  height:5*$lineheight;
+  padding-bottom: $lineheight;
 }
 
 .mwaimg {
-  width:auto;
+  width:100%;
   height:auto;
   display:block;
   margin:auto;

src/static/includes/_footer.html

@@ -8,17 +8,17 @@
     <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>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>
     </div>
 
-    <div class="column">
+    <div>
       <p>Connection à <a href="admin/connection.html">l'interface administrateur</a></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>
+        <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.html" class="btn btn-navbar">Blog</a>
-            <section class="navbar-section">
+      <a href="/crea.html" class="btn btn-navbar">Gallerie</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="/crea.html" class="btn btn-link">Gallerie</a>
-                <a href="/apropos.html" class="btn btn-link">A propos</a>
-            </section>
-          </nav>
     </div>
   </div>
 </header>

src/static/includes/_links.html

@@ -4,7 +4,7 @@
 <!-- framework utilisés -->
 <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
-<link href="dep/spectre/css/spectre.min.css" rel="stylesheet">
+<link href="/dep/spectre/css/spectre.min.css" rel="stylesheet">
-<link href="dep/fork-awesome/css/fork-awesome.css" rel="stylesheet">
+<link href="/dep/fork-awesome/css/fork-awesome.css" rel="stylesheet">
 
-<link href="style.css" rel="stylesheet">
+<link href="/style.css" rel="stylesheet">