responsive: burger menu ok, started generale layout

.vscode/launch.json

@@ -0,0 +1,26 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Listen for Xdebug",
+            "type": "php",
+            "request": "launch",
+            "serverSourceRoot":"192.168.0.21",
+            "port": 9001,
+            "pathMappings": {
+                "/var/www/html/performance-art.fr/public_html": "${workspaceFolder}"
+            }
+        },
+        {
+            "name": "Launch currently open script",
+            "type": "php",
+            "request": "launch",
+            "program": "${file}",
+            "cwd": "${fileDirname}",
+            "port": 9001
+        }
+    ]
+}

.vscode/launch_back.json

@@ -0,0 +1,27 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        
+        {
+            "name": "Listen for Xdebug",
+            "type": "php",
+            "request": "launch",
+            "serverSourceRoot":"192.168.0.21",
+            "port": 9001,
+            "pathMappings": {
+                "/var/www/html/d8.materio.com/public_html": "${workspaceFolder}"
+            },
+        },
+        {
+            "name": "Launch currently open script",
+            "type": "php",
+            "request": "launch",
+            "program": "${file}",
+            "cwd": "${fileDirname}",
+            "port": 9001
+        }
+    ]
+}

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

@@ -2,12 +2,36 @@
 /** colors */
 /** jscrollpane */
 .jspScrollable .jspContainer .jspVerticalBar {
-  width: 10px;
-  background-color: #f2f2f2;
+  width: 4px;
+  background-color: #F2F2F2;
 }
-.jspScrollable .jspContainer .jspVerticalBar .jspTrack {
+.jspScrollable .jspContainer .jspHorizontalBar {
+  height: 4px;
+  background-color: #F2F2F2;
+}
+.jspScrollable .jspContainer .jspTrack {
   background-color: transparent;
 }
-.jspScrollable .jspContainer .jspVerticalBar .jspTrack .jspDrag {
-  background-color: #77787b;
+.jspScrollable .jspContainer .jspTrack .jspDrag {
+  background-color: #77787B;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -moz-opacity: 0.6;
+  -khtml-opacity: 0.6;
+  -webkit-opacity: 0.6;
+  opacity: 0.6;
+  -webkit-transition: opacity 0.2s ease-out;
+  -moz-transition: opacity 0.2s ease-out;
+  -o-transition: opacity 0.2s ease-out;
+  transition: opacity 0.2s ease-out;
+}
+.jspScrollable .jspContainer .jspTrack:hover .jspDrag {
+  -moz-opacity: 1;
+  -khtml-opacity: 1;
+  -webkit-opacity: 1;
+  opacity: 1;
 }

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

@@ -1,12 +1,15 @@
 /** COMMONS */
 .Museo {
   font-family: "Museo", Arial, sans-serif;
+  -moz-font-feature-settings: "calt=0,liga=0";
 }
 .MuseoSans {
   font-family: "MuseoSans", Arial, sans-serif;
+  -moz-font-feature-settings: "calt=0,liga=0";
 }
 .MuseoSlab {
   font-family: "MuseoSlab", Arial, sans-serif;
+  -moz-font-feature-settings: "calt=0,liga=0";
 }
 a,
 a:visited {
@@ -15,6 +18,7 @@ a:visited {
 /*a.active, li a.active{color:@main-blue;}*/
 body {
   font-family: "MuseoSans", Arial, sans-serif;
+  -moz-font-feature-settings: "calt=0,liga=0";
   font-size: 16px;
 }
 .8 {

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

@@ -3,6 +3,8 @@
 *
 */
 /** COMMONS */
+#content,
+#center .page-title,
 #perfnode,
 #filters,
 #timeline,
@@ -16,13 +18,12 @@
 -o-transition: height, 5s, ease-out;
 transition: height, 5s, ease-out;
 */
-
 }
-body.layout-intro #main {
+#main {
   height: 97%;
 }
 body.layout-intro #perfnode {
-  height: 0%;
+  height: 0%!important;
 }
 body.layout-intro #filters {
   height: 0%;
@@ -31,16 +32,18 @@ body.layout-intro #timeline {
   height: 65%;
 }
 body.layout-intro #timeline #timeline-container {
-  height: 98%;
+  height: 0%;
 }
 body.layout-intro #timeline-loader {
   display: block;
+  margin: 0 auto 5px;
 }
