Make a real Darkmode

1 files changed, 144 insertions, 81 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; }
 }