all interface is now responsive

sites/all/modules/gui/perfart/perfart.pages.inc

@@ -258,8 +258,6 @@ function perfart_get_performances(){
   $count = $count_query->count()->execute();
   pager_default_initialize($count, $limit);
 
-  $data = array();
-
     foreach ($result['node'] as $eff) {
     $eff = node_load($eff->nid);
     //$eff = entity_load('node', array($eff->nid), NULL, FALSE);
@@ -324,6 +322,8 @@ function perfart_get_performances(){
       if(in_array($perf['target_id'], $perfadded))
         continue;
       
+      $item_classes = array();
+
       $perfadded[] = $perf['target_id'];
       
       $perf = node_load($perf['target_id']);
@@ -386,6 +386,9 @@ function perfart_get_performances(){
         // dsm($image, 'image');
         $date['thumb'] = l($image, $node_path, array('html'=>true));
         $content .= $date['thumb'];
+        $item_classes[] = "with-image";
+      }else{
+        $item_classes[] = "without-image";
       }
 
       // $content .= '</div>';
@@ -445,11 +448,20 @@ function perfart_get_performances(){
       pager_default_initialize($count, $limit);
 
       // $data[] = $date;
-      $list['items'][] = $content;
+      
+      $item = array(
+        'data' => $content,
+        // 'attributes' => array(
+          'class' => $item_classes,
+        // ),
+      );
+      $list['items'][] = $item;
       
     }
   }
 
+  $list['attributes']['id'] = "home-performances-list";
+
   // dsm($data, '$data');
   return theme('item_list', $list) . theme('pager');
 }

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

@@ -458,6 +458,7 @@ body {
   width: 100%;
   height: 100%;
   /*  background-color: red;*/
+  overflow-y: hidden;
 }
 #container {
   width: 100%;
@@ -517,7 +518,7 @@ html.oldie #header #header-blocks {
   margin: 0;
 }
 #header ul.language-switcher-locale-url li {
-  padding-right: 10px;
+  padding-right: 0;
 }
 #header ul.language-switcher-locale-url li.active {
   display: none;
@@ -621,10 +622,10 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
 /** RESPONSIVE */
 @media (min-width: 799px) {
   #header .logo {
-    width: 35%;
+    width: 340px;
   }
   #header-blocks {
-    width: 63%;
+    width: calc(100% - 340px);
     position: absolute;
     bottom: 0;
     right: 0;
@@ -644,7 +645,7 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
     display: inline;
   }
   #header-blocks .region:not(:first-child) {
-    margin-left: 1.1em;
+    margin-left: 0.5em;
   }
   html.oldie #header-blocks .region {
     float: left;
@@ -741,7 +742,7 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
   html.oldie #header-blocks ul li a {
     font-size: 9px;
   }
-  body.burger-shown #header-blocks {
+  body.burger-header-shown #header-blocks {
     transform: translateX(0);
   }
   .burger-icon {
@@ -755,6 +756,9 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
     z-index: 20;
     cursor: pointer;
   }
+  .burger-icon.sidebar-first {
+    background-color: #A5A5A5;
+  }
   .burger-icon span {
     display: block;
     background: #000;
@@ -786,14 +790,17 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
     bottom: 2px;
     margin-bottom: -2px;
   }