-body.layout-timeline #main {
-  height: 97%;
+body.layout-timeline #main #content,
+body.layout-timeline #main #center .page-title {
+  height: 0%;
 }
 body.layout-timeline #perfnode {
-  height: 0%;
+  height: 0%!important;
 }
 body.layout-timeline #filters {
   height: 30%;
@@ -54,11 +57,12 @@ body.layout-timeline #timeline #timeline-container {
 body.layout-timeline #timeline-loader {
   display: none;
 }
-body.layout-perfnode #main {
-  height: 97%;
+body.layout-perfnode #main #content,
+body.layout-perfnode #main #center .page-title {
+  height: 0%;
 }
 body.layout-perfnode #perfnode {
-  height: 85%;
+  height: 85%!important;
 }
 body.layout-perfnode #filters {
   height: 0%;
@@ -72,3 +76,43 @@ body.layout-perfnode #timeline #timeline-container {
 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;
+  }
+  #container > .inner {
+    padding: 0!important;
+    width: 100%!important;
+    height: 100vh!important;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  #container > .inner #header {
+    height: 3vh;
+    flex: 0 0 auto;
+    height: auto;
+    padding: 0.5em;
+    box-sizing: border-box;
+  }
+  #container > .inner #main {
+    flex: 0 0 auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+    height: 96vh;
+    box-sizing: border-box;
+  }
+  #container > .inner #main #center {
+    display: block;
+    height: auto;
+  }
+}

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

@@ -1,32 +1,51 @@
 /** COMMONS */
-/** COMMONS */
 /** colors */
 /** jscrollpane */
 .jspScrollable .jspContainer .jspVerticalBar {
-  width: 10px;
-  background-color: #f2f2f2;
-  background-color: #f2f2f2;
-  background-color: #f2f2f2;
+  width: 4px;
+  background-color: #F2F2F2;
 }
