From 0b3ae8b2b0a071cf35e4b3ee45b277f8d4dbd2c2 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@chlore.net>
Date: Sat, 7 Dec 2019 16:06:38 +0100
Subject: [PATCH] chore: make lineheight controlled by the definitions

---
 dist/style.css                     | 62 ++++++++++++++++++++++--------
 src/scss/_definitions.scss         |  7 ++++
 src/scss/_global.scss              | 12 +++---
 src/scss/_typography.scss          | 26 ++++++-------
 src/scss/components/_buttons.scss  | 26 ++++++-------
 src/scss/components/_cards.scss    | 62 +++++++++++++++---------------
 src/scss/components/_previews.scss | 20 +++++-----
 7 files changed, 124 insertions(+), 91 deletions(-)

diff --git a/dist/style.css b/dist/style.css
index d762b7d..f05f060 100644
--- a/dist/style.css
+++ b/dist/style.css
@@ -1,8 +1,26 @@
 @charset "UTF-8";
+/* -------------------------------------------------
+    KAZHNUZ SPACE SCSS
+
+    Auteur : Kazhnuz
+    Licence : Creative Common BY-SA
+
+    Version 0.1
+
+    Thème CSS basé sur Spectre et ForkAwesome
+    créé pour mon blog creatif kazhnuz.space
+
+    CC BY-SA Kazhnuz
+------------------------------------------------- */
+/* --- 00. PALETTE --- */
 /*
- * 0. Palette and global colorization
+ * Les définitions globales des couleurs du theme.
  *
-*/
+ * Elle permettent de définir rapidement à la fois les couleurs
+ * de base qui seront utilisée pour tout le theme, mais
+ * également celles spécifiques pour certains sujets (liens, texte)
+ *
+ */
 a, a:hover, a:active {
   color: #2aa198; }
 
@@ -155,9 +173,17 @@ blockquote, pre {
 .text-success {
   color: #859900; }
 
+/* --- 01. DEFINITIONS --- */
+/*
+ * Les définitions globales de la stylesheet.
+ * Elle permette de rapidement modifier le style globale de la fiche en modifiant les éléments centraux
+ * D'autres définitions importantes sont visibles dans les autres parties de la fiche.
+ *
+ * Pour customiser les couleurs, voyez _palette.scss
+ */
 /*
  *  2 - Typography ( _typography.scss )
- *  
+ *
  *  This part of the (s)css handle everything related to the typography
  *  like paragraphs, blockquote, etc.
  *
@@ -632,12 +658,11 @@ th {
 .table-success th {
   color: #859900; }
 
+/* --- 03. GLOBAL STYLING --- */
 /*
- * 1. Cards and containers
- * All elements that are supposed to contain other stuff
+ * Les styles "globaux" touchant toute la page.
  *
- *
-*/
+ */
 .no-pills {
   list-style: none; }
 
@@ -795,6 +820,11 @@ ul.social {
         color: #fdf6e3;
         background-color: #073642; }
 
+/* --- 04. COMPOSANTS --- */
+/*
+ * Les différents composants réutilisables de la page.
+ *
+ */
 /*
  * 2. Cards and containers
  * All elements that are supposed to contain other stuff
@@ -854,9 +884,9 @@ ul.social {
       display: flex;
       line-height: 1.5rem;
       padding-right: 0.75rem;
-      padding-left: 0.325rem;
-      padding-top: 0.325rem;
-      padding-bottom: 0.325rem;
+      padding-left: 0.375rem;
+      padding-top: 0.375rem;
+      padding-bottom: 0.375rem;
       margin: 0;
       justify-content: space-between;
       word-wrap: none;
@@ -900,10 +930,10 @@ ul.social {
           background-color: #e3d9ba; }
     .card-menu .menu-divider, .menu-menu .menu-divider {
       position: relative;
-      left: -0.325rem;
+      left: -0.375rem;
       font-weight: 800;
-      padding-top: 0.325rem;
-      padding-bottom: 0.325rem; }
+      padding-top: 0.375rem;
+      padding-bottom: 0.375rem; }
 
 /* CARD LIST - Make a list part of a card */
 ul.card-list {
@@ -912,9 +942,9 @@ ul.card-list {
   ul.card-list li.list-element {
     line-height: 1.5rem;
     padding-right: 0.75rem;
-    padding-left: 0.325rem;
-    padding-top: 0.325rem;
-    padding-bottom: 0.325rem;
+    padding-left: 0.375rem;
+    padding-top: 0.375rem;
+    padding-bottom: 0.375rem;
     margin: 0; }
 
 .list-check li.list-element {
diff --git a/src/scss/_definitions.scss b/src/scss/_definitions.scss
index 11a378a..bff23ab 100644
--- a/src/scss/_definitions.scss
+++ b/src/scss/_definitions.scss
@@ -16,6 +16,13 @@ $inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0);
 $inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0);
 $inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0);
 
+$baseline: 1.5;
+$fontsize: 4.75mm;
+
+$lineheight: $baseline * 1rem;
+$lineheight_half: $lineheight/2;
+$lineheight_quarter: $lineheight/4;
+
 $border-radius: 0px;
 $border-size: 0px;
 
diff --git a/src/scss/_global.scss b/src/scss/_global.scss
index 12807b5..590e056 100644
--- a/src/scss/_global.scss
+++ b/src/scss/_global.scss
@@ -12,8 +12,8 @@
 }
 
 @mixin container-big() {
-    padding-left: 3*1.5rem;
-    padding-right: 3*1.5rem;
+    padding-left: 3*$lineheight;
+    padding-right: 3*$lineheight;
 }
 
 .no-pills {
@@ -30,7 +30,7 @@
 
 #page-header {
     background: $color-turquoise url('img/background.png') center bottom repeat-x;
-    height:10*1.5rem;
+    height:10*$lineheight;
     border-top: 6px solid $color-dark2;
     @include container-big();
 }
@@ -76,7 +76,7 @@ header h1 {
     display: grid;
     grid-template-columns: auto 360px;
     grid-template-rows: auto;
-    row-gap: 1.5rem;
+    row-gap: $lineheight;
     column-gap: 3rem;
 
     grid-template-areas: "main sidebar";
@@ -95,7 +95,7 @@ section.sidebar {
     display: grid;
     grid-template-columns: 360px auto;
     grid-template-rows: auto;
-    row-gap: 1.5rem;
+    row-gap: $lineheight;
     column-gap: 3rem;
 
     grid-template-areas: "sidebar main";
@@ -104,7 +104,7 @@ section.sidebar {
 .container-onecolumn {
     max-width:1280px;
     margin: auto;
-    padding-bottom: 1.5rem;
+    padding-bottom: $lineheight;
 }
 
 .container-personnage {
diff --git a/src/scss/_typography.scss b/src/scss/_typography.scss
index 378d0cf..bd9fb22 100644
--- a/src/scss/_typography.scss
+++ b/src/scss/_typography.scss
@@ -10,21 +10,17 @@
 
 /* 2.2 - Global Typography */
 
-$baseline: 1.5;
-$base_lineheight: $baseline * 1rem;
-$base_fontsize: 4.75mm;
-
 @mixin paragraph() {
   padding:0;
-  padding-bottom: $base_lineheight;
+  padding-bottom: $lineheight;
   margin: 0;
 }
 
 body {
 	font-family: $basefont;
 	text-align: left;
-  font-size:  $base_fontsize;
-	line-height: $base_lineheight;
+  font-size:  $fontsize;
+	line-height: $lineheight;
 	color: $color-font;
   font-weight: $fontweight_base;
 }
@@ -65,8 +61,8 @@ ul, ol {
   }
   li {
     margin:0;
-    margin-left: $base_lineheight;
-    line-height: $base_lineheight;
+    margin-left: $lineheight;
+    line-height: $lineheight;
   }
 }
 
@@ -107,12 +103,12 @@ ul, ol {
   }
 
   .bypass-flex-fontsize {
-    line-height: $base_lineheight;
+    line-height: $lineheight;
   }
 }
 
 article.maintext {
-  padding-bottom: 1.5rem;
+  padding-bottom: $lineheight;
 }
 
 /* 2.3 - Titles */
@@ -121,9 +117,9 @@ article.maintext {
   $lineNumber: ceil($size / 1.5);
   font-family: $font;
   font-size: $size * 1rem;
-  line-height: $lineNumber  * 1.5rem;
+  line-height: $lineNumber  * $lineheight;
   padding: 0;
-  padding-bottom: 1.5rem;
+  padding-bottom: $lineheight;
   font-weight: $weight;
 }
 
@@ -208,8 +204,8 @@ hr {
   border-style: none;
   border-radius: 0px;
 
-  margin:  0 0 1.5rem 0;
-  padding: 1.5rem 1rem 1.5rem 1rem;
+  margin:  0 0 $lineheight 0;
+  padding: $lineheight 1rem $lineheight 1rem;
 
   max-width: 100%;
   background-color: $color-light2;
diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss
index 1161201..93edd0a 100644
--- a/src/scss/components/_buttons.scss
+++ b/src/scss/components/_buttons.scss
@@ -7,8 +7,8 @@
 $color-button-light: $color-light;
 $color-button-dark: $color-dark;
 
-$button_large: 1.5rem;
-$button_small: 0.375rem;
+$button_large: $lineheight;
+$button_small: $lineheight_quarter;
 
 @mixin button($size) {
     padding: $size;
@@ -16,9 +16,9 @@ $button_small: 0.375rem;
     padding-bottom: $size/3;
     margin:$size/2;
     margin-top: $size/3;
-    margin-bottom: 1.5rem;
+    margin-bottom: $lineheight;
     //font-size: 4.75mm;
-    line-height:1.5rem;
+    line-height:$lineheight;
     height:auto;
     @include borders();
     @include border-radius();
@@ -136,7 +136,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
         @include button($button-large);
         @include button-fullcontrol($color-light2, darken($color-light2, 5%), $color-dark2);
         margin:0 $button-large/2.5 0 $button-large/2.5;
-    
+
         &:before {
             content: " "!important;
             border-right:1px solid rgba(0,0,0,0.2);
@@ -147,10 +147,10 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
         }
     }
 
-   
+
 }
 
-// COLORIZE BUTTONS 
+// COLORIZE BUTTONS
 
 .btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label {
     &-blue { @include button-color($color-blue, $color-button-light); }
@@ -166,7 +166,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
     &-yellow { @include button-color($color-yellow, $color-button-light); }
     &-brown { @include button-color($color-brown, $color-button-light); }
     &-grey { @include button-color($color-grey, $color-button-light); }
-    
+
     &-primary { @include button-color($color-primary, $color-button-light); }
     &-secondary { @include button-color($color-secondary, $color-button-light); }
     &-warning { @include button-color($color-warning, $color-button-light); }
@@ -175,20 +175,20 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
     &-success { @include button-color($color-success, $color-button-light);}
     &-link {@include button-color(transparent, $color-dark);}
   }
-  
+
 /* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
 
 .share-buttons {
-    margin-top:1.5rem;
+    margin-top: $lineheight;
   }
-  
+
   .reagir {
     text-align:right;
-  }  
+  }
   .btn, a.btn {
     &-facebook {@include button-color(#3B5998, $color-button-light);}
     &-twitter {@include button-color(#55ACEE, $color-button-light);}
     &-googleplus {@include button-color(#d34836, $color-button-light);}
     &-diaspora {@include button-color(#313739, $color-button-light);}
     &-mastodon {@include button-color(#282c37, $color-button-light);}
-  }
\ No newline at end of file
+  }
diff --git a/src/scss/components/_cards.scss b/src/scss/components/_cards.scss
index 13556f3..3490e3f 100644
--- a/src/scss/components/_cards.scss
+++ b/src/scss/components/_cards.scss
@@ -5,8 +5,8 @@
  *
 */
 
-$card-bigpad: 1.5rem;
-$card-smallpad: 0.75rem;
+$card-bigpad: $lineheight;
+$card-smallpad: $lineheight_half;
 
 @mixin card($size) {
     @include border-radius();
@@ -14,7 +14,7 @@ $card-smallpad: 0.75rem;
 	box-shadow: $large-shadow;
     border: none;
     margin:0;
-    margin-bottom:1.5rem;
+    margin-bottom:$lineheight;
     padding: $size;
 }
 
@@ -26,8 +26,8 @@ $card-smallpad: 0.75rem;
     padding-left:0;
     padding-right:0;
     padding-bottom: $size/2!important;
-    margin-bottom:0.75rem;
-    line-height:1.5rem;
+    margin-bottom:$lineheight_half;
+    line-height:$lineheight;
 
     position:relative;
     left: -$size*1.25;
@@ -35,7 +35,7 @@ $card-smallpad: 0.75rem;
     width:95%;
 
     @include biseau($size);
-            
+
     h1, h2, h3, h4, h5, h6, h7, h8, h9, h10  {
         font-family:$basefont;
         font-size:1rem;
@@ -43,12 +43,12 @@ $card-smallpad: 0.75rem;
         margin:0px;
         color:$color-light;
         font-weight: $fontweight_big;
-        line-height:1.5rem;
+        line-height:$lineheight;
     }
 }
 
 @mixin card-color($background-color, $text-color) {
-    & .card-header, & .menu-header { 
+    & .card-header, & .menu-header {
         @include background-color($background-color, $text-color);
         &:before {
             @include background-color($background-color, $text-color);
@@ -75,11 +75,11 @@ $card-smallpad: 0.75rem;
         flex-direction: column;
         .menu-element {
             display:flex;
-            line-height:1.5rem;
-            padding-right:0.75rem;
-            padding-left:0.325rem;
-            padding-top:0.325rem;
-            padding-bottom:0.325rem;
+            line-height:$lineheight;
+            padding-right:$lineheight_half;
+            padding-left:$lineheight_quarter;
+            padding-top:$lineheight_quarter;
+            padding-bottom:$lineheight_quarter;
             margin:0;
             justify-content: space-between;
 
@@ -87,8 +87,8 @@ $card-smallpad: 0.75rem;
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow:hidden;
-            
-            @include biseau(0.75rem);
+
+            @include biseau($lineheight_half);
         }
 
         a {
@@ -98,23 +98,23 @@ $card-smallpad: 0.75rem;
             &:hover {
                 text-decoration:none;
                 color: $color-violet;
-            
-                @include biseau(0.75rem);
+
+                @include biseau($lineheight_half);
 
                 &:before {
                     background-color: darken($color-light2, 7.5%)
                 }
             }
 
-            
+
         }
 
         .menu-divider {
             position: relative;
-            left: -0.325rem;
+            left: -$lineheight_quarter;
             font-weight: $fontweight_hyper;
-            padding-top:0.325rem;
-            padding-bottom:0.325rem; 
+            padding-top:$lineheight_quarter;
+            padding-bottom:$lineheight_quarter;
         }
     }
 }
@@ -128,7 +128,7 @@ $card-smallpad: 0.75rem;
         &::before {
             font-family: "ForkAwesome";
             content:$symbol;
-            padding-right:0.75rem;
+            padding-right:$lineheight_half;
         }
     }
 }
@@ -145,11 +145,11 @@ ul.card-list {
     padding:0;
     margin:0;
     li.list-element {
-        line-height:1.5rem;
-        padding-right:0.75rem;
-        padding-left:0.325rem;
-        padding-top:0.325rem;
-        padding-bottom:0.325rem;
+        line-height:$lineheight;
+        padding-right:$lineheight_half;
+        padding-left:$lineheight_quarter;
+        padding-top:$lineheight_quarter;
+        padding-bottom:$lineheight_quarter;
         margin:0;
     }
 }
@@ -185,7 +185,7 @@ ul.card-list {
     &-yellow { @include card-color($color-yellow, $color-light); }
     &-brown { @include card-color($color-brown, $color-light); }
     &-grey { @include card-color($color-grey, $color-light); }
-    
+
     &-primary { @include card-color($color-primary, $color-light); }
     &-secondary { @include card-color($color-secondary, $color-light); }
     &-warning { @include card-color($color-warning, $color-light); }
@@ -207,12 +207,12 @@ ul.card-list {
     &-turquoise { @include background-color($color-turquoise, $color-light); }
     &-yellow { @include background-color($color-yellow, $color-light); }
     &-brown { @include background-color($color-brown, $color-light); }
-    &-grey { @include background-color($color-grey, $color-light); }  
-    
+    &-grey { @include background-color($color-grey, $color-light); }
+
     &-primary { @include background-color($color-primary, $color-light); }
     &-secondary { @include background-color($color-secondary, $color-light); }
     &-warning { @include background-color($color-warning, $color-light); }
     &-danger { @include background-color($color-danger, $color-light); }
     &-info { @include background-color($color-info, $color-light); }
     &-success { @include background-color($color-success, $color-light); }
-  }
\ No newline at end of file
+  }
diff --git a/src/scss/components/_previews.scss b/src/scss/components/_previews.scss
index 643fecb..68ca938 100644
--- a/src/scss/components/_previews.scss
+++ b/src/scss/components/_previews.scss
@@ -3,14 +3,14 @@
  * Special style for previews cards
  *
 */
-$preview-height: 8*1.5rem;
+$preview-height: 8*$lineheight;
 
 .previews-section {
   display: grid;
   grid-template-columns: auto auto auto;
   grid-template-rows: auto;
-  grid-gap: 1.5rem;
-  padding-bottom: 1.5rem;
+  grid-gap: $lineheight;
+  padding-bottom: $lineheight;
 }
 
 .preview-container {
@@ -49,7 +49,7 @@ $preview-height: 8*1.5rem;
 .preview-item {
   height: $preview-height;
   font-size:0.9rem;
-	line-height: 1.5rem !important;
+	line-height: $lineheight !important;
   padding:0.2em;
   text-align:justify;
   background-color:rgba(0,0,0,0.00);
@@ -67,14 +67,14 @@ $preview-height: 8*1.5rem;
     top: 0;
     left: 0;
     position: absolute;
-    padding: 0.75rem;
+    padding: $lineheight_half;
     backdrop-filter: none;
     transition: background 0.3s;
 
     h1, h2, h3, h4, h5, h6 {
       color: $color-light;
       font-size: 1rem;
-      line-height: 1.5rem;
+      line-height: $lineheight;
       font-weight:$fontweight_big;
     }
 
@@ -82,7 +82,7 @@ $preview-height: 8*1.5rem;
       font-family: $basefont;
       font-size: 1rem;
       background-color: $color-primary;
-      @include card-header(0.75rem);
+      @include card-header($lineheight_half);
       font-weight: $fontweight_big;
     }
   }
@@ -159,7 +159,7 @@ $preview-height: 8*1.5rem;
     border-radius:100%;
     padding:0;
     margin:0;
-    margin-right:1.5rem;
+    margin-right:$lineheight;
   }
 
   .author-metadata {
@@ -175,7 +175,7 @@ $preview-height: 8*1.5rem;
   }
 
   &:not(:last-child) {
-    margin-bottom:1.5rem;
+    margin-bottom:$lineheight;
   }
 }
 
@@ -187,7 +187,7 @@ $preview-height: 8*1.5rem;
 }
 
 .mwarea {
-  height:5*1.5rem;
+  height:5*$lineheight;
 }
 
 .mwaimg {