Zen mode

4 files changed, 39 insertions, 1 deletions

diff --git a/design/contenu.css b/design/contenu.css
index 459ab73..8f0e10d 100755
--- a/design/contenu.css
+++ b/design/contenu.css
@@ -66,6 +66,7 @@ article
     font-size:1em;
     padding-right:5%;
     padding-left:5%;
+    transition: margin-left 0.5s ease-out 0.25s;
 
     border: 1px solid #eaeaea;
     border: 1px solid rgba(51, 51, 51, 0.1);
@@ -73,6 +74,10 @@ article
     margin-top: 50px;
     margin-bottom: 50px;
   }
+  article.zen-mode {
+    margin-left: 7%;
+    transition: margin-left 0.5s ease-out 0.25s;
+  }
 }
 
 @media only screen and (min-width: 768px) {
diff --git a/design/sommaire.css b/design/sommaire.css
index 6dea09c..8fe78b7 100755
--- a/design/sommaire.css
+++ b/design/sommaire.css
@@ -56,11 +56,15 @@
     left: 0px;
     height: 100%;
     width: 290px;
+    transition: left 0.5s ease-in 0.25s;
     text-align: center;
     /*background: none repeat scroll 0% 0% #F5F6F5;*/
     background:#FFF;
     border-right: 3px solid rgba(51, 51, 51, 0.1);
-
+  }
+  #side-bar.hidden {
+    left: -290px;
+    transition: left 0.5s ease-out 0.15s;
   }
 }
 #side-bar h1 {
diff --git a/headers.m4 b/headers.m4
index 33f8371..9f0927a 100644
--- a/headers.m4
+++ b/headers.m4
@@ -5,5 +5,6 @@
     <link rel="canonical" href="CANONIC"/>
     <link rel="shortcut icon" type="image/svg" href="/res/ache.ico" />
     <style>@import url("/design/design.css");</style>
+    <script src="/res/zen.js" defer></script>
     <meta name= "description" content="Site d'ache : Articles et présentation de mes projets" />
 </head>
diff --git a/res/zen.js b/res/zen.js
new file mode 100644
index 0000000..a61bf79
--- /dev/null
+++ b/res/zen.js
@@ -0,0 +1,28 @@
+'use strict';
+
+window.addEventListener("scroll", () => {
+  const articles = document.getElementsByTagName('article');
+  const header = document.getElementById('side-bar');
+
+  if(window.pageYOffset >= 500){
+    if( header ) {
+      header.classList.add('hidden');
+    }
+    if( articles ) {
+      console.log(articles);
+      Array.from(articles).forEach( (e) => {
+        console.log(e);
+        e.classList.add('zen-mode');
+      });
+    }
+  } else {
+    if( header ) {
+      header.classList.remove('hidden');
+    }
+    if( articles ) {
+      Array.from(articles).forEach( (e) => {
+        e.classList.remove('zen-mode');
+      });
+    }
+  }
+});