From 5c8feeed682a1af36c5d71f78bfba9d83a618255 Mon Sep 17 00:00:00 2001
From: ache <ache@ache.one>
Date: Sun, 11 Sep 2022 00:29:46 +0200
Subject: Implemente theme switch

---
 src/css/_contenu.scss | 65 +++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 53 insertions(+), 12 deletions(-)

(limited to 'src/css/_contenu.scss')

diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss
index 0dd4889..3ff6b90 100755
--- a/src/css/_contenu.scss
+++ b/src/css/_contenu.scss
@@ -34,15 +34,15 @@ article {
     line-height: 1.6;
   }
 
+
+
   h1 {
     font-size: 3rem;
     line-height: 3rem;
-    color: #605;
   }
   h2 {
     font-size: 2rem;
     line-height: 3rem;
-    color: #551;
   }
   h3 {
     font-size: 1.6rem;
@@ -67,7 +67,6 @@ article {
   }
 
   > p:first-of-type {
-      color: #944040;
       > img {
         height: 150px;
         float: right;
@@ -77,8 +76,6 @@ article {
     }
   }
 
-
-
   @media #{$gt-gsm} {
     ul {
       line-height: 1.4;
@@ -130,8 +127,9 @@ article {
   h1 h2 h3 {
     line-height: initial;
   }
-
-
+  h1, h2, h3, h4, h5 {
+      text-indent: -10px;
+  }
 
   @media #{$gsm} {
     margin: 0;
@@ -142,11 +140,44 @@ article {
       font-size: 0.9rem;
     }
   }
+  @mixin lightMode {
+    h1 {
+      color: #605;
+    }
+    h2 {
+      color: #551;
+    }
+    h3 {
+      color: #660;
+    }
+    h4, h5, h6 {
+      color: black;
+    }
+    img {
+      filter: none;
+    }
+    color: initial;
+
+    > p:first-of-type {
+      color: #944040;
+      > img {
+        filter: none;
+      }
+    }
+  }
 
   @mixin darkMode {
-    h1, h2, h3, h4, h5 {
+    h1 {
+      color: #FEF;
+    }
+    h2 {
+      color: #EFE;
+    }
+    h3 {
+      color: #DED;
+    }
+    h4, h5, h6 {
       color: #EFEFEF;
-      text-indent: -10px;
     }
     img {
       filter: invert(1);
@@ -160,8 +191,9 @@ article {
       }
     }
   }
-  @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; }
-
+  @media (prefers-color-scheme: dark) { @include darkMode; }   @media (prefers-color-scheme: light) { @include lightMode; }
+  &.light{ @include lightMode; }
+  &.dark { @include darkMode; }
 }
 
 .keybs {
@@ -187,14 +219,23 @@ article {
 .sidenotes {
   margin: 10px 10px 0 0;
   text-align: justify;
+
   @media #{$tab} {
     display: none;
   }
 
+  @mixin lightMode {
+    color: #333333;
+  }
+
   @mixin darkMode {
     color: #eee;
   }
-  @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; }
+  @media (prefers-color-scheme: dark) { @include darkMode; }
+  @media (prefers-color-scheme: light) { @include lightMode; }
+  &.light{ @include lightMode; }
+  &.dark { @include darkMode; }
+
   transition: width 0.25s ease-out 0.25s;
   position: relative;
   max-width: 475px;
-- 
cgit v1.2.3