-  body.burger-shown .burger-icon span {
+  body.burger-header-shown .burger-icon.header span,
+  body.burger-sidebar-first-shown .burger-icon.sidebar-first span {
     background: transparent;
   }
-  body.burger-shown .burger-icon:before {
+  body.burger-header-shown .burger-icon.header:before,
+  body.burger-sidebar-first-shown .burger-icon.sidebar-first:before {
     top: 55%;
     transform: rotate(45deg);
   }
-  body.burger-shown .burger-icon:after {
+  body.burger-header-shown .burger-icon.header:after,
+  body.burger-sidebar-first-shown .burger-icon.sidebar-first:after {
     bottom: 55%;
     transform: rotate(-45deg);
   }
@@ -869,22 +876,78 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
 /** MAIN */
 #main {
   height: 97%;
+  position: relative;
   /** SIDEBAR FIRST */
   /** CENTER */
   /** SIDEBAR SECOND */
 }
 #main #sidebar-first {
-  display: moz-inline-stack;
-  display: inline-block;
-  vertical-align: top;
-  zoom: 1;
-  *display: inline;
-  /*	margin-right:-.25em;*/
-  width: 29%;
+  height: 99%;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
-.ie7 #main #sidebar-first,
-.ie8 #main #sidebar-first {
-  display: inline;
+#main #sidebar-first .block-menu-block,
+#main #sidebar-first .block-menu-block > .content {
+  height: 100%;
+}
+#main #sidebar-first #myList-nav {
+  max-height: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+}
+#main #sidebar-first #myList-nav > div {
+  flex: 0 0 auto;
+  width: 1em;
+}
+#main #sidebar-first #myList-nav > div .ln-letters {
+  margin: 0;
+}
+#main #sidebar-first #myList-nav > ul {
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  width: calc(100% - 1em);
+  max-height: 100%;
+  padding-left: 2em;
+  padding-right: 2em;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin-top: 2em;
+}
+@media (min-width: 799px) {
+  #main #sidebar-first {
+    display: moz-inline-stack;
+    display: inline-block;
+    vertical-align: top;
+    zoom: 1;
+    *display: inline;
+    /*	margin-right:-.25em;*/
+    width: 300px;
+  }
+  .ie7 #main #sidebar-first,
+  .ie8 #main #sidebar-first {
+    display: inline;
+  }
+}
+@media (max-width: 799px) {
+  #main #sidebar-first {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 70%;
+    background-color: #A5A5A5;
+    z-index: 10;
+    transition: transform 0.5s ease-in-out;
+    transform: translateX(calc(-100% + 2em));
+  }
+  #main #sidebar-first #myList-nav ul {
+    overflow-y: hidden;
+  }
+  body.burger-sidebar-first-shown #main #sidebar-first {
+    transform: translateX(0);
+  }
+  body.burger-sidebar-first-shown #main #sidebar-first #myList-nav ul {
+    overflow-y: auto;
+  }
 }
 #main ul li.leaf {
   list-style-image: none;
@@ -978,9 +1041,25 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
 .not-front.node-type-temoignage #main #center,
 .not-front.node-type-document-video #main #center,
 .not-front.node-type-biographie #main #center {
-  margin-left: 75px;
-  width: 550px;
-  padding-top: 20px;
+  box-sizing: border-box;
+}
+@media (min-width: 799px) {
+  .not-front.node-type-page #main #center,
+  .not-front.node-type-temoignage #main #center,
+  .not-front.node-type-document-video #main #center,
+  .not-front.node-type-biographie #main #center {
+    width: calc(99% - 300px);
+    padding: 20px;
+  }
+}
+@media (max-width: 799px) {
+  .not-front.node-type-page #main #center,
+  .not-front.node-type-temoignage #main #center,
+  .not-front.node-type-document-video #main #center,
+  .not-front.node-type-biographie #main #center {
+    width: 100%;
+    padding: 0.5em 3em;
+  }
 }
 .not-front.node-type-page #main #center #content p,
 .not-front.node-type-temoignage #main #center #content p,
@@ -1876,7 +1955,7 @@ html.no-js body.front .item-list .pager li,
 html.classic-nav body.front .item-list .pager li {
   background-color: transparent;
   color: #000;
-  border-left: 1px solid #000;
+  padding: 0 0.25em;
 }
 html.no-js body.front .item-list .pager li a,
 html.classic-nav body.front .item-list .pager li a,
@@ -1896,7 +1975,6 @@ html.classic-nav body.front .item-list ul li {
   margin-bottom: 1em;
   padding-right: 1em;
   padding-left: 0.5em;
-  border-left: 3px solid #A5A5A5;
 }
 html.no-js body.front .item-list li a,
 html.classic-nav body.front .item-list li a,
@@ -1908,6 +1986,71 @@ html.no-js body.front .item-list ul li a:visited,
 html.classic-nav body.front .item-list ul li a:visited {
   color: #A5A5A5;
 }
