Support for notes

1 files changed, 238 insertions, 78 deletions

diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss
index ee809ca..c05bbfa 100755
--- a/src/css/_contenu.scss
+++ b/src/css/_contenu.scss
@@ -12,17 +12,24 @@ article {
     text-align: right;
     line-height: 1.65;
   }
+
   ul {
     line-height: 1.6;
   }
 
-  h1, h2, h3 {
+  h1,
+  h2,
+  h3 {
     font-family: Palatino Linotype, Bookman Old Style, Fira Code, get a font bro, Times;
   }
 
-  h1, h2, h3, h4 {
+  h1,
+  h2,
+  h3,
+  h4 {
     margin: 2.5rem 0 1rem 0;
   }
+
   p {
     margin: 0.5rem 0;
   }
@@ -32,14 +39,17 @@ article {
     line-height: 3rem;
     margin: 0.5rem 0;
   }
+
   h2 {
     font-size: 1.6rem;
     line-height: 3rem;
   }
+
   h3 {
     font-size: 1.3rem;
     line-height: 3rem;
   }
+
   h4 {
     font-size: 1.1rem;
     line-height: 3rem;
@@ -53,32 +63,38 @@ article {
     &:link {
       color: inherit;
     }
+
     &:visited {
       color: inherit;
     }
-    &:hover, &:focus {
+
+    &:hover,
+    &:focus {
       text-decoration: underline;
     }
   }
 
-  > p:first-of-type {
-      > img {
-        height: 150px;
-        width: 150px;
-        float: right;
-        position: relative;
-        top: -25px;
-      }
-      > img:not([src$="-inv.svg"]) {
-        filter: revert;
-      }
-      > picture {
-        height: 150px;
-        width: 150px;
-        float: right;
-        position: relative;
-        top: -25px;
-      }
+  >p:first-of-type {
+    >img {
+      height: 150px;
+      width: 150px;
+      float: right;
+      position: relative;
+      top: -25px;
+    }
+
+    >img:not([src$="-inv.svg"]) {
+      filter: revert;
+    }
+
+    >picture {
+      height: 150px;
+      width: 150px;
+      float: right;
+      position: relative;
+      top: -25px;
+    }
+
     @media #{$gt-gsm} {
       margin-top: 2.5% 0;
     }
@@ -108,18 +124,24 @@ article {
       transition: margin-left 0.5s ease-out 0.25s;
     }
   }
+
   li.task-list-item {
-      list-style-type: "- ";
-      input[type='checkbox'] {
-        width: 20px;
-        height: 20px;
-      }
+    list-style-type: "- ";
+
+    input[type='checkbox'] {
+      width: 20px;
+      height: 20px;
+    }
   }
+
   li p {
     display: inline;
   }
-  #sommaire + ol, #table-of-contents + ol {
+
+  #sommaire+ol,
+  #table-of-contents+ol {
     line-height: 1.6rem;
+
     @media #{$gt-gsm} {
       line-height: 1.4em;
     }
@@ -127,16 +149,20 @@ article {
     li {
       list-style-type: upper-roman;
     }
+
     li li {
       list-style-type: lower-roman;
     }
   }
+
   .footnotes {
     font-size: 0.8em;
+
     li {
       padding-bottom: 15px;
       list-style-type: decimal;
     }
+
     ol p {
       display: inline;
     }
@@ -144,14 +170,26 @@ article {
     @mixin lightMode {
       color: #504d4d;
     }
+
     @mixin darkMode {
       color: #E0DDDD;
     }
 
-    @media (prefers-color-scheme: dark) { @include darkMode; }
-    @media (prefers-color-scheme: light) { @include lightMode; }
-    &.light{ @include lightMode; }
-    &.dark { @include darkMode; }
+    @media (prefers-color-scheme: dark) {
+      @include darkMode;
+    }
+
+    @media (prefers-color-scheme: light) {
+      @include lightMode;
+    }
+
+    &.light {
+      @include lightMode;
+    }
+
+    &.dark {
+      @include darkMode;
+    }
 
   }
 
@@ -164,8 +202,13 @@ article {
   h1 h2 h3 {
     line-height: initial;
   }
-  h1, h2, h3, h4, h5 {
-      text-indent: -10px;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    text-indent: -10px;
   }
 
   @media #{$gsm} {
@@ -173,34 +216,45 @@ article {
     padding: 50px 5px;
     width: calc(100% - 10px);
     font-size: 1rem;
+
     code {
       font-size: 0.9rem;
     }
   }
+
   @media #{$big-laptop} {
     pre code {
       width: 110%;
       margin: 0 -10%;
     }
   }
+
   @mixin lightMode {
     .pubDate {
       color: #606060;
     }
+
     blockquote {
       color: #504d4d;
     }
 
-    h4, h5, h6 {
+    h4,
+    h5,
+    h6 {
       color: black;
     }
+
     img {
       filter: none;
     }
+
     color: initial;
 
-    > p:first-of-type {
-      > img[src$=".jpg"], > img[src$=".png"], > img[src$=".avif"] {
+    >p:first-of-type {
+
+      >img[src$=".jpg"],
+      >img[src$=".png"],
+      >img[src$=".avif"] {
         filter: none;
       }
     }
@@ -210,30 +264,55 @@ article {
     .pubDate {
       color: #606060;
     }
+
     blockquote {
       color: #E0DDDD;
     }
 
-    h4, h5, h6 {
+    h4,
+    h5,
+    h6 {
       color: #EFEFEF;
     }
+
     img:not(.no-dark) {
       filter: invert(1);
     }
+
     color: #EFEFEF;
 
-    > p:first-of-type {
-      > img[src$=".jpg"], > img[src$=".png"], > img[src$=".avif"] {
+    >p:first-of-type {
+
+      >img[src$=".jpg"],
+      >img[src$=".png"],
+      >img[src$=".avif"] {
         filter: invert(0);
       }
     }
   }
-  @media (prefers-color-scheme: dark) { @include darkMode; }
-  @media (prefers-color-scheme: light) { @include lightMode; }
-  &.light{ @include lightMode; }
-  &.dark { @include darkMode; }
 
-  iframe, img, div, video, svg, image {
+  @media (prefers-color-scheme: dark) {
+    @include darkMode;
+  }
+
+  @media (prefers-color-scheme: light) {
+    @include lightMode;
+  }
+
+  &.light {
+    @include lightMode;
+  }
+
+  &.dark {
+    @include darkMode;
+  }
+
+  iframe,
+  img,
+  div,
+  video,
+  svg,
+  image {
     border: none;
     margin: 0 auto;
 
@@ -258,17 +337,19 @@ article {
 
   // Theme style
   border: 1px solid gray;
-  box-shadow: 1px 0 1px 0 #eee,0 2px 0 2px #ccc,0 2px 0 3px #444;
+  box-shadow: 1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
 }
 
 .marge {
-    display: block;
+  display: block;
 }
+
 .marge {
   @media #{$tab} {
     display: none;
   }
 }
+
 .sidenotes {
   margin: 10px 10px 0 10%;
   text-align: justify;
@@ -279,6 +360,7 @@ article {
 
   @mixin lightMode {
     color: #333333;
+
     sup {
       color: black;
     }
@@ -286,21 +368,36 @@ article {
 
   @mixin darkMode {
     color: #eee;
+
     sup {
       color: white;
     }
   }
-  @media (prefers-color-scheme: dark) { @include darkMode; }
-  @media (prefers-color-scheme: light) { @include lightMode; }
-  &.light{ @include lightMode; }
-  &.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;
+
   p {
     margin: 0;
   }
+
   .sidenote {
     position: absolute;
     font-style: oblique;
@@ -316,9 +413,11 @@ section.likes {
   @mixin lightMode {
     .likesBox {
       background-color: #CDE3EC;
+
       .likesNotes {
         color: #555;
       }
+
       .icon {
         .nbLikes {
           color: #00324D;
@@ -326,12 +425,15 @@ section.likes {
       }
     }
   }
+
   @mixin darkMode {
     .likesBox {
       background-color: #3C3C7C;
+
       .likesNotes {
         color: #CCC;
       }
+
       .icon {
         .nbLikes {
           color: #F0D5AD;
@@ -339,10 +441,22 @@ section.likes {
       }
     }
   }
-  @media (prefers-color-scheme: dark) { @include darkMode; }
-  @media (prefers-color-scheme: light) { @include lightMode; }
-  &.light{ @include lightMode; }
-  &.dark { @include darkMode; }
+
+  @media (prefers-color-scheme: dark) {
+    @include darkMode;
+  }
+
+  @media (prefers-color-scheme: light) {
+    @include lightMode;
+  }
+
+  &.light {
+    @include lightMode;
+  }
+
+  &.dark {
+    @include darkMode;
+  }
 
   .likesBox {
     padding: 20px;
@@ -354,11 +468,14 @@ section.likes {
       font: monospace;
       font-weight: 800;
     }
+
     .likesText {
       font-size: 0.8em;
     }
+
     .likesNotes {
       font-size: 0.8em;
+
       &.err {
         color: red;
       }
@@ -368,12 +485,14 @@ section.likes {
     .layout {
       display: flex;
       align-items: center;
+
       .icon {
         fill: transparent;
         stroke: pink;
         stroke-width: 20;
         cursor: pointer;
         position: relative;
+
         svg {
           overflow: visible;
           width: 10rem;
@@ -388,6 +507,7 @@ section.likes {
         .hear-main {
           z-index: 2;
         }
+
         .heart-background {
           position: absolute;
           left: 0;
@@ -395,15 +515,17 @@ section.likes {
           z-index: 1;
           stroke: none;
         }
+
         .heart-main path.anim {
           animation: stroke-animation 1.5s ease-in-out forwards;
         }
 
-        .heart-main ~ .heart-background path.anim-click {
+        .heart-main~.heart-background path.anim-click {
           animation: fade-animation 0.35s ease-in-out forwards;
         }
+
         .nbLikes {
-          font-family: Source Sans Pro,Segoe UI,Trebuchet MS,Helvetica,Helvetica Neue,Arial,sans-serif;
+          font-family: Source Sans Pro, Segoe UI, Trebuchet MS, Helvetica, Helvetica Neue, Arial, sans-serif;
           text-align: center;
           position: relative;
           top: -10px;
@@ -417,13 +539,16 @@ section.likes {
         fill: transparent;
         transform: scale(1);
       }
+
       30% {
         fill: pink;
         transform: scale(1.25);
       }
+
       50% {
         transform: scale(1);
       }
+
       100% {
         stroke-dashoffset: 0;
         fill: pink;
@@ -435,14 +560,17 @@ section.likes {
         fill: transparent;
         transform: scale(1);
       }
+
       13% {
         fill: lightpink;
         transform: scale(1.2);
         opacity: 1;
       }
+
       66% {
         opacity: 0.8;
       }
+
       100% {
         transform: scale(2);
         opacity: 0;
@@ -450,16 +578,24 @@ section.likes {
     }
   }
 }
+
 .alt-lang {
   a {
     padding-right: 20px;
   }
+
   font-size: 1.15rem;
   text-transform: lowercase;
   font-weight: bolder;
   position: relative;
   top: -3px;
-  font-family: Source Sans Pro,Segoe UI,Trebuchet MS,Helvetica,Helvetica Neue,Arial,sans-serif;
+  font-family: Source Sans Pro,
+  Segoe UI,
+  Trebuchet MS,
+  Helvetica,
+  Helvetica Neue,
+  Arial,
+  sans-serif;
 }
 
 .tags {
@@ -480,34 +616,47 @@ section.likes {
       background-color: #DDD;
       color: #333;
     }
+
     @mixin darkMode {
       background-color: #444;
       color: #eee;
     }
 
-    @media (prefers-color-scheme: dark) { @include darkMode; }
-    @media (prefers-color-scheme: light) { @include lightMode; }
-    &.light{ @include lightMode; }
-    &.dark { @include darkMode; }
+    @media (prefers-color-scheme: dark) {
+      @include darkMode;
+    }
+
+    @media (prefers-color-scheme: light) {
+      @include lightMode;
+    }
+
+    &.light {
+      @include lightMode;
+    }
+
+    &.dark {
+      @include darkMode;
+    }
   }
 }
 
 /* Used only on tag's pages */
-.articleList {
-    list-style-type: none;
-    font-size: 1.2em;
-    text-indent: -65px;
+.articleList,
+.notesList {
+  list-style-type: none;
+  font-size: 1.2em;
+  text-indent: -65px;
 
-    font-family: palatino, Times, serif;
+  font-family: palatino, Times, serif;
 
-    position: relative;
-    top: -3px;
-    left: -60px;
+  position: relative;
+  top: -3px;
+  left: -60px;
 
-    .pubYear {
-      color: #777;
-      margin: 0 10px;
-    }
+  .pubYear {
+    color: #777;
+    margin: 0 10px;
+  }
 }
 
 
@@ -525,15 +674,27 @@ section.likes {
     background-color: #DDD;
     color: #333;
   }
+
   @mixin darkMode {
     background-color: #444;
     color: #eee;
   }
 
-  @media (prefers-color-scheme: dark) { @include darkMode; }
-  @media (prefers-color-scheme: light) { @include lightMode; }
-  &.light{ @include lightMode; }
-  &.dark { @include darkMode; }
+  @media (prefers-color-scheme: dark) {
+    @include darkMode;
+  }
+
+  @media (prefers-color-scheme: light) {
+    @include lightMode;
+  }
+
+  &.light {
+    @include lightMode;
+  }
+
+  &.dark {
+    @include darkMode;
+  }
 }
 
 
@@ -554,4 +715,3 @@ video::cue(.back) {
 hr {
   margin: 2.5rem 0;
 }
-