Fix ui.js thingy ✨ and add info message on the demo page

demo.html

@@ -111,7 +111,10 @@ <h2>Demos</h2>
     <li>Manipulates color</li>
   </ul>
 
-
+   <div class="alert">
+    <p>It happens that this page <strong>needs a refresh</strong> in order to get the colorify.js script working.</p>
+    <p>There is a lot of images to process on this demo page, and sometimes, the script cannot perform the operations as fast as an image processing on a server would do.</p>
+  </div>
 
   <section id="demoDefault" class="demo">    
     <div class="sample">

src/ui.js

@@ -26,12 +26,18 @@ window.onload = function(e) {
  isSmall()
 } 
 
+window.addEventListener('resize', isSmall, false);
+
 function isSmall(){
   var w = document.documentElement.clientWidth;
   if(w<=768){
     document.querySelector('nav').classList.add('closed')
     document.querySelector('#closeNav .icon').classList.add('flip')
   }
+   if(w>=768){
+    document.querySelector('nav').classList.remove('closed')
+    document.querySelector('#closeNav .icon').classList.remove('flip')
+  }
 }
 
 document.getElementById('closeNav').addEventListener('click', function(){

styles/_layout.scss

@@ -92,6 +92,10 @@ nav .hero-header {
   z-index: 3;
   top: 0; 
 
+  @media (max-width: 768px) {
+    border-right: 1px solid #CCC;
+  }
+
 
 
   [class$="-block"] {

styles/main.css

@@ -253,6 +253,10 @@ nav .hero-header {
   background-image: linear-gradient(to right, #f19c40 20%, #e2544b 20%, #e2544b 40%, #b455b5 40%, #b455b5 60%, #3993e2 60%, #3993e2 80%, #11c966 80%, #11c966 100%);
   z-index: 3;
   top: 0; }
+  @media (max-width: 768px) {
+    header#header,
+    nav .hero-header {
+      border-right: 1px solid #CCC; } }
   header#header [class$="-block"],
   nav .hero-header [class$="-block"] {
     display: block;