+html.no-js body.front #home-performances-list,
+html.classic-nav body.front #home-performances-list {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  align-items: space-between;
+}
+html.no-js body.front #home-performances-list > li,
+html.classic-nav body.front #home-performances-list > li {
+  padding: 0 0.5em 0.5em;
+  margin: 0.5em;
+}
+html.no-js body.front #home-performances-list > li.with-image,
+html.classic-nav body.front #home-performances-list > li.with-image {
+  flex: 0 1 auto;
+}
+html.no-js body.front #home-performances-list > li.without-image,
+html.classic-nav body.front #home-performances-list > li.without-image {
+  flex: 1 1 auto;
+}
+html.no-js body.front #home-performances-list > li h4,
+html.classic-nav body.front #home-performances-list > li h4,
+html.no-js body.front #home-performances-list > li h5,
+html.classic-nav body.front #home-performances-list > li h5 {
+  max-width: 200px;
+  margin: 0.5em 0;
+  line-height: 1.1;
+}
+html.no-js body.front #home-performances-list > li h4 a,
+html.classic-nav body.front #home-performances-list > li h4 a,
+html.no-js body.front #home-performances-list > li h5 a,
+html.classic-nav body.front #home-performances-list > li h5 a {
+  line-height: 1.1;
+}
+html.no-js body.front #home-performances-list > li .date > a,
+html.classic-nav body.front #home-performances-list > li .date > a {
+  display: block;
+}
+html.no-js body.front #home-performances-list > li figure,
+html.classic-nav body.front #home-performances-list > li figure {
+  display: inline-block;
+  position: relative;
+}
+html.no-js body.front #home-performances-list > li figure img.image,
+html.classic-nav body.front #home-performances-list > li figure img.image {
+  max-width: 100%;
+}
+html.no-js body.front #home-performances-list > li figure img.blank,
+html.classic-nav body.front #home-performances-list > li figure img.blank {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+html.no-js body.front #home-performances-list > li figure figcaption,
+html.classic-nav body.front #home-performances-list > li figure figcaption {
+  display: none;
+}
+@media (max-width: 799px) {
+  html.no-js body.front #home-performances-list > li,
+  html.classic-nav body.front #home-performances-list > li {
+    flex: 0 0 auto;
+  }
+}
 html.no-js body.node-type-performance #main,
 html.classic-nav body.node-type-performance #main {
   background-color: #D3D3D3;
@@ -1944,6 +2087,24 @@ html.no-js body.node-type-performance #main,
 html.classic-nav body.node-type-performance #main {
   background-color: #F2F2F2;
 }
+html.no-js body.node-type-performance #main #center #content .node.type-performance > .content,
+html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+html.no-js body.node-type-performance #main #center #content .node.type-performance > .content > section.field,
+html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content > section.field {
+  flex: 0 0 auto;
+  max-width: 45%;
+  margin: 0.5em;
+}
+html.no-js body.node-type-performance #main #center #content .node.type-performance > .content > section.field.field-name-field-images,
+html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content > section.field.field-name-field-images {
+  flex: 1 1 100%;
+  max-width: 100%;
+}
 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content h1.node-title,
 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content h1.node-title {
   margin: 0;
@@ -1951,9 +2112,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
   -moz-font-feature-settings: "calt=0,liga=0";
   font-weight: 900;
   font-size: 24px;
-  width: 300px;
-  /*    background-color:rgba(255,0,0,0.1);*/
-  padding: 0;
 }
 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-label,
 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-label {
@@ -1966,28 +2124,16 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
 }
 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-personne,
 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-personne {
-  width: 200px;
-  /*    background-color:rgba(255,0,0,0.1);*/
-  padding: 0;
   font-family: "MuseoSans", Arial, sans-serif;
   -moz-font-feature-settings: "calt=0,liga=0";
   font-weight: 500;
   font-size: 12px;
   text-transform: uppercase;
 }
