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