From ed058a1d31c146f068863eef152626289117975f Mon Sep 17 00:00:00 2001
From: ache <ache@ache.one>
Date: Tue, 3 May 2022 19:30:56 +0200
Subject: Accessibility fix

---
 src/css/_contenu.scss  | 71 ++++++++++++++++++++++++--------------------------
 src/css/_sommaire.scss |  2 +-
 src/css/design.scss    |  2 +-
 3 files changed, 36 insertions(+), 39 deletions(-)

diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss
index 45639fb..14bb412 100755
--- a/src/css/_contenu.scss
+++ b/src/css/_contenu.scss
@@ -3,10 +3,17 @@ article {
   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%;
+  margin: auto 0 0 0;
+
+  a {
+    color: #97D;
+    text-decoration: none;
+    &:hover, &:focus {
+      text-decoration: underline;
+      text-decoration-style: dashed;
+    }
+  }
 
-  background: #FFF;
-  padding: 1.6em 1.6em;
   font-family: "noto serif", 'Georgia', serif;
   position: relative;
   max-width: 950px; ;
@@ -47,16 +54,30 @@ article {
     user-select: none;
     text-decoration: none;
     color: inherit;
+
     &:link {
-      text-decoration: none;
       color: inherit;
     }
     &:visited {
-      text-decoration: none;
       color: inherit;
     }
+    &:hover, &:focus {
+      text-decoration: underline;
+    }
   }
 
+  > p:first-of-type {
+      color: #944040;
+      > img {
+        height: 150px;
+        float: right;
+      }
+    @media #{$gt-gsm} {
+      margin-top: 2.5% 0;
+    }
+  }
+
+
 
   @media #{$gt-gsm} {
     ul {
@@ -66,14 +87,11 @@ article {
     float: none;
     width: auto;
 
-    padding-right: 3vw;
+    padding-right: 1vw;
     padding-left: 3vw;
 
-    border: 1px solid #eaeaea;
-    border: 1px solid rgba(51, 51, 51, 0.1);
-    border-color: #eaeaea !important;
-    margin-top: 50px;
-    margin-bottom: 50px;
+    margin-top: 25px;
+    margin-bottom: 25px;
 
     &.zen-mode {
       margin-left: auto;
@@ -126,7 +144,6 @@ article {
   }
 
   @mixin darkMode {
-    background-color: #1C1C1C;
     h1, h2, h3, h4, h5 {
       color: #EFEFEF;
       text-indent: -10px;
@@ -135,30 +152,7 @@ article {
       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:first-of-type {
-      color: #944040;
-      > img {
-        height: 150px;
-        float: right;
-      }
-    @media #{$gt-gsm} {
-      margin-top: 2.5%;
-      margin-bottom: 2.5%;
-      padding-left: 6%;
-    }
-  }
-
-  @mixin darkMode {
     > p:first-of-type {
       color: #6bbfbf;
       > img {
@@ -167,7 +161,9 @@ section {
     }
   }
   @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; }
+
 }
+
 .keybs {
   border: 1px solid gray;
   font-size: 1em;
@@ -189,6 +185,8 @@ section {
   }
 }
 .sidenotes {
+  margin: 10px 10px 0 0;
+  text-align: justify;
   @media #{$tab} {
     display: none;
   }
@@ -197,10 +195,9 @@ section {
     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;
+  max-width: 475px;
   p {
     margin: 0;
   }
diff --git a/src/css/_sommaire.scss b/src/css/_sommaire.scss
index 68d43a0..e6c6964 100755
--- a/src/css/_sommaire.scss
+++ b/src/css/_sommaire.scss
@@ -15,7 +15,7 @@
     outline: none;
     text-decoration: none;
   }
-  a:hover {
+  a:hover, a:focus {
     color: #BBAABB;
   }
 }
diff --git a/src/css/design.scss b/src/css/design.scss
index 91c3e44..bfbb397 100755
--- a/src/css/design.scss
+++ b/src/css/design.scss
@@ -145,7 +145,7 @@ table, th, td {
 .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)"};
+    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;
 }
-- 
cgit v1.2.3