-.jspScrollable .jspContainer .jspVerticalBar .jspTrack {
-  background-color: transparent;
-  background-color: transparent;
+.jspScrollable .jspContainer .jspHorizontalBar {
+  height: 4px;
+  background-color: #F2F2F2;
+}
+.jspScrollable .jspContainer .jspTrack {
   background-color: transparent;
 }
-.jspScrollable .jspContainer .jspVerticalBar .jspTrack .jspDrag {
-  background-color: #77787b;
-  background-color: #77787b;
-  background-color: #77787b;
+.jspScrollable .jspContainer .jspTrack .jspDrag {
+  background-color: #77787B;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -moz-opacity: 0.6;
+  -khtml-opacity: 0.6;
+  -webkit-opacity: 0.6;
+  opacity: 0.6;
+  -webkit-transition: opacity 0.2s ease-out;
+  -moz-transition: opacity 0.2s ease-out;
+  -o-transition: opacity 0.2s ease-out;
+  transition: opacity 0.2s ease-out;
+}
+.jspScrollable .jspContainer .jspTrack:hover .jspDrag {
+  -moz-opacity: 1;
+  -khtml-opacity: 1;
+  -webkit-opacity: 1;
+  opacity: 1;
 }
-/** COMMONS */
 .Museo {
   font-family: "Museo", Arial, sans-serif;
+  -moz-font-feature-settings: "calt=0,liga=0";
 }
 .MuseoSans {
   font-family: "MuseoSans", Arial, sans-serif;
+  -moz-font-feature-settings: "calt=0,liga=0";
 }
 .MuseoSlab {
   font-family: "MuseoSlab", Arial, sans-serif;
+  -moz-font-feature-settings: "calt=0,liga=0";
 }
 a,
 a:visited {
@@ -35,6 +54,7 @@ a:visited {
 /*a.active, li a.active{color:@main-blue;}*/
 body {
   font-family: "MuseoSans", Arial, sans-serif;
+  -moz-font-feature-settings: "calt=0,liga=0";
   font-size: 16px;
 }
 .8 {
@@ -101,20 +121,15 @@ body {
 #timeline-loader {
   max-width: 700px;
   margin: 0 auto;
-  margin: 0 auto;
-  margin: 0 auto;
   font-family: "MuseoSans", Arial, sans-serif;
+  -moz-font-feature-settings: "calt=0,liga=0";
   font-size: 12px;
   font-weight: 700;
-  border-bottom: 1px solid #000000;
-  border-bottom: 1px solid #000000;
-  border-bottom: 1px solid #000000;
 }
 #timeline-loader .progress {
-  border-top: 3px solid #999;
+  border-top: 4px solid #999;
   width: 0;
   /*    .transition(width 4s linear);*/
-
   transition: width 3s linear;
   -moz-transition: width 3s linear;
   -o-transition: width 3s linear;
@@ -122,27 +137,24 @@ body {
 }
 #timeline-loader .progress.complete {
   /*      .transition(width 0.1s linear);*/
-
   transition: width 0.1s linear;
   -moz-transition: width 0.1s linear;
   -o-transition: width 0.1s linear;
   -webkit-transition: width 0.1s linear;
 }
 #timeline {
-  margin-top: 25px;
-  margin-top: 25px;
+  height: 65%;
   margin-top: 25px;
 }
 #timeline h3.title {
   cursor: pointer;
   font-family: "MuseoSans", Arial, sans-serif;
+  -moz-font-feature-settings: "calt=0,liga=0";
   font-size: 10px;
   font-weight: 900;
   text-transform: uppercase;
   margin: 0;
-  margin: 0;
-  margin: 0;
-  color: #a5a5a5;
+  color: #A5A5A5;
 }
 @media screen and (min-width: 1201px) {
   #timeline h3.title {
@@ -152,13 +164,9 @@ body {
 #timeline-container {
   width: 100%;
   height: 98%;
-  border-top: 2px solid #a5a5a5;
-  border-top: 2px solid #a5a5a5;
-  border-top: 2px solid #a5a5a5;
+  border-top: 2px solid #A5A5A5;
   overflow: hidden;
-  background-color: #f2f2f2;
-  background-color: #f2f2f2;
-  background-color: #f2f2f2;
+  background-color: #F2F2F2;
 }
 #timeline-container .timeline-frame {
   border: 0 solid #999;
@@ -172,8 +180,6 @@ body {
 }
 #timeline-container .timeline-navigation div {
   padding: 2px 0 0 10px;
-  padding: 2px 0 0 10px;
-  padding: 2px 0 0 10px;
 }
 #timeline-container .timeline-navigation div.timeline-navigation-zoom-in {
   background-image: url('../images/btns_zoomin.png');
@@ -189,13 +195,12 @@ body {
 }
 #timeline-container .timeline-axis-text {
   font-family: "MuseoSans", Arial, sans-serif;
+  -moz-font-feature-settings: "calt=0,liga=0";
   font-size: 10px;
   font-weight: 900;
   text-transform: uppercase;
   margin: 0;
-  margin: 0;
-  margin: 0;
-  color: #a5a5a5;
+  color: #A5A5A5;
 }
 @media screen and (min-width: 1201px) {
   #timeline-container .timeline-axis-text {
@@ -203,18 +208,6 @@ body {
   }
 }
 #timeline-container .timeline-event {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  -moz-background-clip: padding;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  -moz-background-clip: padding;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   border-radius: 0;
@@ -225,15 +218,12 @@ body {
   /*
       TODO move events with css3
     */
-
 }
 #timeline-container .timeline-event.timeline-event-range {
   background-color: #fff;
 }
 #timeline-container .timeline-event-content {
   margin: 0;
-  margin: 0;
-  margin: 0;
 }
 #timeline-container .timeline-event-content div.date {
   display: block;
@@ -241,47 +231,35 @@ body {
   text-align: left;
   cursor: pointer;
   padding: 4px 0;
-  padding: 4px 0;
-  padding: 4px 0;
 }
 #timeline-container .timeline-event-content div.date .text-content {
   padding: 0 5px;
-  padding: 0 5px;
-  padding: 0 5px;
-  margin-bottom: 4px;
-  margin-bottom: 4px;
   margin-bottom: 4px;
-  border-left: 3px solid #a5a5a5;
-  border-left: 3px solid #a5a5a5;
-  border-left: 3px solid #a5a5a5;
+  border-left: 3px solid #A5A5A5;
 }
 #timeline-container .timeline-event-content div.date:hover .text-content {
-  border-left: 3px solid #77787b;
-  border-left: 3px solid #77787b;
-  border-left: 3px solid #77787b;
+  border-left: 3px solid #77787B;
 }
 #timeline-container .timeline-event-content div.date h4,
 #timeline-container .timeline-event-content div.date h5 {
   margin: 0;
