Better code design

1 files changed, 237 insertions, 147 deletions

diff --git a/src/css/design.scss b/src/css/design.scss
index d98db42..95af524 100755
--- a/src/css/design.scss
+++ b/src/css/design.scss
@@ -1,7 +1,7 @@
-$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)";
+$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: 1520px)";
 $big-screen: "screen and (min-width: 1720px)";
 
@@ -15,15 +15,26 @@ html {
   @mixin lightMode {
     background: #f1f1f1;
   }
+
   @mixin darkMode {
     background: #222;
   }
 
-  @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;
+  }
 
-  &.light { @include lightMode; }
-  &.dark { @include darkMode; }
+  &.dark {
+    @include darkMode;
+  }
 }
 
 body {
@@ -38,38 +49,56 @@ body {
     text-decoration-style: dotted;
 
     @mixin lightMode {
-      &:hover, &:focus {
+
+      &:hover,
+      &:focus {
         text-shadow: 0 0 2px #999;
         text-decoration-color: royalblue;
       }
 
       color: #458;
+
       &:visited {
         color: #444;
       }
     }
+
     @mixin darkMode {
-      &:hover, &:focus {
+
+      &:hover,
+      &:focus {
         text-shadow: 0 0 2px #FFF;
         text-decoration-color: goldenrod;
       }
 
 
       color: #B7B7A7;
+
       &:visited {
         color: #C7C7C7;
       }
     }
 
-    @media (prefers-color-scheme: dark) { @include darkMode; }
-    @media (prefers-color-scheme: light) { @include lightMode; }
+    @media (prefers-color-scheme: dark) {
+      @include darkMode;
+    }
 
-    &.light { @include lightMode; }
-    &.dark { @include darkMode; }
+    @media (prefers-color-scheme: light) {
+      @include lightMode;
+    }
+
+    &.light {
+      @include lightMode;
+    }
+
+    &.dark {
+      @include darkMode;
+    }
   }
 
   --width_panel: 100%;
   --width_panel_bis: 0px;
+
   @media #{$gt-gsm} {
     --width_panel: 290px;
     --width_panel_bis: 290px;
@@ -82,167 +111,228 @@ body {
     text-rendering: optimizelegibility;
     width: var(--width_panel);
     left: calc(var(--width_panel_bis) - var(--width_panel);
-    transition: width 1s ease-in-out 1s;
-    transition: left 0.25s ease-out 0.25s;
-  }
-  & > div  {
-    margin-left: calc(var(--width_panel_bis) + 10px);
-    transition: margin-left 0.25s ease-out 0.25s;
-  }
-}
-.hide_arrow {
-  @media (prefers-color-scheme: dark) { filter: invert(1); }
-  @media (prefers-color-scheme: light) { filter: invert(0); }
-  &.light{ filter: invert(0); }
-  &.dark { filter: invert(1); }
-
-  cursor: pointer;
-  position: fixed;
-  display: none;
-  top: 30%;
-  left: 303px;
-}
-.hide_arrow_show {
-  @media #{$gt-gsm} {
-    display: block;
+        transition: width 1s ease-in-out 1s;
+        transition: left 0.25s ease-out 0.25s;
+    }
+
+    & > div {
+      margin-left: calc(var(--width_panel_bis) + 10px);
+      transition: margin-left 0.25s ease-out 0.25s;
+    }
   }
-}
-.hide_arrow_off {
-  top: 30%;
-  left: 3px;
 
+  .hide_arrow {
+    @media (prefers-color-scheme: dark) {
+      filter: invert(1);
+    }
 
-  -moz-transform:    scaleX(-1); /* Gecko */
-  -o-transform:      scaleX(-1); /* Opera */
-  -webkit-transform: scaleX(-1); /* Webkit */
-  transform:         scaleX(-1); /* Standard */
-}
-#body_c {
-  background-repeat: no-repeat;
-  background-position: top left;
-}
-.flex-img {
-  display: flex;
-  justify-content: space-evenly;
-  flex-wrap: wrap;
-  align-items: center;
-  align-content: center;
-}
-.iimg {
-  flex-grow: 1;
-  width: 240px;
-}
-.fl {
-  float: left;
-}
-ache {
-  margin-left: auto;
-  margin-right: auto;
-}
-img, video {
-  display: block;
-  margin: 15px 15px;
-  max-width: 100%;
-}
-table {
-  border-collapse: collapse;
-  padding: 7px 13px;
-  margin: 15px auto;
-  p {
-    display: inline;
-  }
+    @media (prefers-color-scheme: light) {
+      filter: invert(0);
+    }
 
-  @mixin lightMode {
-    th {
-      background-color: lightblue;
+    &.light {
+      filter: invert(0);
     }
-     tr:nth-child(even) {
-      background-color: #DEDEFF99;
+
+    &.dark {
+      filter: invert(1);
     }
+
+    cursor: pointer;
+    position: fixed;
+    display: none;
+    top: 30%;
+    left: 303px;
   }
-  @mixin darkMode {
-    th {
-      background-color: darkslategrey;
-    }
 
-     tr:nth-child(even) {
-      background-color: darkslateblue;
+  .hide_arrow_show {
+    @media #{$gt-gsm} {
+      display: block;
     }
   }
 
+  .hide_arrow_off {
+    top: 30%;
+    left: 3px;
 
-  @media (prefers-color-scheme: dark) { @include darkMode; }
-  @media (prefers-color-scheme: light) { @include lightMode; }
 
-  &.light { @include lightMode; }
-  &.dark { @include darkMode; }
+    -moz-transform: scaleX(-1);
+    /* Gecko */
+    -o-transform: scaleX(-1);
+    /* Opera */
+    -webkit-transform: scaleX(-1);
+    /* Webkit */
+    transform: scaleX(-1);
+    /* Standard */
+  }
 
-}
-p code {
-  display: inline-block;
-  white-space: nowrap;
-}
-code {
-  border: 0px;
-  border-radius: 8px;
-  padding: 0 5px;
-  font-weight: 500;
-  font-family: Consolas, Liberation Mono, Monaco, Lucida Console, monospace;
+  #body_c {
+    background-repeat: no-repeat;
+    background-position: top left;
+  }
 
-  @mixin lightMode {
-    color: #c22222;
-    background: #FFF;
+  .flex-img {
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    align-items: center;
+    align-content: center;
   }
-  @mixin darkMode {
-    color: red;
-    background: black;
+
+  .iimg {
+    flex-grow: 1;
+    width: 240px;
   }
 
-  @media (prefers-color-scheme: dark) { @include darkMode; }
-  @media (prefers-color-scheme: light) { @include lightMode; }
+  .fl {
+    float: left;
+  }
 
-  &.light { @include lightMode; }
-  &.dark { @include darkMode; }
+  ache {
+    margin-left: auto;
+    margin-right: auto;
+  }
 
+  img, video {
+    display: block;
+    margin: 15px 15px;
+    max-width: 100%;
+  }
 
-}
-table, th, td {
-  padding: 7px 13px;
+  table {
+    border-collapse: collapse;
+    padding: 7px 13px;
+    margin: 15px auto;
 
-  border: 1px solid #dfe2e5;
-}
+    p {
+      display: inline;
+    }
+
+    @mixin lightMode {
+      th {
+        background-color: lightblue;
+      }
+
+      tr:nth-child(even) {
+        background-color: #DEDEFF99;
+      }
+    }
+
+    @mixin darkMode {
+      th {
+        background-color: darkslategrey;
+      }
+
+      tr:nth-child(even) {
+        background-color: darkslateblue;
+      }
+    }
+
+
+    @media (prefers-color-scheme: dark) {
+      @include darkMode;
+    }
+
+    @media (prefers-color-scheme: light) {
+      @include lightMode;
+    }
+
+    &.light {
+      @include lightMode;
+    }
+
+    &.dark {
+      @include darkMode;
+    }
 
-.decal_panel {
-  @media #{$big-laptop} {
-    display: grid;
-    grid-template-columns: #{"max(0px, (100vw - var(--width_panel_bis) - 10px - 950px - 4vw )*7/24)"} auto #{"max(0px, (100vw - var(--width_panel_bis) - 10px - 950px - 4vw)*17/24)"};
   }
-  transition: margin-left 0.25s ease-out 0.25s, grid-template-columns 0.25s ease-out 0.25s;
-}
-#hid {
-  .moon, .sun {
-    display: none;
+
+  p code {
+    display: inline-block;
+    white-space: nowrap;
   }
-  &.dark {
-    .sun {
-      display: unset;
+
+  code {
+    border: 0px;
+    border-radius: 8px;
+    padding: 0 5px;
+    font-weight: 500;
+    font-family: monospace;
+    line-height: 1.225rem;
+
+    @mixin lightMode {
+      color: #c22222;
+      background: #FFF;
+    }
+
+    @mixin darkMode {
+      color: red;
+      background: black;
     }
+
+    @media (prefers-color-scheme: dark) {
+      @include darkMode;
+    }
+
+    @media (prefers-color-scheme: light) {
+      @include lightMode;
+    }
+
+    &.light {
+      @include lightMode;
+    }
+
+    &.dark {
+      @include darkMode;
+    }
+
+
   }
-  &.light {
-    .moon {
-      display: unset;
+
+  table, th, td {
+    padding: 7px 13px;
+
+    border: 1px solid #dfe2e5;
+  }
+
+  .decal_panel {
+    @media #{$big-laptop} {
+      display: grid;
+      grid-template-columns: #{"max(0px, (100vw - var(--width_panel_bis) - 10px - 950px - 4vw )*7/24)"} auto #{"max(0px, (100vw - var(--width_panel_bis) - 10px - 950px - 4vw)*17/24)"};
     }
+
+    transition: margin-left 0.25s ease-out 0.25s, grid-template-columns 0.25s ease-out 0.25s;
   }
-  position: fixed;
-  top: 10px;
-  right: 10vw;
-  .sun, .moon {
-    position: sticky;
-    top: 400px;
-    cursor: pointer;
-    opacity: 0.5;
-    &:hover {
-      opacity: 1;
+
+  #hid {
+    .moon, .sun {
+      display: none;
+    }
+
+    &.dark {
+      .sun {
+        display: unset;
+      }
+    }
+
+    &.light {
+      .moon {
+        display: unset;
+      }
+    }
+
+    position: fixed;
+    top: 10px;
+    right: 10vw;
+
+    .sun, .moon {
+      position: sticky;
+      top: 400px;
+      cursor: pointer;
+      opacity: 0.5;
+
+      &:hover {
+        opacity: 1;
+      }
     }
   }
-}