Make a real Darkmode

4 files changed, 263 insertions, 155 deletions

diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss
index c261aff..01ecb6d 100755
--- a/src/css/_contenu.scss
+++ b/src/css/_contenu.scss
@@ -1,45 +1,25 @@
 article {
-/*
-  margin-left: #{"max(0px, (100vw - var(--width_panel) - 10px - 950px - 6vw - 2px - 15px)*11/24)"};
-  margin-right: #{"max(0px, (100vw - var(--width_panel) - 10px - 950px - 6vw - 2px - 15px)*13/24)"};
-*/
   margin: auto 0 0 0;
 
-  a {
-    color: #7C54CB;
-    text-decoration: none;
-    &:hover, &:focus {
-      text-decoration: underline;
-      text-decoration-style: dashed;
-    }
-  }
+  font-family: Nimbus sans, Cascadia code, Courier New, get a font bro, Arial;
+  line-height: 1.65rem;
+  font-size: 1.25rem;
 
-  font-family: "noto serif", 'Georgia', serif;
   position: relative;
   max-width: 950px; ;
-  line-height: 1.6rem;
 
   .pubdate {
     text-align: right;
     font-size: 0.75em;
-    color: #999;
-    /*
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin: 55px 10px;
-    transform: rotate(20deg);
-    text-shadow: 1px 1px 0.2px green;
-    overflow: clip;
-    color: pink;
-    text-align: right;
-    */
+
   }
   ul {
     line-height: 1.6;
   }
 
-
+  h1, h2, h3 {
+    font-family: Palatino Linotype, Bookman Old Style, get a font bro, Times;
+  }
 
   h1 {
     font-size: 3rem;
@@ -52,7 +32,6 @@ article {
   h3 {
     font-size: 1.6rem;
     line-height: 3rem;
-    color: #660;
   }
 
   .anchor {
@@ -75,10 +54,14 @@ article {
       > img {
         height: 150px;
         float: right;
+        position: relative;
+        top: -25px;
       }
       > picture {
         height: 150px;
         float: right;
+        position: relative;
+        top: -25px;
       }
     @media #{$gt-gsm} {
       margin-top: 2.5% 0;
@@ -113,6 +96,11 @@ article {
     display: inline;
   }
   ol {
+    line-height: 2.5em;
+    @media #{$gt-gsm} {
+      line-height: 1.4em;
+    }
+
     li {
       list-style-type: upper-roman;
     }
@@ -121,7 +109,6 @@ article {
     }
   }
   .footnotes {
-    color: #504d4d;
     font-size: 0.8em;
     li {
       padding-bottom: 15px;
@@ -130,9 +117,27 @@ article {
     ol p {
       display: inline;
     }
+
+    @mixin lightMode {
+      color: #504d4d;
+    }
+    @mixin darkMode {
+      color: #E0DDDD;
+    }
+
+    @media (prefers-color-scheme: dark) { @include darkMode; }
+    @media (prefers-color-scheme: light) { @include lightMode; }
+    &.light{ @include lightMode; }
+    &.dark { @include darkMode; }
+
+  }
+
+  blockquote {
+    padding: 1px 2%;
+
+    border-left: 5px solid #ccc;
   }
 
-  font-size: 1.3rem;
   h1 h2 h3 {
     line-height: initial;
   }
@@ -150,15 +155,13 @@ article {
     }
   }
   @mixin lightMode {
-    h1 {
-      color: #605;
-    }
-    h2 {
-      color: #551;
+    .pubDate {
+      color: #606060;
     }
-    h3 {
-      color: #660;
+    blockquote {
+      color: #504d4d;
     }
+
     h4, h5, h6 {
       color: black;
     }
@@ -168,7 +171,7 @@ article {
     color: initial;
 
     > p:first-of-type {
-      color: #944040;
+      font-weight: 2;
       > img {
         filter: none;
       }
@@ -176,15 +179,13 @@ article {
   }
 
   @mixin darkMode {
-    h1 {
-      color: #FEF;
-    }
-    h2 {
-      color: #EFE;
+    .pubDate {
+      color: #606060;
     }
-    h3 {
-      color: #DED;
+    blockquote {
+      color: #E0DDDD;
     }
+
     h4, h5, h6 {
       color: #EFEFEF;
     }
@@ -194,27 +195,30 @@ article {
     color: #EFEFEF;
 
     > p:first-of-type {
-      color: #6bbfbf;
+      font-weight: 2;
       > img {
         filter: invert(0);
       }
     }
   }
-  @media (prefers-color-scheme: dark) { @include darkMode; }   @media (prefers-color-scheme: light) { @include lightMode; }
+  @media (prefers-color-scheme: dark) { @include darkMode; }
+  @media (prefers-color-scheme: light) { @include lightMode; }
   &.light{ @include lightMode; }
   &.dark { @include darkMode; }
 }
 
 .keybs {
-  border: 1px solid gray;
   font-size: 1em;
-  box-shadow: 1px 0 1px 0 #eee,0 2px 0 2px #ccc,0 2px 0 3px #444;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   margin: 2px 3px;
   padding: 1px 5px;
   white-space: nowrap;
+
+  // Theme style
+  border: 1px solid gray;
+  box-shadow: 1px 0 1px 0 #eee,0 2px 0 2px #ccc,0 2px 0 3px #444;
 }
 
 .marge {
@@ -235,10 +239,16 @@ article {
 
   @mixin lightMode {
     color: #333333;
+    sup {
+      color: black;
+    }
   }
 
   @mixin darkMode {
     color: #eee;
+    sup {
+      color: white;
+    }
   }
   @media (prefers-color-scheme: dark) { @include darkMode; }
   @media (prefers-color-scheme: light) { @include lightMode; }
@@ -254,46 +264,54 @@ article {
   .sidenote {
     position: absolute;
     font-style: oblique;
-    font-size: 1.05rem;
+    font-size: 1.07rem;
   }
 }
-code {
-  color: #a00;
-  background: #e2e2e2;
-  border: 0px;
-  border-radius: 8px;
-  padding: 0 5px;
-}
-
-.articleList {
-    list-style-type: none;
-    font-size: 1.2em;
-    font-family: palatino, Times, serif;
-    text-indent: -65px;
 
-    position: relative;
-    top: -3px;
-    left: -60px;
-
-    .pubYear {
-      color: #777;
-      margin: 0 10px;
-    }
-}
 
 section.likes {
   display: flex;
   justify-content: center;
 
+  @mixin lightMode {
+    .likesBox {
+      background-color: #CDE3EC;
+      .likesNotes {
+        color: #555;
+      }
+      .icon {
+        .nbLikes {
+          color: #00324D;
+        }
+      }
+    }
+  }
+  @mixin darkMode {
+    .likesBox {
+      background-color: #3C3C7C;
+      .likesNotes {
+        color: #CCC;
+      }
+      .icon {
+        .nbLikes {
+          color: #F0D5AD;
+        }
+      }
+    }
+  }
+  @media (prefers-color-scheme: dark) { @include darkMode; }
+  @media (prefers-color-scheme: light) { @include lightMode; }
+  &.light{ @include lightMode; }
+  &.dark { @include darkMode; }
+
   .likesBox {
     padding: 20px;
     border-radius: 8px;
-    background-color: #CDE3EC;
     display: flex;
 
+
     .likesTitle {
       font: monospace;
-      font-family: Source Sans Pro,Segoe UI,Trebuchet MS,Helvetica,Helvetica Neue,Arial,sans-serif;
       font-weight: 800;
     }
     .likesText {
@@ -301,7 +319,6 @@ section.likes {
     }
     .likesNotes {
       font-size: 0.8em;
-      color: #777;
       &.err {
         color: red;
       }
@@ -344,7 +361,6 @@ section.likes {
       }
       .nbLikes {
         font-family: Source Sans Pro,Segoe UI,Trebuchet MS,Helvetica,Helvetica Neue,Arial,sans-serif;
-        color: #00324D;
         text-align: center;
         position: relative;
         top: -10px;
@@ -398,20 +414,67 @@ section.likes {
   font-size: 0.8em;
 
   .tag {
-    background-color: #E0D0C9;
-    color: #553;
     padding: 0px 8px;
     border-radius: 3px;
+
+    // Theme style
+
+    @mixin lightMode {
+      background-color: #DDD;
+      color: #333;
+    }
+    @mixin darkMode {
+      background-color: #444;
+      color: #eee;
+    }
+
+    @media (prefers-color-scheme: dark) { @include darkMode; }
+    @media (prefers-color-scheme: light) { @include lightMode; }
+    &.light{ @include lightMode; }
+    &.dark { @include darkMode; }
   }
-  
 }
+
+/* Used only on tag's pages */
+.articleList {
+    list-style-type: none;
+    font-size: 1.2em;
+    text-indent: -65px;
+
+    font-family: palatino, Times, serif;
+
+    position: relative;
+    top: -3px;
+    left: -60px;
+
+    .pubYear {
+      color: #777;
+      margin: 0 10px;
+    }
+}
+
+
+/* Used only on tag's pages */
 .inline-tag {
   position: relative;
   top: -3px;
   font-size: 0.7em;
-  background-color: #E0D0C9;
-  color: #553;
+  background-color: #DDD;
   padding: 3px 8px;
   border-radius: 3px;
   margin: 0 5px;
+
+  @mixin lightMode {
+    background-color: #DDD;
+    color: #333;
+  }
+  @mixin darkMode {
+    background-color: #444;
+    color: #eee;
+  }
+
+  @media (prefers-color-scheme: dark) { @include darkMode; }
+  @media (prefers-color-scheme: light) { @include lightMode; }
+  &.light{ @include lightMode; }
+  &.dark { @include darkMode; }
 }
diff --git a/src/css/_sommaire.scss b/src/css/_sommaire.scss
index 44a3b1e..641dbfe 100755
--- a/src/css/_sommaire.scss
+++ b/src/css/_sommaire.scss
@@ -1,9 +1,12 @@
 .sommaire_blien {
   line-height: 1.45rem;
-  color: #121311;
   font-size: 0.8em;
   font-weight: bold;
   font-family: monospace, serif;
+
+  /* Theme style */
+  color: #121311;
+
   &:before {
     content: "/";
   }
@@ -12,6 +15,7 @@
     text-decoration: none;
   }
   a:hover, a:focus {
+    /* Theme style */
     color: #BBAABB;
   }
 }
@@ -50,6 +54,7 @@
   @mixin darkMode {
     background: #101110;
     color: #FFF;
+
     #logo-ache {
       filter: invert(1);
     }
@@ -90,6 +95,7 @@
     height: 100%;
     transition: left 0.5s ease-in 0.25s;
 
+  /* Theme style */
     border-right: 3px solid rgba(51, 51, 51, 0.1);
 
     &.hidden {
@@ -101,6 +107,8 @@
 #desc_intro {
   padding-left: 10px;
   padding-right: 10px;
+
+  /* Theme style */
   text-shadow: 2px 4px 0 #DDD;
 }
 #desc {
@@ -109,13 +117,15 @@
   padding-left: 15px;
   padding-right: 15px;
   font-size: 1.05em;
+
   font-family: monospace, "Helvetica Neue", Arial, sans-serif;
 }
 .about {
   font-size: 0.8em;
-  font-family: monospace;
   align-items: center;
   justify-content: center;
+
+  font-family: monospace;
 }
 .about > .type_wrap {
   display: inline-flex;
@@ -135,12 +145,14 @@
   display: inline-block;
   width: 20%;
   text-align: left;
-  color: #121311;
   font-size: 0.8em;
   font-weight: bold;
   font-family: monospace, serif;
-  text-shadow: 0 1px 0 #DDD;
   margin: auto;
+
+  /* Theme style */
+  color: #121311;
+  text-shadow: 0 1px 0 #DDD;
 }
 #ontheweb {
   visibility: hidden;
@@ -164,30 +176,3 @@
     }
   }
 }
-
-.lab {
-  height: 200px;
-  width: 100%;
-
-  @media #{$gt-gsm} {
-    position: absolute;
-    left: 0;
-    bottom: 0px;
-  }
-  @media screen and (max-height: 749px) {
-    visibility: hidden;
-  }
-}
-.lab a svg {
- opacity: 0.45;
-}
-.lab a svg:hover {
- opacity: 1;
-}
-/*
-<nav>
-<div id="sommaire_blien">Accueil</div>
-<div id="sommaire_blien">Blog</div>
-<div id="sommaire_blien">Liens</div>
-</nav>
- */
diff --git a/src/css/_style.scss b/src/css/_style.scss
index cc060fa..b28ed19 100644
--- a/src/css/_style.scss
+++ b/src/css/_style.scss
@@ -13,18 +13,16 @@
 .qcm_item p {margin: 0; padding: 0; display: inline;}
 .qcm_check, .qcm_radio {padding-left: 32px;}
 
-blockquote {
-  color: #504d4d;
-  padding: 1px 2%;
-  border-left: 5px solid #ccc;
-}
+
 
 .special-box {
-  background: #eee7da;
   margin: 12.5px 12.5px;
-  padding: 10px 0 10px 95px; 
-  color: #424242;
+  padding: 10px 0 10px 95px;
   min-height: 60px;
+
+  /* Theme style */
+  background: #eee7da;
+  color: #424242;
 }
 .special-box:before{
   content: "";
@@ -35,6 +33,7 @@ blockquote {
   margin: 0 0 -48px -70px;
 }
 @mixin box($name, $bg) {
+  /* Theme style */
   .#{$name} {
     background: $bg;
     padding-right: 4%;
@@ -47,6 +46,7 @@ blockquote {
     background-repeat: no-repeat;
   }
 }
+
 @include box('information', #daeaee);
 @include box('comment', #eea);
 @include box('attention', #eee7da);
@@ -55,9 +55,11 @@ blockquote {
 @include box('bad', #eaa);
 
 .secret {
-  background: #eee;
   padding: 10px 0 10px 15px;
   min-height: 20px;
+
+  /* Theme style */
+  background: #eee;
 }
 .hiden_block_quote {
   display: none;
@@ -66,12 +68,14 @@ blockquote {
   margin-top: 5px;
 }
 kbd {
-  background-color: #f8f6ea;
   padding: 2px 6px;
   border-radius: 3px;
-  border: 1px solid #e0dab6;
   border-bottom-width: 3px;
+
+  /* Theme style */
   text-shadow: 0 1px 0 #fff;
+  background-color: #f8f6ea;
+  border: 1px solid #e0dab6;
   color: #5e551f;
 }
 .view {
@@ -89,19 +93,22 @@ kbd {
   font-family : inherit;
   font-size   : 1em;
   cursor      : pointer;
+
   > div {
     width       : 40px;
     height      : 24px;
-    background  : #c0c0c0 url('image.png') no-repeat center center;
     line-height : 24px;
-    border        : 1px solid rgba(27, 31, 35, 0.2);
     border-radius : 3px;
     font-size: 12px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
+    /* Theme style */
+    border : 1px solid rgba(27, 31, 35, 0.2);
+    background : #c0c0c0 url('image.png') no-repeat center center;
     color: #24292e;
     background-color: #eff3f6;
     background-image: linear-gradient(to top, #fafbfc 0%, #eff3f6 90%);
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
   }
   > div > div {
     font-weight: bold;
@@ -112,12 +119,16 @@ kbd {
 }
 
 @mixin state($border, $border-c) {
-  border: 2px solid $border;
   border-radius: 2px;
   outline: none;
   border-color: $border-c;
+
+  /* Theme style */
   box-shadow: 0 0 5px $border-c;
+  border: 2px solid $border;
 }
+
+/* Theme style */
 .valid {
   @include state(#c0392b, #9F9);
 }
diff --git a/src/css/design.scss b/src/css/design.scss
index c5f1e86..ee6a32e 100755
--- a/src/css/design.scss
+++ b/src/css/design.scss
@@ -12,37 +12,63 @@ $big-screen: "screen and (min-width: 1720px)";
 
 
 html {
-
   @mixin lightMode {
     background: #f1f1f1;
   }
   @mixin darkMode {
     background: #222;
   }
-  @media (prefers-color-scheme: dark) { @include darkMode; } 
+
+  @media (prefers-color-scheme: dark) { @include darkMode; }
   @media (prefers-color-scheme: light) { @include lightMode; }
+
   &.light { @include lightMode; }
   &.dark { @include darkMode; }
 }
 
-/*
-  Disabled because of firefx bugs : <https://bugzilla.mozilla.org/show_bug.cgi?id=1712656>
-
-@media (prefers-color-scheme: dark) {
-    html{background:#282328;filter:invert(0.98);}
-    img,svg,.cp_embed_wrapper,pre{filter:invert(0.8);}
-    #logo-ache {filter:invert(0);}
-}
-*/
-
 body {
   margin: 0;
   line-height: 1.35;
-  color: #333333;
   word-wrap: break-word;
   font-size: 16px;
 
+  a {
+    text-decoration: underline;
+    text-decoration-style: dotted;
+
+    @mixin lightMode {
+      &:hover, &:focus {
+        text-shadow: 0 0 2px #999;
+      }
+
+      color: #458;
+      text-decoration-color: #37373780;
+      &:visited {
+        color: #444;
+      }
+    }
+    @mixin darkMode {
+      &:hover, &:focus {
+        text-shadow: 0 0 2px #FFF;
+      }
+
+
+      color: #B7B7A7;
+      text-decoration-color: #C9C9C980;
+      &:visited {
+        color: #C7C7C7;
+      }
+    }
+
+    @media (prefers-color-scheme: dark) { @include darkMode; }
+    @media (prefers-color-scheme: light) { @include lightMode; }
+
+    &.light { @include lightMode; }
+    &.dark { @include darkMode; }
+  }
+
   --width_panel: 100%;
+  --width_panel_bis: 0px;
   @media #{$gt-gsm} {
     --width_panel: 290px;
     --width_panel_bis: 290px;
@@ -50,10 +76,8 @@ body {
 
   #side-bar {
     box-sizing: border-box;
-
     padding-top: 10px;
 
-
     text-rendering: optimizelegibility;
     width: var(--width_panel);
     left: calc(var(--width_panel_bis) - var(--width_panel);
@@ -116,7 +140,7 @@ ache {
 }
 img {
   display: block;
-  margin: 0 auto;
+  margin: 15px 15px;
   max-width: 100%;
 }
 table {
@@ -126,22 +150,47 @@ table {
   p {
     display: inline;
   }
-  th {
-    background-color: lightblue;
+
+  @mixin lightMode {
+    th {
+      background-color: lightblue;
+    }
+     tr:nth-child(even) {
+      background-color: #DEDEFF99;
+    }
+  }
+  @mixin darkMode {
+    th {
+      background-color: darkslategrey;
+    }
+
+     tr:nth-child(even) {
+      background-color: darkslateblue;
+    }
   }
+
+
+  @media (prefers-color-scheme: dark) { @include darkMode; }
+  @media (prefers-color-scheme: light) { @include lightMode; }
+
+  &.light { @include lightMode; }
+  &.dark { @include darkMode; }
+
+}
+code {
+  display: inline-block;
+  white-space: nowrap;
+  border: 0px;
+  border-radius: 8px;
+  padding: 0 5px;
+
+  color: #c22222;
+  background: #FFF;
 }
 table, th, td {
-  border: 1px solid #dfe2e5;
   padding: 7px 13px;
-}
-.suite {
-  color: #686868;
-  outline: none;
-  text-decoration: none;
-  font-size: 0.6em;
-  font-weight: bold;
-  font-family: monospace, serif;
-  text-shadow: 0 1px 0 #DDD;
+
+  border: 1px solid #dfe2e5;
 }
 
 .decal_panel {