-html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-type-textauthor,
-html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-type-textauthor,
-html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-type-text-long,
-html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-type-text-long {
-  width: 400px;
-  /*    background-color:rgba(255,0,0,0.1);*/
-  padding: 0;
-}
 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-type-textauthor .field-item,
 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-type-textauthor .field-item,
 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-type-text-long .field-item,
 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-type-text-long .field-item {
-  max-height: 300px;
   overflow: auto;
   font-family: "MuseoSans", Arial, sans-serif;
   -moz-font-feature-settings: "calt=0,liga=0";
@@ -2006,25 +2152,17 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
   -moz-font-feature-settings: "calt=0,liga=0";
   font-weight: 500;
   font-size: 16px;
-  width: 300px;
-  /*    background-color:rgba(255,0,0,0.1);*/
-  padding: 0;
+}
+html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images > .field-items,
+html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images > .field-items {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  align-items: stretch;
 }
 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item,
 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item {
-  display: moz-inline-stack;
-  display: inline-block;
-  vertical-align: top;
-  zoom: 1;
-  *display: inline;
-  /*	margin-right:-.25em;*/
-  margin: 0 1em 1em 0;
-}
-.ie7 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item,
-.ie7 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item,
-.ie8 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item,
-.ie8 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item {
-  display: inline;
+  flex: 1 0 auto;
 }
 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-type-de-performance,
 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-type-de-performance {
@@ -2032,9 +2170,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
   -moz-font-feature-settings: "calt=0,liga=0";
   font-weight: 500;
   font-size: 16px;
-  width: 300px;
-  /*    background-color:rgba(255,0,0,0.1);*/
-  padding: 0;
 }
 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-tags-libre,
 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-tags-libre {
@@ -2042,15 +2177,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
   -moz-font-feature-settings: "calt=0,liga=0";
   font-weight: 500;
   font-size: 12px;
-  width: 200px;
-  /*    background-color:rgba(255,0,0,0.1);*/
-  padding: 0;
-}
-html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-effectuation,
-html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-effectuation {
-  width: 200px;
-  /*    background-color:rgba(255,0,0,0.1);*/
-  padding: 0;
 }
 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-effectuation h1,
 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-effectuation h1 {
@@ -2065,9 +2191,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
 }
 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-document-video,
 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-document-video {
-  width: 400px;
-  /*    background-color:rgba(255,0,0,0.1);*/
-  padding: 0;
   font-family: "MuseoSans", Arial, sans-serif;
   -moz-font-feature-settings: "calt=0,liga=0";
   font-weight: 500;
@@ -2075,9 +2198,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
 }
 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-document,
 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-document {
-  width: 300px;
-  /*    background-color:rgba(255,0,0,0.1);*/
-  padding: 0;
   font-family: "MuseoSans", Arial, sans-serif;
   -moz-font-feature-settings: "calt=0,liga=0";
   font-weight: 500;
@@ -2085,9 +2205,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
 }
 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-objet,
 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-objet {
-  width: 300px;
-  /*    background-color:rgba(255,0,0,0.1);*/
-  padding: 0;
   font-family: "MuseoSans", Arial, sans-serif;
   -moz-font-feature-settings: "calt=0,liga=0";
   font-weight: 500;
@@ -2096,25 +2213,15 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content figure,
 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content figure {
   position: relative;
+  height: auto!important;
+  margin: 0.5em;
 }
 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content figure figcaption,
 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content figure figcaption {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 96%;
-  padding: 2%;
   background-color: rgba(255, 255, 255, 0.8);
-  -moz-opacity: 0;
-  -khtml-opacity: 0;
-  -webkit-opacity: 0;
-  opacity: 0;
-  -webkit-transition: opacity 0.5s ease-out;
-  -moz-transition: opacity 0.5s ease-out;
-  -o-transition: opacity 0.5s ease-out;
-  transition: opacity 0.5s ease-out;
   color: #000;
   font-size: 10px;
+  max-width: 100%;
 }
 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content figure .blank,
 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content figure .blank {
@@ -2124,13 +2231,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
   width: 100%;
   height: 100%;
 }
-html.no-js body.node-type-performance #main #center #content .node.type-performance > .content figure:hover figcaption,
-html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content figure:hover figcaption {
-  -moz-opacity: 1;
-  -khtml-opacity: 1;
-  -webkit-opacity: 1;
-  opacity: 1;
-}
 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content > .field,
 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content > .field {
   display: inline-block;
@@ -2145,17 +2245,6 @@ html.no-js body.node-type-performance #main #center #content .node.type-performa
 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents-sonor,
 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents,
 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents {
-  display: block;
-  border: none;
-  border-top: 2px solid #e4e4e4;
-  margin-top: 1em;
-}
-html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-effectuations .field-item .field,
-html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-effectuations .field-item .field,
-html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents-sonor .field-item .field,
-html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents-sonor .field-item .field,
-html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents .field-item .field,
-html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents .field-item .field {
   display: inline-block;
   vertical-align: top;
   padding-left: 0.5em;

sites/all/themes/gui/perfarttimeline/js/script.js

@@ -24,14 +24,18 @@ Drupal.behaviors.init_theme.attach = function (context) {
       }
     });
 
-  if(!$('body').is('.front') && !$('body').is('.node-type-performance')){
-    $('#main').jScrollPane({autoReinitialise:true, hijackInternalLinks:true});
-  }
+  // DON'T USE JSCROLLPANE FOR NORMAL PAGES ANYMORE
+  // if(!$('body').is('.front') && !$('body').is('.node-type-performance')){
+  //   $('#main').jScrollPane({autoReinitialise:true, hijackInternalLinks:true});
+  // }
   
   $('#block-menu-block-2 ul.menu').listnav({cookieName:'test', attribute:'nom'});
 
-  $('.burger-icon').click(function(){
-    $('body').toggleClass('burger-shown');
+  $('.burger-icon.header').click(function(){
+    $('body').toggleClass('burger-header-shown');
+  });
+  $('.burger-icon.sidebar-first').click(function(){
+    $('body').toggleClass('burger-sidebar-first-shown');
   });
 };
 

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

@@ -105,4 +105,5 @@ body>img{display: none;}
       }
     }
   }
