From 7394e691d738bd66dee7f534392df902b032c244 Mon Sep 17 00:00:00 2001
From: ache <ache@ache.one>
Date: Sat, 2 Oct 2021 22:06:13 +0200
Subject: Zen mode CSS based

---
 src/css/_contenu.scss  |  9 +++++----
 src/css/_sommaire.scss |  2 --
 src/css/design.scss    | 17 +++++++++++++++++
 3 files changed, 22 insertions(+), 6 deletions(-)

(limited to 'src/css')

diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss
index 6497066..b878044 100755
--- a/src/css/_contenu.scss
+++ b/src/css/_contenu.scss
@@ -10,6 +10,7 @@ article {
   padding: 1.6em 1.6em;
   font-family: Merriweather, "Liberation Serif", "Segoe UI";
   position: relative;
+  max-width: 950px; ;
 
   .pubdate {
     position: absolute;
@@ -30,8 +31,8 @@ article {
 
   @media #{$gt-gsm} {
     float: none;
-    margin-right: 7%;
-    margin-left: 300px;
+    margin-right: auto;
+    margin-left: auto;
     width: auto;
 
     font-size: 1em;
@@ -45,12 +46,12 @@ article {
     margin-bottom: 50px;
 
     &.zen-mode {
-      margin-left: 7%;
+      margin-left: auto;
       transition: margin-left 0.25s ease-out 0.25s;
     }
 
     &.zen-mode-disabling {
-      margin-left: 300px;
+      margin-left: --(width_panel);
       transition: margin-left 0.5s ease-out 0.25s;
     }
   }
diff --git a/src/css/_sommaire.scss b/src/css/_sommaire.scss
index 8c589f9..7adfad6 100755
--- a/src/css/_sommaire.scss
+++ b/src/css/_sommaire.scss
@@ -24,7 +24,6 @@
 #side-bar {
   text-align: center;
   display: block;
-  width: 100%;
   height: auto;
   text-rendering: optimizelegibility;
   box-sizing: border-box;
@@ -48,7 +47,6 @@
     bottom: 0;
     left: 0;
     height: 100%;
-    width: 290px;
     transition: left 0.5s ease-in 0.25s;
     text-align: center;
 
diff --git a/src/css/design.scss b/src/css/design.scss
index f09d695..3bddd61 100755
--- a/src/css/design.scss
+++ b/src/css/design.scss
@@ -28,6 +28,23 @@ body {
   color: #333333;
   word-wrap: break-word;
   font-size: 16px;
+
+  --width_panel: 100%;
+  @media #{$gt-gsm} {
+    --width_panel: 290px;
+    --width_panel_bis: 290px;
+  }
+
+  #side-bar {
+    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;
+  }
 }
 #harr {
   cursor: pointer;
-- 
cgit v1.2.3