4 files changed, 25 insertions, 31 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;
diff --git a/src/js/zen.js b/src/js/zen.js
index e2e7035..05ec6b3 100644
--- a/src/js/zen.js
+++ b/src/js/zen.js
@@ -1,8 +1,7 @@
 'use strict';
 
-const articles = document.getElementsByTagName('article');
-const header = document.getElementById('side-bar');
 const toggleArrow = document.getElementById('harr');
+const initValue = document.body.style.getPropertyValue('--width_panel_bis');
 
 toggleArrow.addEventListener('click', () => {
   if (toggleArrow.classList.contains('hide_arrow_off')) {
@@ -17,32 +16,11 @@ toggleArrow.addEventListener('click', () => {
 });
 
 function hideAbout() {
-  if (header && !header.classList.contains('hidden')) {
-    header.classList.add('hidden');
-
-    if (articles) {
-      [...articles].forEach(e => {
-        e.classList.add('zen-mode');
-      });
-    }
-  }
+  document.body.style.setProperty('--width_panel_bis', '0px');
 }
 
 function showAbout() {
-  if (header && header.classList.contains('hidden')) {
-    header.classList.remove('hidden');
-    if (articles) {
-      [...articles].forEach(e => {
-        e.classList.remove('zen-mode');
-        e.classList.add('zen-mode-disabling');
-      });
-      setTimeout(() => {
-        [...articles].forEach(e => {
-          e.classList.remove('zen-mode-disabling');
-        });
-      }, 1000);
-    }
-  }
+  document.body.style.setProperty('--width_panel_bis', initValue);
 }
 
 window.addEventListener('scroll', () => {