New version of ache.one

4 files changed, 187 insertions, 109 deletions

diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss
index f9f81c9..45639fb 100755
--- a/src/css/_contenu.scss
+++ b/src/css/_contenu.scss
@@ -1,50 +1,73 @@
 article {
-  margin-right: 2%;
-  margin-left: 3%;
-  float: left;
-  width: 83%;
+/*
+  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 auto 0 2.5%;
+
   background: #FFF;
-  margin-bottom: 2.5%;
-  padding-right: 0;
-  padding-left: 0;
   padding: 1.6em 1.6em;
-  font-family: Merriweather, "Liberation Serif", "Segoe UI";
+  font-family: "noto serif", 'Georgia', serif;
   position: relative;
   max-width: 950px; ;
+  line-height: 1.6rem;
 
   .pubdate {
     position: absolute;
     top: 0;
     right: 0;
-    padding: 55px 10px;
+    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;
   }
-  code {
-    color: #a00;
-    background: #eee;
-    border: 1px solid #ccc;
-    padding: 0 5px;
-    font-weight: 630;
+
+  h1 {
+    font-size: 3rem;
+    line-height: 3rem;
+    color: #605;
+  }
+  h2 {
+    font-size: 2rem;
+    line-height: 3rem;
+    color: #551;
+  }
+  h3 {
+    font-size: 1.6rem;
+    line-height: 3rem;
+    color: #660;
   }
 
+  .anchor {
+    user-select: none;
+    text-decoration: none;
+    color: inherit;
+    &:link {
+      text-decoration: none;
+      color: inherit;
+    }
+    &:visited {
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+
+
   @media #{$gt-gsm} {
     ul {
       line-height: 1.4;
     }
 
     float: none;
-    margin-right: auto;
-    margin-left: auto;
     width: auto;
 
-    padding-right: 4vh;
-    padding-left: 4vh;
+    padding-right: 3vw;
+    padding-left: 3vw;
 
     border: 1px solid #eaeaea;
     border: 1px solid rgba(51, 51, 51, 0.1);
@@ -73,7 +96,6 @@ article {
       list-style-type: lower-roman;
     }
   }
-
   .footnotes {
     color: #777;
     font-size: 0.8em;
@@ -86,85 +108,65 @@ article {
     }
   }
 
-  font-size: 1.3em;
-  h1 {
-    font-size: 2.2em;
-    color: #A5B;
-  }
-  h2 {
-    font-size: 1.9em;
-    color: #BB8;
-  }
-  h3 {
-    font-size: 1.6em;
-    color: #AC4;
-  }
-  h2:before {
-    content: "# ";
-    color: #ABB;
-    font: bold  1.3em arial, sans-serif;
-  }
-  h3:before {
-    content: "## ";
-    color: #ABB;
-    font: bold  1.2em arial, sans-serif;
-  }
-  h4:before {
-    content: "### ";
-    color: #ABB;
-    font: bold  1.1em arial, sans-serif;
+  font-size: 1.3rem;
+  h1 h2 h3 {
+    line-height: initial;
   }
 
-  @media #{$gt-gsm} {
-    font-size: 1.1em;
-    h1 {
-      font-size: 2em;
-      color: #A5B;
-    }
-    h2 {
-      font-size: 1.5em;
-      color: #BB8;
-    }
-    h3 {
-      font-size: 1.25em;
-      color: #AC4;
-    }
-    h2:before {
-      content: "# ";
-      color: #ABB;
-      font: bold  0.95em arial, sans-serif;
+
+
+  @media #{$gsm} {
+    margin: 0;
+    padding: 50px 5px;
+    width: calc(100% - 10px);
+    font-size: 1rem;
+    code {
+      font-size: 0.9rem;
     }
-    h3:before {
-      content: "## ";
-      color: #ABB;
-      font: bold  0.95em arial, sans-serif;
+  }
+
+  @mixin darkMode {
+    background-color: #1C1C1C;
+    h1, h2, h3, h4, h5 {
+      color: #EFEFEF;
+      text-indent: -10px;
     }
-    h4:before {
-      content: "### ";
-      color: #ABB;
-      font: bold  1em arial, sans-serif;
+    img {
+      filter: invert(1);
     }
+    color: #EFEFEF;
   }
+  @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; }
 }
+
 section {
   > p:nth-of-type(1):after {
     content: " ";
     display: table;
     clear: both;
   }
-  > p:nth-of-type(1) > img {
-    height: 150px;
-    float: right;
-  }
-
-  @media #{$gt-gsm} {
-    > p:first-of-type {
+  > p:first-of-type {
+      color: #944040;
+      > img {
+        height: 150px;
+        float: right;
+      }
+    @media #{$gt-gsm} {
       margin-top: 2.5%;
       margin-bottom: 2.5%;
       padding-left: 6%;
-      color: #944040;
     }
   }
+
+  @mixin darkMode {
+    > p:first-of-type {
+      color: #6bbfbf;
+      > img {
+        filter: invert(0);
+      }
+    }
+  }
+  @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; }
 }
 .keybs {
   border: 1px solid gray;
@@ -178,3 +180,40 @@ section {
   white-space: nowrap;
 }
 
+.marge {
+    display: block;
+}
+.marge {
+  @media #{$tab} {
+    display: none;
+  }
+}
+.sidenotes {
+  @media #{$tab} {
+    display: none;
+  }
+
+  @mixin darkMode {
+    color: #eee;
+  }
+  @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; }
+  margin: 0 20px;
+  transition: width 0.25s ease-out 0.25s;
+  position: relative;
+  max-width: 600px;
+  p {
+    margin: 0;
+  }
+  .sidenote {
+    position: absolute;
+    font-style: oblique;
+    font-size: 1.05rem;
+  }
+}
+code {
+  color: #a00;
+  background: #eee;
+  border: 0px;
+  border-radius: 8px;
+  padding: 0 5px;
+}
diff --git a/src/css/_sommaire.scss b/src/css/_sommaire.scss
index 15947ef..68d43a0 100755
--- a/src/css/_sommaire.scss
+++ b/src/css/_sommaire.scss
@@ -1,7 +1,6 @@
 .sommaire_blien {
-  display: inline-block;
-  width: 33%;
   text-align: left;
+  line-height: 1.45rem;
   color: #121311;
   font-size: 0.8em;
   font-weight: bold;
@@ -22,20 +21,39 @@
 }
 
 #side-bar {
-  text-align: center;
-  display: block;
-  height: auto;
-  text-rendering: optimizelegibility;
-  box-sizing: border-box;
-  background: #F5F6F5;
-  padding-top: 10px;
+  ul {
+    columns: 2;
+    list-style-type: none;
+  }
+
+  @mixin darkMode {
+    background: #101110;
+    color: #FFF;
+    #logo-ache {
+      filter: invert(1);
+    }
+    #desc_intro {
+      text-shadow: 2px 4px 0 #333;
+    }
+    .about_bar {
+    }
+    .sommaire_blien {
+      text-shadow: 0 1px 0 #444;
+      color: #F5F5F5;
+      a {
+        color: #F5F5F5;
+      }
+    }
+    .about {
+      color: #BBB;
+    }
+  }
+  @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; }
+
+
 
   h1 {
     font-family: monospace, "Helvetica Neue", Arial, sans-serif;
-
-    /*
-      font-family: "PT Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
-    */
   }
   svg {
     margin: 0 auto;
@@ -50,10 +68,6 @@
     transition: left 0.5s ease-in 0.25s;
     text-align: center;
 
-    /*
-    background: none repeat scroll 0% 0% #F5F6F5;
-     */
-    background: #FFF;
     border-right: 3px solid rgba(51, 51, 51, 0.1);
 
     &.hidden {
@@ -94,7 +108,7 @@
 @keyframes typing {
   0% {
     width: 0;
-  }
+  };
 }
 .about_bar {
   display: inline-block;
@@ -116,19 +130,16 @@
     @media screen and (max-height: 519px) {
       visibility: hidden;
     }
-    padding-left: 0;
 
     position: absolute;
     bottom: 0px;
     left: 0px;
+    width: var(--width_panel);
+
     ul {
-      position: initial;
-      width: 30vh;
       padding-left: 0;
       display: flex;
       justify-content: space-evenly;
-      li {
-      }
     }
   }
 }
diff --git a/src/css/_style.scss b/src/css/_style.scss
index 6b90d1f..1c8c9b7 100644
--- a/src/css/_style.scss
+++ b/src/css/_style.scss
@@ -42,7 +42,7 @@ blockquote {
     font-family: monospace, serif;
     font-size: 14px;
     &:before {
-      background-image: url("/s/img/ic_" + $name + "_black_48px.svg");
+      background-image: url("/s/imgM/ic_" + $name + "_black_48px.svg");
     }
   }
 }
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;
+}
+