Zen mode CSS based

3 files changed, 22 insertions, 6 deletions

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;