New version of ache.one

1 files changed, 32 insertions, 4 deletions

diff --git a/src/css/design.scss b/src/css/design.scss
index 8a1f33b..91c3e44 100755
--- a/src/css/design.scss
+++ b/src/css/design.scss
@@ -1,14 +1,22 @@
-$gsm:     "screen and (max-width: 768px)";
-$tab:     "screen and (max-width: 1024px)";
-$gt-gsm:  "screen and (min-width: 768px)";
+$gsm:        "screen and (max-width: 768px)";
+$gt-gsm:     "screen and (min-width: 768px)";
+$tab:        "screen and (max-width: 1024px)";
+$laptop:     "screen and (min-width: 1024px)";
+$big-laptop: "screen and (min-width: 1400px)";
+$big-screen: "screen and (min-width: 1720px)";
 
 @import 'contenu';
 @import 'sommaire';
 @import 'style';
 @import 'rainbow';
 
+
 html {
   background: #f1f1f1;
+  @mixin darkMode {
+    background: #222;
+  }
+  @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; }
 }
 
 /*
@@ -22,7 +30,6 @@ html {
 */
 
 body {
-  font-family: 'Noto Serif', Verdana, "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
   margin: 0;
   line-height: 1.35;
   color: #333333;
@@ -36,6 +43,16 @@ body {
   }
 
   #side-bar {
+    box-sizing: border-box;
+
+    @mixin lightMode {
+      background: #F5F6F5;
+    }
+    @media (prefers-color-scheme: light) { @include lightMode; } &.dark { @include lightMode; }
+    padding-top: 10px;
+
+
+    text-rendering: optimizelegibility;
     width: var(--width_panel);
     left: calc(var(--width_panel_bis) - var(--width_panel);
     transition: width 1s ease-in-out 1s;
@@ -50,6 +67,9 @@ body {
   cursor: pointer;
 }
 .hide_arrow {
+  @media (prefers-color-scheme: dark) { filter: invert(1); }
+  &.dark { filter: invert(1); }
+
   position: fixed;
   display: none;
   top: 30%;
@@ -122,3 +142,11 @@ table, th, td {
   text-shadow: 0 1px 0 #DDD;
 }
 
+.decal_panel {
+  @media #{$big-laptop} {
+    display: grid;
+    grid-template-columns: #{"max(0px, (100vw - var(--width_panel_bis) - 10px - 950px - 6vw - 2px - 15px)*7/24)"} auto #{"max(0px, (100vw - var(--width_panel_bis) - 10px - 950px - 6vw - 2px - 15px)*17/24)"};
+  }
+  transition: margin-left 0.25s ease-out 0.25s, grid-template-columns 0.25s ease-out 0.25s;
+}
+