-  margin: 0;
-  margin: 0;
-  color: #a5a5a5;
+  color: #A5A5A5;
 }
 #timeline-container .timeline-event-content div.date h4 {
   font-family: "MuseoSans", Arial, sans-serif;
+  -moz-font-feature-settings: "calt=0,liga=0";
   font-size: 12px;
   font-weight: 500;
   font-style: italic;
 }
 #timeline-container .timeline-event-content div.date h5 {
   font-family: "MuseoSans", Arial, sans-serif;
+  -moz-font-feature-settings: "calt=0,liga=0";
   font-size: 12px;
   font-weight: 700;
 }
 body.view-mode-dot #timeline-container .timeline-event-content div.date {
   padding: 0;
-  padding: 0;
-  padding: 0;
 }
 body.view-mode-dot #timeline-container .timeline-event-content div.date .text-content {
   min-height: 15px;
@@ -315,3 +293,40 @@ body.view-mode-images #timeline-container .timeline-event-content div.date h5,
 body.view-mode-images #timeline-container .timeline-event-content div.date img {
   display: block;
 }
+#timeline-container .timeline-event-selected {
+  background-color: transparent;
+}
+#timeline-container .timeline-event-selected .timeline-event-content div.date .text-content {
+  border-left: 3px solid #77787B;
+}
+#timeline-container .timeline-event-selected .timeline-event-content div.date h4,
+#timeline-container .timeline-event-selected .timeline-event-content div.date h5 {
+  color: #77787B;
+}
+.timeline-modal {
+  width: 150px;
+  min-height: 30px;
+  padding: 5px;
+  background-color: #fff;
+  position: absolute;
+  z-index: 99999;
+  display: none;
+}
+.timeline-modal h4,
+.timeline-modal h5 {
+  margin: 0;
+  color: #77787B;
+}
+.timeline-modal h4 {
+  font-family: "MuseoSans", Arial, sans-serif;
+  -moz-font-feature-settings: "calt=0,liga=0";
+  font-size: 12px;
+  font-weight: 500;
+  font-style: italic;
+}
+.timeline-modal h5 {
+  font-family: "MuseoSans", Arial, sans-serif;
+  -moz-font-feature-settings: "calt=0,liga=0";
+  font-size: 12px;
+  font-weight: 700;
+}

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

