responsive: burger menu ok, started generale layout

sites/all/themes/gui/perfarttimeline/less/fonts.less

@@ -82,7 +82,7 @@ body{
   .MuseoSans; .900; .11; .upper;
 }
 .fs-perfnode-personne(){
-  .MuseoSans; .500; .16; .upper;
+  .MuseoSans; .500; .12; .upper;
 }
 .fs-personne-texte(){
   .MuseoSans; .500; .12;

sites/all/themes/gui/perfarttimeline/less/layout.less

@@ -14,8 +14,10 @@ transition: height, 5s, ease-out;
 */
 }
 
+#main{ height:97%; }
+
 body.layout-intro{
-  #main{ height:97%; }
+  // #main{ height:97%; }
   
   #perfnode{ height:0%!important; }
   
@@ -31,7 +33,7 @@ body.layout-intro{
 
 body.layout-timeline{
   #main{ 
-    height:97%; 
+    // height:97%; 
     #content, #center .page-title{height:0%;}
   }
   
@@ -50,7 +52,7 @@ body.layout-timeline{
 
 body.layout-perfnode{
   #main{ 
-    height:97%; 
+    // height:97%; 
     #content, #center .page-title{height:0%;}
   }
   
@@ -65,3 +67,42 @@ body.layout-perfnode{
   #timeline-loader{ display:none; }
 }
 
+body>img{display: none;}
+
+@media (max-width:799px) {
+  body{
+    overflow: hidden!important;
+  }
+  #container{
+    margin: 0!important;
+    width: 100vw!important;
+    height: 100vh!important;
+    overflow: hidden;
+    &>.inner{
+      padding:0!important;
+      width:100%!important;
+      height: 100vh!important;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      #header{
+        height: 3vh;
+        flex: 0 0 auto;
+        height: auto;
+        padding:0.5em;
+        box-sizing: border-box;
+      }
+      #main{
+        flex: 0 0 auto;
+        overflow-x: hidden;
+        overflow-y: auto;
+        height: 96vh;
+        box-sizing: border-box;
+        #center{
+          display: block;
+          height: auto;
+        }
+      }
+    }
+  }
+}

sites/all/themes/gui/perfarttimeline/less/styles.less

@@ -21,7 +21,11 @@ html, body{
 #container{
   width:100%; height:100%;
   //width:1000px; height:700px;
-  min-width:1020px; min-height:700px;
+  // todo media query for mobile phone
+
+  // min-width:1020px;
+  min-width: none;
+  min-height:700px;
   .m(0 auto); background-color: #FFF;
   &>.inner{width:96%; height:94%; .p(1.5%);}
 }
@@ -32,7 +36,8 @@ html, body{
   border-bottom:2px solid #000; //.pb(5px); 
   
   .logo{ 
-    width:35%; height:27px; position:relative; bottom:0; left:0;
+    // width:35%; 
+    height:27px; position:relative; bottom:0; left:0;
     html.oldie &{width:49%;}
     h1{
       .fs-header;
@@ -41,25 +46,7 @@ html, body{
   }
   
   #header-blocks{
-    width:63%; position:absolute; bottom:0; right:0; text-align: right; height:27px;
     html.oldie &{width:62%;}
-    // >.wrapper{position:relative; width:100%; height:100%;}
-    .region{
-      .inlineblock;
-      &:not(:first-child){ margin-left:1.1em; }
-      // don't know why but here display:inline; deosn't work on ie8 …
-      html.oldie &{float:left; margin-left:10px;}
-    }
-  }
-
-  ul.menu{
-    padding:0; margin:0;
-    li{
-      .inlineblock; margin:0;
-      &:not(.last){.p(0 6px 0 0);}
-      &.last{.p(0);}
-      a{.fs-header;}
-    }
   } 
   
   ul.language-switcher-locale-url{
@@ -92,6 +79,135 @@ html, body{
   }
   
 }
+/** RESPONSIVE */
+@media (min-width:799px) {
+  #header .logo {
+    width:35%;
+  }
+  #header-blocks{
+    // background-color: blue;
+    width:63%; position:absolute; bottom:0; right:0; text-align: right; height:27px;
+    .region{
+      .inlineblock;
+      &:not(:first-child){ margin-left:1.1em; }
+      // don't know why but here display:inline; deosn't work on ie8 …
+      html.oldie &{float:left; margin-left:10px;}
+    }
+    ul.menu{
+      padding:0; margin:0;
+      li{
+        .inlineblock; margin:0;
+        &:not(.last){.p(0 6px 0 0);}
+        &.last{.p(0);}
+        a{.fs-header;}
+      }
+    }
+  }
+}
+@media (max-width:799px) {
+  #header .logo {
+    width:auto;
+    z-index: 11;
+  }
+  #header-blocks{
+    background-color:white;
+    position:absolute;
+    z-index: 10;
+    bottom:0;
+    right:0;
+    // width:63%;
+    height:27px;
+    text-align: right;
+    .region{
+      background-color: white;
+      padding:0 1em 0 1em;
+      &:first-child{padding-top:2em;}
+      &:last-child{padding-bottom:1em;}
+    }
+    ul{
+      padding:0; margin:0;
+      text-align: right;
+      li{
+        list-style: none;
+        margin:0;
+        padding: 0!important;
+        // &:not(.last){.p(0 6px 0 0);}
+        // &.last{.p(0);}
+        a{.fs-header;}
+      }
+    }
+
+    transition: transform 0.5s ease-in-out;
+    transform: translateX(150%);
+    body.burger-shown &{
+      transform: translateX(0);
+    }
+  }
+  
+  .burger-icon {
+    height: 15px;
+    width: 20px;
+    // margin: 3%;
+    position: absolute;
+    top: 0.5em;
+    right: 0.5em;
+    display: inline-block;
+    vertical-align: middle;
+    z-index: 20;
+    cursor: pointer;
+    span {
+      display: block;
+      background: #000;
+      width: 100%;
+      height: 2px;
+      margin-top: -2px;
+      position: absolute;
+      left: 0;
+      top: 50%;
+    }
+
+    &:before,
+    &:after {
+      content: "";
+      display: block;
+      background: #000;
+      width: 100%;
+      height: 2px;
+      position: absolute;
+      left: 0;
+      transform-origin: center center;
+      transform: rotate(0deg);
+      transition: all 0.3s ease;
+    }
+    &:before {
+      top: 2px;
+      margin-top: -2px;
+    }
+    
+    &:after {
+      bottom: 2px;
+      margin-bottom: -2px;
+    }
+
+    body.burger-shown & {
+      span {
+        background: transparent;
+      }
+      
+      &:before {
+        top: 55%;
+        transform: rotate(45deg);
+      }
+      
+      &:after {
+        bottom: 55%;
+        transform: rotate(-45deg);
+      }
+      
+    }
+  }
+}
+
 
 /** INTRO-MODAL */
 #intro-wrapper{