feat: add the chip/badge class

src/scss/_drawing.scss

@@ -11,24 +11,9 @@
 
 @import 'components/previews';
 
-.article-meta, .article-nav {
+.flex-that {
   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 {
@@ -47,47 +32,32 @@ a.article-nav-link-wrap {
     p &:last-child {
         margin-bottom:0;
     }
-    @include button-color($color-info, $color-button-light);
+    @include button-color($color-info);
-}
-
-.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_large);
-    padding-left: $button_small;
-    padding-right: $button_small;
-    @include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-light);
 }
 
 .pigimg, .mb {
   padding-bottom:1.5rem;
 }
 
-#page-nav {
+.screen-reader-text {
+  visibility: collapse;
+  font-size:0;
+}
+
+nav.pagination {
   padding-bottom:1.5rem;
-  .page-number, .next, .prev {
+  .nav-links {
+    text-align: center;
+    width:100%;
+  }
+  .page-numbers, .next, .prev {
       @include button($button_small);
       padding-left: $button_small;
       padding-right: $button_small;
-      @include button-color($color-light2, $color-button-dark);
+      @include button-color($color-font-light);
 
       &.current {
-        @include button-color($color-info, $color-button-light);
+        @include button-color($color-info);
       }
   }
 }
@@ -95,3 +65,15 @@ a.article-nav-link-wrap {
 .card-select {
   width:100%;
 }
+
+.input-group {
+  padding-bottom:1.5rem;
+
+  input, textarea {
+    width:100%;
+    background-color:$color-background;
+    border-radius:0px;
+    border: 1px solid rgba(0,0,0,0.2);
+    padding:0.375rem;
+  }
+}

src/scss/_global.scss

@@ -31,8 +31,8 @@
   /* ------------------ HEADERS ------------------- */
 
 #page-header {
-    background: $color-turquoise url('img/background.png') center bottom repeat-x;
+    background: get-color("skyblue") url('img/background.png') center bottom repeat-x;
-    border-top: 6px solid $color-dark2;
+    border-top: 6px solid get-color("dark2");
     padding-bottom:3rem;
 
     .header-collumns {
@@ -75,7 +75,7 @@
 
 header h1 {
     border-style:none !important;
-    color: $color-light;
+    color: $color-font-light;
     font-weight: $fontweight_hyper;
     font-size:5.4em;
     font-style:oblique;
@@ -93,9 +93,9 @@ header h1 {
     border-left: 0;
     border-right: 0;
     padding: 0.75rem;
-    color: $color-light;
+    color: $color-font-light;
     a {
-        color: $color-light;
+        color: $color-font-light;
     }
     @include li-no-margin();
 }
@@ -197,13 +197,13 @@ header h1 {
 /* ------------------ PAGE ------------------- */
 
 #wrapper {
-    background-color: $color-light;
+    background-color: $color-background;
 }
 
   /* ------------------ FOOTER ------------------- */
 
-$color-footer-back: $color-dark2;
+$color-footer-back: get-color("dark2");
-$color-footer-text: $color-light;
+$color-footer-text: $color-font-light;
 
 body {
     // On colorise le background de la page complete de la même
@@ -230,6 +230,12 @@ footer {
         grid-template-columns: 1fr 1fr 1fr;
       }
 
+      a, a:visited {
+        &:hover, &:active, &:visited {
+          color: $color-font-light;
+        }
+      }
+
     }
 }
 
@@ -244,7 +250,7 @@ ul.social {
         margin:0;
         list-style: none;
         display: inline;
-        a {
+        a, a:visited {
             color: $color-footer-back;
             background-color: $color-footer-text;
             padding:0.3em;

src/scss/_palette.scss

@@ -9,62 +9,118 @@
  *
  */
 
+$whiteness_value: 0.8;
+
 // Couleurs de base du theme :
 
-$color-blue: #268bd2;
+$palette: (
-$color-violet: #d33682;
+  "blue":#268bd2,
-$color-purple: #6c71c4;
+  "violet":#d33682,
-$color-red: #dc322f;
+  "red":#dc322f,
-$color-orange: #cb4b16;
+  "orange":#cb4b16,
-$color-green: #859900;
+  "green":#859900,
-$color-skyblue: #2aa198;
+  "skyblue":#2aa198,
-$color-dark: #002b36;
+  "dark": #002b36,
-$color-light: #fdf6e3;
+  "light":#fdf6e3,
-$color-turquoise: #2aa198;
+  "yellow":#b58900,
-$color-yellow: #b58900;
+  "grey":#586e75,
-$color-brown: #b58900;
+  "dark2":#073642,
-$color-grey: #586e75;
+  "light2":#eee8d5,
+  "gray2":#657b83,
+  "gray3":#839496,
+  "gray4":#93a1a1);
 
-$color-dark2: #073642;
+$semantics: (
-$color-light2: #eee8d5;
+  "font":"dark2",
+  "font-light":"light",
+  "background":"light",
+  "background-alt":"light2",
+  "link":"skyblue",
+  "selection":"skyblue",
+  "mark":"yellow",
+  "primary":"violet",
+  "secondary":"skyblue",
+  "warning":"orange",
+  "danger":"red",
+  "info":"skyblue",
+  "success":"green",
+  "muted":"grey");
 
-$color-gray2:    #657b83;
+// FUNCTIONS TO GET MORE EASILY COLORS
-$color-gray3:     #839496;
+@function get-color($name) {
-$color-gray4:     #93a1a1;
+    @if map-has-key($semantics, $name) {
-
+        @return map-get($palette, map-get($semantics, $name));
-$color-primary: $color-violet;
+    } @else {
-$color-secondary: $color-skyblue;
+        @return map-get($palette, $name);
-
+    }
-$color-link: $color-skyblue;
-$color-selection: $color-skyblue;
-$color-mark: $color-yellow;
-
-$color-font: $color-dark2;
-$color-warning: $color-orange;
-$color-danger: $color-red;
-$color-info: $color-skyblue;
-$color-success: $color-green;
-
-@mixin background-color($background-color, $text-color) {
-    background-color: $background-color!important;
-    color: $text-color;
 }
 
+@function list-colors() {
+    $newmap: map-merge($palette, $semantics);
+    @return $newmap;
+}
+
+@function luminance($color) {
+    $c_red: red($color);
+    $c_grn: green($color);
+    $c_blu: blue($color);
+
+    $luminance: $c_red*0.299 + $c_grn*0.587 + $c_blu*0.114;
+
+    @return $luminance
+}
+
+@function getTextColorFromBackground($background-color) {
+    @if (luminance($background-color) < 255 * $whiteness_value) {
+        @return $color-font-light;
+    } @else {
+        @return $color-font;
+    }
+}
+
+// Couleurs du theme
+
+$color-link: get-color("link");
+$color-selection: get-color("selection");
+$color-mark: get-color("mark");
+$color-font: get-color("font");
+$color-font-light: get-color("font-light");
+
+$color-primary: get-color("primary");
+$color-secondary: get-color("secondary");
+$color-warning: get-color("warning");
+$color-danger: get-color("danger");
+$color-info: get-color("info");
+$color-success: get-color("success");
+
+$color-muted: get-color("muted");
+
+$color-background: get-color("background");
+$color-background-alt: get-color("background-alt");
+
+// fonction texte et background
+
 @mixin text-color($text-color) {
  color: $text-color;
 }
 
+@mixin background-color($background-color) {
+ background-color: $background-color;
+ color: getTextColorFromBackground($background-color);
+}
+
 // Colorize important elements
+// Direct uses of colors
 
 a, a:hover, a:active {
   color: $color-link;
 }
 
 ::selection {
-    @include background-color($color-selection, $color-light);
+  @include background-color($color-selection);
 }
 ::-moz-selection {
-    @include background-color($color-selection, $color-light);
+  @include background-color($color-selection);
 }
 
 mark {
@@ -75,54 +131,14 @@ blockquote, pre {
   border-color: $color-primary;
 }
 
-// Add generic colorizations classes
-
-/* BACKGROUNDS */
-
 .bg {
-    &-blue { @include background-color($color-blue, $color-light); }
+    @each $name, $color in list-colors() {
-    &-violet { @include background-color($color-violet, $color-light); }
+        &-#{$name} { @include background-color(get-color($name)); }
-    &-purple { @include background-color($color-purple, $color-light); }
+    }
-    &-red { @include background-color($color-red, $color-light); }
-    &-orange { @include background-color($color-orange, $color-light); }
-    &-green { @include background-color($color-green, $color-light); }
-    &-skyblue { @include background-color($color-skyblue, $color-light); }
-    &-dark { @include background-color($color-dark, $color-light); }
-    &-light { @include background-color($color-light, $color-dark); }
-    &-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); }
-
-    &-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); }
 }
 
-  /* TEXT */
-
 .text {
-    &-blue { @include text-color($color-blue); }
+    @each $name, $color in list-colors() {
-    &-violet { @include text-color($color-violet); }
+        &-#{$name} { @include text-color(get-color($name)); }
-    &-purple { @include text-color($color-purple); }
+    }
-    &-red { @include text-color($color-red); }
-    &-orange { @include text-color($color-orange); }
-    &-green { @include text-color($color-green); }
-    &-skyblue { @include text-color($color-skyblue); }
-    &-dark { @include text-color($color-dark); }
-    &-light { @include text-color($color-light); }
-    &-turquoise { @include text-color($color-turquoise); }
-    &-yellow { @include text-color($color-yellow); }
-    &-brown { @include text-color($color-brown); }
-    &-grey { @include text-color($color-grey); }
-
-    &-primary { @include text-color($color-primary); }
-    &-secondary { @include text-color($color-secondary); }
-    &-warning { @include text-color($color-warning); }
-    &-danger { @include text-color($color-danger); }
-    &-info { @include text-color($color-info); }
-    &-success { @include text-color($color-success); }
 }

src/scss/_typography.scss

@@ -26,7 +26,7 @@ body {
 }
 
 .night-mode {
-  color: $color-light2;
+  color: $color-font-light;
 }
 
 strong {
@@ -38,11 +38,18 @@ em {
   font-weight: $fontweight_base;
 }
 
-a {
+
-  color: $color-link;
+a, a:visited {
+  @include background-color($color-link);
   text-decoration:none;
-  &:hover, &:active {
+  padding:0.05rem;
+  padding-left:0.25rem;
+  padding-right:0.25rem;
+  border-radius:0.1rem;
+  &:hover, &:active, &:focus {
     color: $color-link;
+    background-color: transparent;
+    text-decoration:none;
   }
 }
 
@@ -67,11 +74,14 @@ ul, ol {
   }
 }
 
-::selection { background: $color-selection; color: $color-light; }
-::-moz-selection { background: $color-selection; color: $color-light; }
-
 /* 2.2 - Text Wrapper */
 
+.container-article, .container-typographic {
+  max-width: 800px;
+  margin:auto;
+  margin-bottom: 3rem;
+}
+
 .container-typographic {
   p {
     padding:0;
@@ -215,9 +225,8 @@ hr {
   padding: $lineheight 1rem $lineheight 1rem;
 
   max-width: 100%;
-  background-color: $color-light2;
   font-style: italic;
-  color: $color-dark2;
+  @include background-color($color-background-alt)
 }
 
 blockquote, .quote {
@@ -235,17 +244,14 @@ blockquote, .quote {
 
 code {
   background:transparent;
-  color: $color-red;
+  color: $color-danger;
 }
 
-.container-typographic {
+.small-text {
-  max-width: 800px;
+  font-size: 0.9em;
-  margin:auto;
-  margin-bottom: 3rem;
 }
 
 
-
 /* 2.6 - Special styling */
 
 mark {
@@ -267,35 +273,6 @@ mark {
 	display: block;
 }
 
-/* 2.6.1 - Colored texts */
-
-@mixin text-color($text-color) {
-  color: $text-color;
-}
-
-.text {
-  &-blue { @include text-color($color-blue); }
-  &-violet { @include text-color($color-violet); }
-  &-purple { @include text-color($color-purple); }
-  &-red { @include text-color($color-red); }
-  &-orange { @include text-color($color-orange); }
-  &-green { @include text-color($color-green); }
-  &-skyblue { @include text-color($color-skyblue); }
-  &-dark { @include text-color($color-dark); }
-  &-light { @include text-color($color-light); }
-  &-turquoise { @include text-color($color-turquoise); }
-  &-yellow { @include text-color($color-yellow); }
-  &-brown { @include text-color($color-brown); }
-  &-grey { @include text-color($color-grey); }
-
-  &-primary { @include text-color($color-primary); }
-  &-secondary { @include text-color($color-secondary); }
-  &-warning { @include text-color($color-warning); }
-  &-danger { @include text-color($color-danger); }
-  &-info { @include text-color($color-info); }
-  &-success { @include text-color($color-success); }
-}
-
 /* Table elements */
 
 @mixin table-color($text-color) {
@@ -325,24 +302,7 @@ th  {
 }
 
 .table {
-  &-blue { @include table-color($color-blue); }
+    @each $name, $color in list-colors() {
-  &-violet { @include table-color($color-violet); }
+        &-#{$name} { @include table-color(get-color($name)); }
-  &-purple { @include table-color($color-purple); }
+    }
-  &-red { @include table-color($color-red); }
-  &-orange { @include table-color($color-orange); }
-  &-green { @include table-color($color-green); }
-  &-skyblue { @include table-color($color-skyblue); }
-  &-dark { @include table-color($color-dark); }
-  &-light { @include table-color($color-light); }
-  &-turquoise { @include table-color($color-turquoise); }
-  &-yellow { @include table-color($color-yellow); }
-  &-brown { @include table-color($color-brown); }
-  &-grey { @include table-color($color-grey); }
-
-  &-primary { @include table-color($color-primary); }
-  &-secondary { @include table-color($color-secondary); }
-  &-warning { @include table-color($color-warning); }
-  &-danger { @include table-color($color-danger); }
-  &-info { @include table-color($color-info); }
-  &-success { @include table-color($color-success); }
 }

src/scss/components/_buttons.scss

@@ -4,8 +4,8 @@
  *
 */
 
-$color-button-light: $color-light;
+$color-button-light: $color-background;
-$color-button-dark: $color-dark;
+$color-button-dark: get-color("dark");
 
 $button_large: $lineheight;
 $button_small: $lineheight_quarter;
@@ -46,28 +46,29 @@ $button_small: $lineheight_quarter;
     }
 }
 
-@mixin colorize-button($background-color, $text-color) {
+@mixin colorize-button($background-color) {
-    //@include background-color($background-color, $text-color);
-    color: $text-color;
     &:before {
         background-color: $background-color;
     }
 }
 
 @mixin button-fullcontrol($background-color, $hover-color, $text-color) {
-    @include colorize-button($background-color, $text-color);
+    @include colorize-button($background-color);
+    color:$text-color;
     &:visited {
-      @include colorize-button($background-color, $text-color);
+      @include colorize-button($background-color);
+      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%));
+          @include colorize-button($hover-color);
+          color:lighten($text-color, 5%);
         }
     }
 }
 
-@mixin button-color($background-color, $text-color) {
+@mixin button-color($background-color) {
-    @include button-fullcontrol($background-color, darken($background-color, 7.5%), $text-color)
+    @include button-fullcontrol($background-color, darken($background-color, 7.5%), getTextColorFromBackground($background-color));
 }
 
 .btn {
@@ -81,8 +82,15 @@ $button_small: $lineheight_quarter;
     }
 }
 
-.label, label.label, a.label, .chip, a.chip {
+.btn-small {
-    @include biseau($button_small);
+  @include button($button_small);
+  padding-left: $button_small;
+  padding-right: $button_small;
+  text-decoration:none;
+}
+
+.chip, .badge {
+  @include button(0rem);
   padding-left: $button_small;
   padding-right: $button_small;
   text-decoration:none;
@@ -96,12 +104,14 @@ $button_small: $lineheight_quarter;
 
 // NAVBAR SPECIAL BUTTONS
 
-.navbar .btn-link {
+.btn-navbar {
-    @include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-light);
+    @include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-font-light);
+    padding-left: $button_small;
+    padding-right: $button_small;
 }
 
 .btn-readmore {
-    @include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-primary);
+    @include button-fullcontrol(transparent, rgba(0,0,0,0.05), $color-font-light);
 }
 
 // BUTTONS GROUPS
@@ -137,10 +147,10 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
         display:none;
     }
 
-    a, span {
+    a, & > span {
         display:inline-block;
         @include button($button-large);
-        @include button-fullcontrol($color-light2, darken($color-light2, 5%), $color-dark2);
+        @include button-fullcontrol($color-background-alt, darken($color-background-alt, 5%), get-color("dark2"));
         margin:0 $button-large/2.5 0 $button-large/2.5;
 
         &:before {
@@ -149,52 +159,38 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
         }
 
         &.active {
-            @include button-fullcontrol($color-primary, $color-primary, $color-light);
+            @include button-fullcontrol($color-primary, $color-primary, $color-font-light);
         }
     }
 
-
 }
 
 // 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); }
+    @each $name, $color in list-colors() {
-    &-violet { @include button-color($color-violet, $color-button-light); }
+        &-#{$name} { @include button-color(get-color($name)); }
-    &-purple { @include button-color($color-purple, $color-button-light); }
+    }
-    &-red { @include button-color($color-red, $color-button-light); }
+    &-link {
-    &-orange { @include button-color($color-orange, $color-button-light); }
+      @include button-color(transparent);
-    &-green { @include button-color($color-green, $color-button-light); }
+      color:$color-font!important;
-    &-skyblue { @include button-color($color-skyblue, $color-button-light); }
+    }
-    &-dark { @include button-color($color-dark, $color-button-light); }
-    &-light { @include button-color($color-light2, $color-button-dark); }
-    &-turquoise { @include button-color($color-turquoise, $color-button-light); }
-    &-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); }
-    &-danger { @include button-color($color-danger, $color-button-light); }
-    &-info { @include button-color($color-info, $color-button-light); }
-    &-success { @include button-color($color-success, $color-button-light);}
-    &-link {@include button-color(transparent, $color-dark);}
   }
 
 /* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
 
 .share-buttons {
     margin-top: $lineheight;
+    padding-bottom: $lineheight;
   }
 
   .reagir {
     text-align:right;
   }
   .btn, a.btn {
-    &-facebook {@include button-color(#3B5998, $color-button-light);}
+    &-facebook {@include button-color(#3B5998);}
-    &-twitter {@include button-color(#55ACEE, $color-button-light);}
+    &-twitter {@include button-color(#55ACEE);}
-    &-googleplus {@include button-color(#d34836, $color-button-light);}
+    &-googleplus {@include button-color(#d34836);}
-    &-diaspora {@include button-color(#313739, $color-button-light);}
+    &-diaspora {@include button-color(#313739);}
-    &-mastodon {@include button-color(#282c37, $color-button-light);}
+    &-mastodon {@include button-color(#282c37);}
   }

src/scss/components/_cards.scss

@@ -10,7 +10,7 @@ $card-smallpad: $lineheight_half;
 
 @mixin card($size) {
     @include border-radius();
-    background-color: $color-light2;
+    background-color: $color-background-alt;
 	box-shadow: $large-shadow;
     border: none;
     margin:0;
@@ -28,6 +28,7 @@ $card-smallpad: $lineheight_half;
     padding-bottom: $size/2!important;
     margin-bottom:$lineheight_half;
     line-height:$lineheight;
+    white-space: nowrap;
 
     position:relative;
     left: -$size*1.25;
@@ -41,17 +42,17 @@ $card-smallpad: $lineheight_half;
         font-size:1rem;
         padding:0px;
         margin:0px;
-        color:$color-light;
+        color:$color-font-light;
         font-weight: $fontweight_big;
         line-height:$lineheight;
     }
 }
 
-@mixin card-color($background-color, $text-color) {
+@mixin card-color($background-color) {
     & .card-header, & .menu-header {
-        @include background-color($background-color, $text-color);
+        @include background-color($background-color);
         &:before {
-            @include background-color($background-color, $text-color);
+            @include background-color($background-color);
         }
     }
 }
@@ -88,7 +89,7 @@ $card-smallpad: $lineheight_half;
           margin:0;
         }
 
-        .menu-element, .menu-element-link, li a {
+        .menu-element, .menu-element-link, li a, li a:visited {
             display:flex;
             line-height:$lineheight;
             padding-right:$lineheight_half;
@@ -107,7 +108,7 @@ $card-smallpad: $lineheight_half;
 
             strong {
               font-weight: 900;
-              color:$color-dark!important;
+              color:get-color("dark")!important;
             }
 
             &.noflex {
@@ -119,18 +120,18 @@ $card-smallpad: $lineheight_half;
             }
         }
 
-        a {
+        a, a:visited {
             text-decoration:none;
-            color: $color-violet;
+            color: $color-primary;
             background-color:transparent;
             &:hover {
                 text-decoration:none;
-                color: $color-violet;
+                color: $color-primary;
 
                 @include biseau($lineheight_half);
 
                 &:before {
-                    background-color: darken($color-light2, 7.5%)
+                    background-color: darken($color-background-alt, 7.5%)
                 }
             }
 
@@ -169,7 +170,7 @@ $card-smallpad: $lineheight_half;
     }
 }
 
-ul.card-list {
+ul.card-list, .card > ul {
     padding:0;
     margin:0;
     li.list-element {
@@ -200,47 +201,25 @@ ul.card-list {
 /* COLORIZE CARDS and TOASTS */
 
 .card, .smallcard, .menu {
-    &-blue { @include card-color($color-blue, $color-light); }
+    @each $name, $color in list-colors() {
-    &-violet { @include card-color($color-violet, $color-light); }
+        &-#{$name} { @include card-color(get-color($name)); }
-    &-purple { @include card-color($color-purple, $color-light); }
+    }
-    &-red { @include card-color($color-red, $color-light); }
-    &-orange { @include card-color($color-orange, $color-light); }
-    &-green { @include card-color($color-green, $color-light); }
-    &-skyblue { @include card-color($color-skyblue, $color-light); }
-    &-dark { @include card-color($color-dark, $color-light); }
-    &-light { @include card-color($color-light2, $color-dark); }
-    &-turquoise { @include card-color($color-turquoise, $color-light); }
-    &-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); }
-    &-danger { @include card-color($color-danger, $color-light); }
-    &-info { @include card-color($color-info, $color-light); }
-    &-success { @include card-color($color-success, $color-light); }
 }
 
 .toast {
-    &-blue { @include background-color($color-blue, $color-light); }
+    @each $name, $color in list-colors() {
-    &-violet { @include background-color($color-violet, $color-light); }
+        &-#{$name} { @include background-color(get-color($name)); }
-    &-purple { @include background-color($color-purple, $color-light); }
+    }
-    &-red { @include background-color($color-red, $color-light); }
+
-    &-orange { @include background-color($color-orange, $color-light); }
+    a, a:visited {
-    &-green { @include background-color($color-green, $color-light); }
+      color: $color-font-light;
-    &-skyblue { @include background-color($color-skyblue, $color-light); }
+      background-color:rgba(0,0,0,0.15);
-    &-dark { @include background-color($color-dark, $color-light); }
+      text-decoration:none;
-    &-light { @include background-color($color-light2, $color-dark); }
+      opacity:1;
-    &-turquoise { @include background-color($color-turquoise, $color-light); }
+      &:hover, &:active, &:visited {
-    &-yellow { @include background-color($color-yellow, $color-light); }
+        color: $color-font-light;
-    &-brown { @include background-color($color-brown, $color-light); }
+        background-color:transparent;
-    &-grey { @include background-color($color-grey, $color-light); }
+        opacity:1;
-
+      }
-    &-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); }
   }

src/scss/components/_previews.scss

@@ -50,8 +50,9 @@ $preview-height: 8*$lineheight;
   box-shadow: $large-shadow, $inset-shadow;
 }
 
-.preview-link:hover {
+.preview-link {
-  text-decoration:none!important;
+  padding:0;
+  background-color: transparent;
 }
 
 .preview-item {
@@ -79,7 +80,7 @@ $preview-height: 8*$lineheight;
     transition: background-color 0.3s;
 
     h1, h2, h3, h4, h5, h6 {
-      color: $color-light;
+      color: $color-font-light;
       font-size: 1rem;
       line-height: $lineheight;
       font-weight:$fontweight_big;
@@ -144,7 +145,7 @@ $preview-height: 8*$lineheight;
 }
 
 .preview-metadata {
-  color: $color-light;
+  color: $color-font-light;
   height:165px;
   overflow: hidden;
 
@@ -156,27 +157,28 @@ $preview-height: 8*$lineheight;
     justify-content:space-between;
     padding-left: $lineheight/2;
     padding-right: $lineheight/2;
+    font-size:0.9em;
   }
 }
 
 .card-preview.card-info {
   .comment-text {
-    @include angled-edge('outside top', 'upper left', $color-skyblue, 16);
+    @include angled-edge('outside top', 'upper left', $color-info, 16);
-    background-color:$color-skyblue;
+    background-color:$color-info;
   }
 }
 
 .card-preview.card-grey {
   .comment-text {
-    @include angled-edge('outside top', 'upper left', $color-grey, 16);
+    @include angled-edge('outside top', 'upper left', $color-muted, 16);
-    background-color:$color-grey;
+    background-color:$color-muted;
   }
 }
 
 .comment-text {
-  @include angled-edge('outside top', 'upper left', $color-violet, 16);
+  @include angled-edge('outside top', 'upper left', $color-primary, 16);
-  color: $color-light;
+  color: $color-font-light;
-  background-color:$color-violet;
+  background-color:$color-primary;
   text-align: center;
 }
 
@@ -190,7 +192,7 @@ $preview-height: 8*$lineheight;
 .author-area {
   display:flex;
 
-  img.author-avatar {
+  img.author-avatar, img.avatar {
     display:block;
     height: 4.5rem;
     width:auto;
@@ -224,15 +226,18 @@ $preview-height: 8*$lineheight;
   margin:auto;
 }
 
-.mwarea {
+.avatar {
-  padding-bottom: $lineheight;
+  background: transparent;
 }
 
-.mwaimg {
+.mwarea {
-  width:100%;
+  padding-bottom: $lineheight;
+  .avatar {
+    width:80%;
     height:auto;
     display:block;
     margin:auto;
+  }
 }
 
 .cover {

src/scss/style.scss

@@ -1,16 +1,18 @@
-/* -------------------------------------------------
+/*
-    KAZHNUZ SPACE SCSS
+  Theme Name: Kazhnuz Space
+  Theme URI: https://git.kobold.cafe/kazhnuz/kspace-wordpress-theme
+  Author: Kazhnuz
+  Author URI: https://kazhnuz.space
+  Description: The default theme for Kazhnuz.space, my personnal blog. Made using spectre.css
+  Version: 0.1
+  License: GNU General Public License v3 or later
+  License URI: http://www.gnu.org/licenses/gpl-2.0.html
+  Tags: blog, two-columns, right-sidebar, artist, solarized
+  Text Domain: kspace-wordpress-theme
 
-    Auteur : Kazhnuz
+  This theme is licensed under the GPLv3.
-    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
-------------------------------------------------- */
 
 @import 'angled-edges';