@@ -1,39 +1,155 @@
-.Museo{font-family:"Museo",Arial,sans-serif;-moz-font-feature-settings:"calt=0,liga=0";}
-.MuseoSans{font-family:"MuseoSans",Arial,sans-serif;-moz-font-feature-settings:"calt=0,liga=0";}
-.MuseoSlab{font-family:"MuseoSlab",Arial,sans-serif;-moz-font-feature-settings:"calt=0,liga=0";}
-a,a:visited{color:#000;}
-body{font-family:"MuseoSans",Arial,sans-serif;-moz-font-feature-settings:"calt=0,liga=0";font-size:16px;}
-.8{font-size:8px;}
-.9{font-size:9px;}
-.10{font-size:10px;}
-.11{font-size:10px;}
-.12{font-size:12px;}
-.14{font-size:14px;}
-.16{font-size:16px;}
-.18{font-size:18px;}
-.24{font-size:24px;}
-.regular{font-weight:normal;}
-.bold{font-weight:bold;}
-.100{font-weight:100;}
-.300{font-weight:300;}
-.500{font-weight:500;}
-.700{font-weight:700;}
-.900{font-weight:900;}
-.upper{text-transform:uppercase;}
-.italic{font-style:italic;}
-.normal{font-style:normal;}
-*{font-size:14px;}
-div{border:1px dashed #D4D4D4;}
-p:after,ul:after{content:"¬";color:red;}
-h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{color:blue;font-weight:normal;font-size:10px;vertical-align:super;}
-h1:before{content:"h1 ";}
-h2:before{content:"h2 ";}
-h3:before{content:"h3 ";}
-h4:before{content:"h4 ";}
-h5:before{content:"h5 ";}
-h6:before{content:"h6 ";}
-br:after{content:"·";color:red;border:1px solid #999;}
-img{height:auto;margin:0.5em 0;}
-p{border:1px dashed #848484;}
-div{border:1px solid #1A1A1A;}
-img,p,div{position:relative;}img:before,p:before,div:before{font-size:10px;color:red;background-color:#1A1A1A;position:absolute;top:0;z-index:3000;}
+/* LISIBILITY */
+/** COMMONS */
+.Museo {
+  font-family: "Museo", Arial, sans-serif;
+  -moz-font-feature-settings: "calt=0,liga=0";
+}
+.MuseoSans {
+  font-family: "MuseoSans", Arial, sans-serif;
+  -moz-font-feature-settings: "calt=0,liga=0";
+}
+.MuseoSlab {
+  font-family: "MuseoSlab", Arial, sans-serif;
+  -moz-font-feature-settings: "calt=0,liga=0";
+}
+a,
+a:visited {
+  color: #000;
+}
+/*a.active, li a.active{color:@main-blue;}*/
+body {
+  font-family: "MuseoSans", Arial, sans-serif;
+  -moz-font-feature-settings: "calt=0,liga=0";
+  font-size: 16px;
+}
+.8 {
+  font-size: 8px;
+}
+.9 {
+  font-size: 9px;
+}
+.10 {
+  font-size: 10px;
+}
+.11 {
+  font-size: 10px;
+}
+.12 {
+  font-size: 12px;
+}
+.14 {
+  font-size: 14px;
+}
+.16 {
+  font-size: 16px;
+}
+.18 {
+  font-size: 18px;
+}
+.24 {
+  font-size: 24px;
+}
+.regular {
+  font-weight: normal;
+}
+.bold {
+  font-weight: bold;
+}
+.100 {
+  font-weight: 100;
+}
+.300 {
+  font-weight: 300;
+}
+.500 {
+  font-weight: 500;
+}
+.700 {
+  font-weight: 700;
+}
+.900 {
+  font-weight: 900;
+}
+.upper {
+  text-transform: uppercase;
+}
+.italic {
+  font-style: italic;
+}
+.normal {
+  font-style: normal;
+}
+/** FEUILLES DE STYLES */
+/** timeline */
+/** filters */
+* {
+  font-size: 14px;
+}
+div {
+  border: 1px dashed #D4D4D4;
+}
+p:after,
+ul:after {
+  content: "¬";
+  color: red;
+}
+h1:before,
+h2:before,
+h3:before,
+h4:before,
+h5:before,
+h6:before {
+  color: blue;
+  font-weight: normal;
+  font-size: 10px;
+  vertical-align: super;
+}
+h1:before {
+  content: "h1 ";
+}
+h2:before {
+  content: "h2 ";
+}
+h3:before {
+  content: "h3 ";
+}
+h4:before {
+  content: "h4 ";
+}
+h5:before {
+  content: "h5 ";
+}
+h6:before {
+  content: "h6 ";
+}
+br:after {
+  content: "·";
+  color: red;
+  border: 1px solid #999;
+}
+/* LAYOUT AND GRAPHICS */
+img {
+  height: auto;
+  margin: 0.5em 0;
+}
+p {
+  border: 1px dashed #848484;
+}
+div {
+  border: 1px solid #1A1A1A;
+}
+img,
+p,
+div {
+  position: relative;
+}
+img:before,
+p:before,
+div:before {
+  font-size: 10px;
+  color: red;
+  background-color: #1A1A1A;
+  position: absolute;
+  top: 0;
+  z-index: 3000;
+}

sites/all/themes/gui/perfarttimeline/inc/template.custom-functions.inc

@@ -15,4 +15,20 @@ function perfarttimeline_form_alter(&$form, &$form_state, $form_id) {
 	    '#value' => t('Search'),
 	  );
   }
+}
+
+
+function perfarttimeline_html_head_alter(&$head_elements) {
+	unset($head_elements['system_meta_generator']);
+	foreach ($head_elements as $key => $element) {
+		if (isset($element['#attributes']['rel']) && $element['#attributes']['rel'] == 'canonical') {
+		  unset($head_elements[$key]);
+		}
+		if (isset($element['#attributes']['rel']) && $element['#attributes']['rel'] == 'shortlink') {
+			unset($head_elements[$key]);
+		}
+		if (isset($element['#attributes']['rel']) && $element['#attributes']['rel'] == 'alternate') {
+			unset($head_elements[$key]);
+		}
+	}
 }

sites/all/themes/gui/perfarttimeline/inc/template.theme-overrides.inc

@@ -34,9 +34,9 @@ function perfarttimeline_links__locale_block(&$vars) {
  * @ingroup themeable
  */
 function perfarttimeline_image_style($vars) {
-  // dsm($vars);
+  // dpm($vars);
   
-  $real_path = $vars['path'];
+  $original_path = $vars['path'];
 
   _perfarttimeline_getImageStyleDimensions($vars);
   $figure = '<figure style="width:'.$vars['width'].'px;height:'.$vars['height'].'px;">';
@@ -46,20 +46,33 @@ function perfarttimeline_image_style($vars) {
     foreach ($styles as $style) {
       $vars['attributes']['class'] = 'image '.$style;
       if($style == $vars['style_name']){
-        $vars['path'] = image_style_url($vars['style_name'], $real_path);
+        // $vars['path'] = image_style_url($vars['style_name'], $original_path);
+        // $vars['path'] = image_style_path($vars['style_name'], $original_path);
+        $url = image_style_url($style, $original_path);
+        $url = parse_url($url);
+        $vars['path'] = $url['path'];
         $figure .= theme('image', $vars);
       }else{
         $hidden_vars = array_merge(array(), $vars);
         $hidden_vars['style_name'] = $style;
         _perfarttimeline_getImageStyleDimensions($hidden_vars);
-        $hidden_vars['attributes']['path'] = image_style_url($style, $real_path);
+        // $hidden_vars['attributes']['path'] = image_style_url($style, $original_path);
+        // $hidden_vars['attributes']['path'] = image_style_path($style, $original_path);
+        $url = image_style_url($style, $original_path);
+        $url = parse_url($url);
+        $hidden_vars['attributes']['path'] = $url['path'];
         $hidden_vars['path'] = "";
         $figure .= theme('image', $hidden_vars);
       }
     }
   }else{
     $vars['attributes']['class'] = 'image '.$vars['style_name'];
-    $vars['path'] = image_style_url($vars['style_name'], $real_path);
+    // $vars['path'] = image_style_url($vars['style_name'], $original_path);
+    // $style_path = image_style_path($vars['style_name'], $original_path);
+    // $url = file_create_url($style_path);
+    $url = image_style_url($vars['style_name'], $original_path);
+    $url = parse_url($url);
+    $vars['path'] = $url['path'];
     $figure .= theme('image', $vars);
   }
   

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

@@ -29,6 +29,10 @@ Drupal.behaviors.init_theme.attach = function (context) {
   }
   
   $('#block-menu-block-2 ul.menu').listnav({cookieName:'test', attribute:'nom'});
+
+  $('.burger-icon').click(function(){
+    $('body').toggleClass('burger-shown');
+  });
 };
 
 Drupal.behaviors.init_timeline = {};

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{

sites/all/themes/gui/perfarttimeline/preprocess/field.pre.php

@@ -20,6 +20,8 @@ if(in_array($vars['element']['#field_name'], $personnes_fields)){
   // dsm($vars, 'vars');
   foreach ($vars['element']['#items'] as $index => $item) {
     $term = $item['taxonomy_term'];
+    // remove links of title
+    $vars['items'][$index] = array("#markup" => $term->name);
     // dsm($term, 'term');
     $children = array();
     foreach(taxonomy_get_children($term->tid, $term->vid) as $child){

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

@@ -86,9 +86,11 @@
     </div> 
     <!-- /container -->
 
-		<!-- Javascript at the bottom for fast page loading -->
-		<?php print $scripts; ?>
-		
+	<img src="<?php print $theme_path ?>/images/blank.gif" alt="">
+    
+	<!-- Javascript at the bottom for fast page loading -->
+	<?php print $scripts; ?>
+	
 
 	  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
 	       chromium.org/developers/how-tos/chrome-frame-getting-started -->

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

@@ -2,7 +2,14 @@
   <article id="node-<?php print $node->nid; ?>" class="node type-<?php print $node->type; ?><?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " unpublished"; } ?>">
 
     <?php if ($page == 0 && isset($title)): ?>
-    <h1 class="nodetitle"><a href="<?php print $node_url?>"><?php print $title?></a></h1>
+    <h1 class="nodetitle">
+      <?php $types = ['document', 'document_video', 'document_sonor', 'object']; // , 'effectuation' ?>
+      <?php if (!in_array($node->type, $types)) : ?>
+        <a href="<?php print $node_url?>"><?php print $title?></a>
+      <?php else: ?>
+        <?php print $title?>
+      <?php endif; ?>
+    </h1>
     <?php endif; ?>
     
     <section class="content">

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

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