-}
+}
+

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

@@ -15,6 +15,7 @@ html, body{
   position:relative; 
   width:100%; height:100%;
 /*  background-color: red;*/
+  overflow-y: hidden;
 }
 
 
@@ -51,7 +52,7 @@ html, body{
   
   ul.language-switcher-locale-url{
     padding:0; margin:0;
-    li{padding-right:10px;}
+    li{padding-right:0;}
     li.active{display:none;}
     a{.fs-header;}
   }
@@ -82,14 +83,14 @@ html, body{
 /** RESPONSIVE */
 @media (min-width:799px) {
   #header .logo {
-    width:35%;
+    width:340px;
   }
   #header-blocks{
     // background-color: blue;
-    width:63%; position:absolute; bottom:0; right:0; text-align: right; height:27px;
+    width:calc(100% - 340px); position:absolute; bottom:0; right:0; text-align: right; height:27px;
     .region{
       .inlineblock;
-      &:not(:first-child){ margin-left:1.1em; }
+      &:not(:first-child){ margin-left:0.5em; }
       // don't know why but here display:inline; deosn't work on ie8 …
       html.oldie &{float:left; margin-left:10px;}
     }
@@ -139,7 +140,7 @@ html, body{
 
     transition: transform 0.5s ease-in-out;
     transform: translateX(150%);
-    body.burger-shown &{
+    body.burger-header-shown &{
       transform: translateX(0);
     }
   }
@@ -155,6 +156,10 @@ html, body{
     vertical-align: middle;
     z-index: 20;
     cursor: pointer;
+    &.sidebar-first{
+      background-color: @timeline-lighten-color;
+      // top:0; right: 0;
+    }
     span {
       display: block;
       background: #000;
@@ -189,7 +194,8 @@ html, body{
       margin-bottom: -2px;
     }
 
-    body.burger-shown & {
+    body.burger-header-shown &.header,
+    body.burger-sidebar-first-shown &.sidebar-first {
       span {
         background: transparent;
       }
@@ -231,16 +237,79 @@ html, body{
 /** MAIN */
 #main{
   height:97%;
-
-
+  position: relative;
+  // overflow-x: hidden;
+  // overflow-y: auto;
+  // display: flex;
+  // flex-flow: column nowrap;
 
   /** SIDEBAR FIRST */
   #sidebar-first{
-    .inlineblock; width: 29%;
-  }
+    height: 99%;
+    // min-height: 75%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    
+    .block-menu-block{
+      &, &>.content{
+
+        height: 100%; // this is not working, why ?
+      }
+    }
+    #myList-nav{
+      max-height: 100%;
+      display: flex;
+      flex-flow: row nowrap;
+      >div{
+        flex:0 0 auto;
+        width: 1em;
+        .ln-letters{
+          margin: 0;
+        }
+      }
+      >ul{
+        flex:0 0 auto;
+        box-sizing: border-box;
+        width:calc(100% - 1em);
+        max-height: 100%;
+        padding-left: 2em;
+        padding-right: 2em;
+        overflow-x: hidden;
+        overflow-y: auto;
+        margin-top: 2em;
+      }
+    }
+    
+
+    @media (min-width:799px) {
+      .inlineblock; width: 300px;
+    }
+    @media (max-width:799px) {
+      position: absolute;
+      top:0;
+      left: 0;
+      width:70%;
+      background-color: @timeline-lighten-color;
+      z-index: 10;
+
 
+      transition: transform 0.5s ease-in-out;
+      transform: translateX(calc(-100% + 2em));
+      #myList-nav ul{
+        overflow-y: hidden;
+      }
+      body.burger-sidebar-first-shown &{
+        transform: translateX(0);
+        #myList-nav ul{
+          overflow-y: auto;
+        }
+      }
+    }
+  
+  }
+  
 
-        ul li.leaf{
+  ul li.leaf{
     list-style-image:none;
     list-style-type: none;
     font-size: 12px;
@@ -308,20 +377,23 @@ html, body{
     .not-front.node-type-temoignage &, 
     .not-front.node-type-document-video &, 
     .not-front.node-type-biographie &{
-      margin-left:75px;
-      width:550px;
-      padding-top:20px;
+      box-sizing: border-box;
+      @media (min-width:799px) {
+        // margin-left:75px;
+        width:calc(99% - 300px);
+        padding:20px;  
+      }
+      @media (max-width:799px) {
+        width: 100%;
+        padding:0.5em 3em;  
+      }
       #content{
-      p {font-size:12px; color:#000; line-height:1.4;}
-      a{text-decoration:none; font-size:12px;}
-      a:visited{font-weight:700}
-      a:hover{font-weight:700}
-      a:active{font-weight:700}
-
-
-        
+        p {font-size:12px; color:#000; line-height:1.4;}
+        a{text-decoration:none; font-size:12px;}
+        a:visited{font-weight:700}
+        a:hover{font-weight:700}
+        a:active{font-weight:700}        
       }
-
     }
     
   }
@@ -752,13 +824,13 @@ html.no-js, html.classic-nav{
   body.front{
     .generale-design;
 
-
     .item-list {
       .pager li{
         background-color:transparent;
         a,a:visited{color:#000;}
         color:#000;
-        border-left:1px solid #000;
+        // border-left:1px solid #000;
+        padding: 0 0.25em;
       }
       li, ul li {
         a,a:visited{color:#A5A5A5;}
@@ -770,11 +842,59 @@ html.no-js, html.classic-nav{
         margin-bottom:1em;
         padding-right:1em;
         padding-left:0.5em;
-        border-left:3px solid #A5A5A5;
+        // border-left:3px solid #A5A5A5;
         
         
       }
     }
+
+    #home-performances-list{
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: space-between;
+      align-items: space-between;
+      >li{
+        &.with-image{
+          flex: 0 1 auto;
+        }
+        &.without-image{
+          flex: 1 1 auto;
+        }
+        padding:0 0.5em 0.5em;
+        margin: 0.5em;
+        h4, h5{
+          max-width: 200px;
+          margin: 0.5em 0; line-height: 1.1;
+          a{line-height: 1.1;}
+        }
+        .date > a{
+          display: block;
+        }
+        figure{
+          display: inline-block;
+          position: relative;
+          img.image{
+            max-width: 100%;
+          }
+          img.blank{
+            position: absolute;
+            top:0; left:0;
+            width:100%; height:100%;
+  
+          }
+          figcaption{
+            display: none;
+          }
+        }
+        
+      }
+      @media (max-width:799px) {
+        >li{
+          flex: 0 0 auto; 
+        }
+
+      }
+    }
   }
 
   //FICHES PERFORMANCE//
@@ -786,7 +906,21 @@ html.no-js, html.classic-nav{
       #center #content {
 
         .node.type-performance>.content{
-
+          display: flex;
+          flex-flow: row wrap;
+          justify-content: space-between;
+          align-items: flex-start;
+          >section.field{
+            // outline: 1px solid #036;
+            flex:0 0 auto;
+            max-width: 45%;
+            margin:0.5em;
+            &.field-name-field-images{
+              flex: 1 1 100%;
+              max-width: 100%;
+            }
+          }
+          
           .bordered-block(){
             display: inline-block;
             vertical-align: top;
@@ -800,32 +934,32 @@ html.no-js, html.classic-nav{
             display:block; border:none;
           }
 
-          @cel:100px;
-          @padd:0;
-          .cel(@n){
-            width:(@cel* @n) - @padd*2;
-        /*    background-color:rgba(255,0,0,0.1);*/
-            padding:@padd;
-            //.bl(1px, rgba(255,0,0,0.1));
-          }
+        //   @cel:100px;
+        //   @padd:0;
+        //   .cel(@n){
+        //     width:(@cel* @n) - @padd*2;
+        // /*    background-color:rgba(255,0,0,0.1);*/
+        //     padding:@padd;
+        //     //.bl(1px, rgba(255,0,0,0.1));
+        //   }
           
           h1.node-title{
             .m(0);
             .fs-perfnode-title;
-            .cel(3);
+            // .cel(3);
           }
           .field-label{.fs-perfnode-label; color:@timeline-lighten-color;}
 
           .field-personne{
-            .cel(2);
+            // .cel(2);
             .fs-perfnode-personne;
           }
 
 
           .field-type-textauthor, .field-type-text-long{
-            .cel(4);
+            // .cel(4);
             .field-item{
-              max-height:@cel*3;
+              // max-height:@cel*3;
               overflow:auto;
               // article, address, p{
                 .fs-personne-texte;
@@ -836,57 +970,70 @@ html.no-js, html.classic-nav{
           }
           .field-name-field-serie{
             .fs-perfnode-serie;
-            .cel(3);
+            // .cel(3);
           }
 
           .field-name-field-images{
+            >.field-items{
+              display: flex;
+              flex-flow: row wrap;
+              justify-content: space-between;
+              align-items: stretch;
+            }
             .field-item{
-              .inlineblock; margin:0 1em 1em 0;
+              // .inlineblock; margin:0 1em 1em 0;
+              flex:1 0 auto;
+              // max-width: 33%;
             }
           }
 
           .field-name-field-type-de-performance{
             .fs-perfnode-serie;
-            .cel(3);
+            // .cel(3);
           }
           
           .field-name-field-tags-libre{
             .fs-personne-texte;
-            .cel(2);
+            // .cel(2);
           }
           
           .node-effectuation{
-            .cel(2);
+            // .cel(2);
             h1{.m(0);}
             .field-item{.fs-perfnode-serie;}
           }
           
           .node-document-video{
-            .cel(4);
+            // .cel(4);
             .fs-personne-texte;
           }
 
           .node-document{
-            .cel(3);
+            // .cel(3);
             .fs-personne-texte;
           }
 
           .node-objet{
-            .cel(3);
+            // .cel(3);
             .fs-personne-texte;
           }
 
           figure{
             position: relative;
+            // width:auto!important; 
+            height: auto!important;
+            margin: 0.5em;
             figcaption{
-              position:absolute; right:0; bottom:0; 
-              width:96%; padding:2%;
+            //   position:absolute; right:0; bottom:0; 
+            //   width:96%; padding:2%;
               background-color: rgba(255,255,255,0.8); 
-              .opacity(0); .transition(opacity, 0.5s, ease-out);
-              color:#000; .10;
+            //   .opacity(0); .transition(opacity, 0.5s, ease-out);
+              color:#000; 
+              .10;
+              max-width: 100%;
             }
             .blank{ position:absolute; top:0; left:0; width:100%; height:100%;}
-            &:hover{figcaption{.opacity(1);}}
+            // &:hover{figcaption{.opacity(1);}}
           }
 
           >.field{
@@ -896,14 +1043,15 @@ html.no-js, html.classic-nav{
           .field-name-field-effectuations,
           .field-name-field-documents-sonor,
           .field-name-field-documents{
-            .non-bordered;
-            border-top: 2px solid #e4e4e4;
-            margin-top:1em;
-            .field-item{
-              .field{
-                .bordered-block;
-              }
-            }
+            .bordered-block;
+            // .non-bordered;
+            // border-top: 2px solid #e4e4e4;
+            // margin-top:1em;
+            // .field-item{
+            //   .field{
+            //     .bordered-block;
+            //   }
+            // }
           }
 
           .field-name-field-effectuations{
@@ -927,16 +1075,15 @@ html.no-js, html.classic-nav{
 
 }
 
- //EFFECTUATIONS, DOCUMENTS, OBJETS, ETC.//
-  body.node-type-document, .node-type-document-sonor, .node-type-object, .page-taxonomy-term {
-    .generale-design;
-        #center #content {
-          width: 720px;
-          img {margin:1em 0 1em 0;}
-          figure {position:relative;}
-          img.blank{position:absolute; top:0; left:0;}
-          figcaption {font-weight: 300; font-size:11px; width:250px; margin-bottom:1em; } 
-          font-size:12px;
-        }
-  }  
-
+//EFFECTUATIONS, DOCUMENTS, OBJETS, ETC.//
+body.node-type-document, .node-type-document-sonor, .node-type-object, .page-taxonomy-term {
+  .generale-design;
+      #center #content {
+        width: 720px;
+        img {margin:1em 0 1em 0;}
+        figure {position:relative;}
+        img.blank{position:absolute; top:0; left:0;}
+        figcaption {font-weight: 300; font-size:11px; width:250px; margin-bottom:1em; } 
+        font-size:12px;
+      }
+}  

sites/all/themes/gui/perfarttimeline/templates/page.tpl.php

@@ -76,7 +76,7 @@
   </hgroup>		
 
 	<?php if ($page['headerblock_left'] || $page['headerblock_middle'] || $page['headerblock_right']): ?>
-		<div class="burger-icon"><span/></div>
+		<div class="burger-icon header"><span/></div>
 		<div id="header-blocks">
 			<?php print render($page['headerblock_left']); ?>
 			<?php print render($page['headerblock_middle']); ?>

sites/all/themes/gui/perfarttimeline/templates/region--sidebar-first.tpl.php

@@ -0,0 +1,34 @@
+<?php
+
+/**
+ * @file
+ * Default theme implementation to display a region.
+ *
+ * Available variables:
+ * - $content: The content for this region, typically blocks.
+ * - $classes: String of classes that can be used to style contextually through
+ *   CSS. It can be manipulated through the variable $classes_array from
+ *   preprocess functions. The default values can be one or more of the following:
+ *   - region: The current template type, i.e., "theming hook".
+ *   - region-[name]: The name of the region with underscores replaced with
+ *     dashes. For example, the page_top region would have a region-page-top class.
+ * - $region: The name of the region variable as defined in the theme's .info file.
+ *
+ * Helper variables:
+ * - $classes_array: Array of html class attribute values. It is flattened
+ *   into a string within the variable $classes.
+ * - $is_admin: Flags true when the current user is an administrator.
+ * - $is_front: Flags true when presented in the front page.
+ * - $logged_in: Flags true when the current user is a logged-in member.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_region()
+ * @see template_process()
+ */
+?>
+<?php if ($content): ?>
+  <section class="<?php print $classes; ?>"<?php print $attributes; ?>>
+    <div class="burger-icon sidebar-first"><span/></div>  
+    <?php print $content; ?>
+  </section>
+<?php endif; ?>