preview opening works wery well now :)

sites/all/themes/gui/jee/css/jee.css

@@ -3931,30 +3931,66 @@ div.messages {
   position: absolute;
   top: 20px;
   right: 20px;
-  width: 250px;
-  max-height: 30%;
+  width: 500px;
+  max-height: 60%;
   overflow-y: auto;
+  z-index: 1000;
 }
 
-/* line 147, jee.scss */
+/* line 148, jee.scss */
 #main {
   position: absolute;
   width: 100%;
   height: 100%;
   overflow: hidden;
-}
-/* line 152, jee.scss */
+  /*
+   _____ _____ __    _____ _____ _____    _____ __ __    _____ _____ ____  _____
+  |     |     |  |  |     | __  |   __|  | __  |  |  |  |   | |     |    \|   __|
+  |   --|  |  |  |__|  |  |    -|__   |  | __ -|_   _|  | | | |  |  |  |  |   __|
+  |_____|_____|_____|_____|__|__|_____|  |_____| |_|    |_|___|_____|____/|_____|
+  */
+}
+/* line 153, jee.scss */
 #main > .region, #main > .region > .block-system, #main > .region > .block-system > .content {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
-/* line 158, jee.scss */
+/* line 159, jee.scss */
 #main .node-chapitre.node-teaser {
   position: absolute;
+  /*
+      _____   __________________  ___   _________________    __________________
+     /  _/ | / /_  __/ ____/ __ \/   | / ____/_  __/  _/ |  / /  _/_  __/ ____/
+     / //  |/ / / / / __/ / /_/ / /| |/ /     / /  / / | | / // /  / / / __/
+   _/ // /|  / / / / /___/ _, _/ ___ / /___  / / _/ /  | |/ // /  / / / /___
+  /___/_/ |_/ /_/ /_____/_/ |_/_/  |_\____/ /_/ /___/  |___/___/ /_/ /_____/
+  */
+      /*
+       ____  _____ _____ _____ _____ __  _____    _____ _____ ____  _____
+      |    \|   __|   __|  _  |  |  |  ||_   _|  |     |     |    \|   __|
+      |  |  |   __|   __|     |  |  |  |__| |    | | | |  |  |  |  |   __|
+      |____/|_____|__|  |__|__|_____|_____|_|    |_|_|_|_____|____/|_____|
+
+      */
+      /*
+       _____ _____ _____ _____ _____ _____ _ _ _    _____ _____ ____  _____
+      |  _  | __  |   __|  |  |     |   __| | | |  |     |     |    \|   __|
+      |   __|    -|   __|  |  |-   -|   __| | | |  | | | |  |  |  |  |   __|
+      |__|  |__|__|_____|\___/|_____|_____|_____|  |_|_|_|_____|____/|_____|
+
+      */
+  /*
+     _____________   ____________  ___    __   _____     __                     _       __                       __  _            _
+    / ____/ ____/ | / / ____/ __ \/   |  / /  / ___/   _/_/___  ____  ____     (_)___  / /____  _________ ______/ /_(_)   _____  | |
+   / / __/ __/ /  |/ / __/ / /_/ / /| | / /   \__ \   / // __ \/ __ \/ __ \   / / __ \/ __/ _ \/ ___/ __ `/ ___/ __/ / | / / _ \ / /
+  / /_/ / /___/ /|  / /___/ _, _/ ___ |/ /______/ /  / // / / / /_/ / / / /  / / / / / /_/  __/ /  / /_/ / /__/ /_/ /| |/ /  __// /
+  \____/_____/_/ |_/_____/_/ |_/_/  |_/_____/____/  / //_/ /_/\____/_/ /_/  /_/_/ /_/\__/\___/_/   \__,_/\___/\__/_/ |___/\___//_/
+                                                    |_|                                                                      /_/
+  */
 }
-/* line 166, jee.scss */
+/* line 177, jee.scss */
 #main .node-chapitre.node-teaser h2.node-title {
   -webkit-transform: none;
       -ms-transform: none;
@@ -3966,9 +4002,14 @@ div.messages {
           transition: 1s ease-out;
   -webkit-transition-property: -webkit-transform;
           transition-property: transform;
+  z-index: 5;
 }
-/* line 172, jee.scss */
-#main .node-chapitre.node-teaser .field-name-field-comprendre {
+/* line 184, jee.scss */
+#main .node-chapitre.node-teaser > .content {
+  position: relative;
+}
+/* line 185, jee.scss */
+#main .node-chapitre.node-teaser .texts {
   opacity: 0;
   height: 1px;
   overflow: hidden;
@@ -3976,103 +4017,86 @@ div.messages {
           transition: 1s ease-out;
   -webkit-transition-property: opacity height;
           transition-property: opacity height;
+  position: absolute;
 }
-/* line 177, jee.scss */
+/* line 191, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-partie {
   opacity: 0;
   position: absolute;
-  -webkit-transition: 1s ease-out 0.5s;
-          transition: 1s ease-out 0.5s;
+  -webkit-transition: 1s ease-in-out 0.1s;
+          transition: 1s ease-in-out 0.1s;
   -webkit-transition-property: opacity -webkit-transform;
           transition-property: opacity transform;
 }
-/* line 183, jee.scss */
-#main .node-chapitre.node-teaser .field-name-field-partie:nth-child(3) {
+/* line 197, jee.scss */
+#main .node-chapitre.node-teaser .field-name-field-partie:nth-child(2) {
   z-index: 2;
   opacity: 1;
-  -webkit-transition-delay: 0;
-          transition-delay: 0;
 }
-/* line 187, jee.scss */
-#main .node-chapitre.node-teaser .field-name-field-partie:nth-child(3) > .field-type-text {
+/* line 201, jee.scss */
+#main .node-chapitre.node-teaser .field-name-field-partie:nth-child(2) > .field-type-text {
   opacity: 0;
-  -webkit-transition: 1s ease-out 0.5s;
-          transition: 1s ease-out 0.5s;
+  -webkit-transition: 1s ease-out 0.9s;
+          transition: 1s ease-out 0.9s;
   -webkit-transition-property: opacity;
           transition-property: opacity;
 }
-/* line 192, jee.scss */
-#main .node-chapitre.node-teaser .field-name-field-partie:nth-child(3) > .field-name-field-vignette {
+/* line 206, jee.scss */
+#main .node-chapitre.node-teaser .field-name-field-partie:nth-child(2) > .field-name-field-vignette {
   cursor: pointer;
   z-index: 2;
 }
-/* line 198, jee.scss */
-#main .node-chapitre.node-teaser .links {
-  opacity: 0;
-  -webkit-transition: 1s ease-out 1s;
-          transition: 1s ease-out 1s;
-  -webkit-transition-property: opacity;
-          transition-property: opacity;
-}
-/* line 199, jee.scss */
-#main .node-chapitre.node-teaser .links > * {
-  display: none;
-}
-/* line 203, jee.scss */
+/* line 209, jee.scss */
 #main .node-chapitre.node-teaser:after {
   opacity: 0;
-  -webkit-transition: 3s ease-out;
-          transition: 3s ease-out;
+  -webkit-transition: 2s ease-in;
+          transition: 2s ease-in;
   -webkit-transition-property: opacity;
           transition-property: opacity;
+  top: 1px;
+  left: 1px;
+  bottom: 2px;
+  right: 2px;
 }
-/* line 216, jee.scss */
+/* line 228, jee.scss */
 #main .node-chapitre.node-teaser.previewed:after {
   opacity: 1;
+  top: 2em;
+  left: -12em;
+  right: -12em;
+  bottom: -30em;
 }
-/* line 217, jee.scss */
+/* line 235, jee.scss */
 #main .node-chapitre.node-teaser.previewed h2.node-title {
   -webkit-transform: scale(2, 2);
       -ms-transform: scale(2, 2);
           transform: scale(2, 2);
 }
-/* line 218, jee.scss */
-#main .node-chapitre.node-teaser.previewed .field-name-field-comprendre {
-  opacity: 1;
-  height: 6em;
-}
-/* line 219, jee.scss */
-#main .node-chapitre.node-teaser.previewed .links {
+/* line 236, jee.scss */
+#main .node-chapitre.node-teaser.previewed .texts {
   opacity: 1;
+  height: 8em;
 }
-/* line 219, jee.scss */
-#main .node-chapitre.node-teaser.previewed .links > * {
-  display: block;
-}
-/* line 220, jee.scss */
+/* line 237, jee.scss */
 #main .node-chapitre.node-teaser.previewed .field-name-field-partie {
   opacity: 1;
   z-index: 0;
 }
-/* line 223, jee.scss */
+/* line 240, jee.scss */
 #main .node-chapitre.node-teaser.previewed .field-name-field-partie > .field {
   opacity: 1;
   z-index: -1;
   cursor: default;
 }
-/* line 228, jee.scss */
+/* line 254, jee.scss */
 #main .node-chapitre.node-teaser:after {
   content: " ";
   background-size: contain;
   background-repeat: no-repeat;
   position: absolute;
-  top: 2em;
-  left: -12em;
-  right: -12em;
-  bottom: -30em;
   z-index: -1;
 }
-/* line 242, jee.scss */
+/* line 262, jee.scss */
 #main .node-chapitre.node-teaser h2.node-title {
   font-family: "epflulb";
   font-weight: normal;
@@ -4083,35 +4107,59 @@ div.messages {
   z-index: 5;
 }
 @media only screen and (min-width: 64.063em) {
-  /* line 242, jee.scss */
+  /* line 262, jee.scss */
   #main .node-chapitre.node-teaser h2.node-title {
     font-size: 1.3em;
   }
 }
 @media only screen and (min-width: 90.063em) {
-  /* line 242, jee.scss */
+  /* line 262, jee.scss */
   #main .node-chapitre.node-teaser h2.node-title {
     font-size: 1.8em;
   }
 }
-/* line 258, jee.scss */
+/* line 282, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-comprendre {
-  max-width: 15em;
+  min-width: 16em;
 }
-/* line 259, jee.scss */
+/* line 283, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-comprendre h1, #main .node-chapitre.node-teaser .field-name-field-comprendre h2, #main .node-chapitre.node-teaser .field-name-field-comprendre h3, #main .node-chapitre.node-teaser .field-name-field-comprendre h4, #main .node-chapitre.node-teaser .field-name-field-comprendre h5, #main .node-chapitre.node-teaser .field-name-field-comprendre h6 {
   display: none !important;
 }
-/* line 261, jee.scss */
+/* line 285, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-comprendre p {
   margin: 0;
 }
-/* line 264, jee.scss */
+/* line 289, jee.scss */
+#main .node-chapitre.node-teaser ul.links {
+  display: block;
+  margin: 0;
+  text-align: right;
+  z-index: 5;
+  position: relative;
+  width: 100%;
+}
+/* line 291, jee.scss */
+#main .node-chapitre.node-teaser ul.links li.node-readmore {
+  padding: 0;
+}
+/* line 293, jee.scss */
+#main .node-chapitre.node-teaser ul.links li.node-readmore a {
+  display: inline-block;
+  height: 25px;
+  font-family: "open_sans";
+  font-weight: 900;
+  color: #000 !important;
+  width: 8em;
+  text-align: left;
+  background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
+}
+/* line 305, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-partie {
   clear: both;
   padding-top: 1em;
 }
-/* line 268, jee.scss */
+/* line 309, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-vignette {
   position: relative;
   float: left;
@@ -4124,50 +4172,28 @@ div.messages {
   background-repeat: no-repeat;
   background-origin: center center;
 }
-/* line 281, jee.scss */
+/* line 322, jee.scss */
 #main .node-chapitre.node-teaser .field-type-text {
   min-width: 16em;
 }
-/* line 282, jee.scss */
+/* line 323, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-titre {
   font-family: "epflul";
   font-size: 1.6em;
   line-height: 1.1;
 }
-/* line 287, jee.scss */
+/* line 328, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-sous-titre {
   font-family: "epflul";
   font-size: 1.4em;
   line-height: 1.2;
 }
-/* line 292, jee.scss */
+/* line 333, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-description {
   font-size: 0.88em;
   line-height: 1.2;
 }
-/* line 298, jee.scss */
-#main .node-chapitre.node-teaser ul.links {
-  margin: 0;
-  text-align: right;
-  z-index: 5;
-  position: relative;
-}
-/* line 300, jee.scss */
-#main .node-chapitre.node-teaser ul.links li.node-readmore {
-  padding: 0;
-}
-/* line 302, jee.scss */
-#main .node-chapitre.node-teaser ul.links li.node-readmore a {
-  display: inline-block;
-  height: 25px;
-  font-family: "open_sans";
-  font-weight: 900;
-  color: #000 !important;
-  width: 8em;
-  text-align: left;
-  background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
-}
-/* line 314, jee.scss */
+/* line 339, jee.scss */
 #main .node-chapitre.node-teaser .line {
   z-index: -1;
   position: absolute;
@@ -4180,147 +4206,147 @@ div.messages {
   background-color: red;
   opacity: 0.4;
 }
-/* line 328, jee.scss */
+/* line 358, jee.scss */
 #main #node-2::after {
   background-image: url(../assets/img/bgd-sol.svg);
 }
-/* line 329, jee.scss */
+/* line 359, jee.scss */
 #main #node-2, #main #node-2 a {
   color: #b24c14;
 }
-/* line 330, jee.scss */
+/* line 360, jee.scss */
 #main #node-2 h2.node-title, #main #node-2 h2.node-title a {
   color: #d85509;
 }
-/* line 331, jee.scss */
+/* line 361, jee.scss */
 #main #node-2 .field-name-field-vignette {
   background-image: url(../assets/img/shadow-sol.svg);
 }
-/* line 332, jee.scss */
+/* line 362, jee.scss */
 #main #node-2 .line {
   background-color: #ea5b0c;
 }
-/* line 336, jee.scss */
+/* line 366, jee.scss */
 #main #node-3::after {
   background-image: url(../assets/img/bgd-dph.svg);
 }
-/* line 337, jee.scss */
+/* line 367, jee.scss */
 #main #node-3, #main #node-3 a {
   color: #686b00;
 }
-/* line 338, jee.scss */
+/* line 368, jee.scss */
 #main #node-3 h2.node-title, #main #node-3 h2.node-title a {
   color: #afaf00;
 }
-/* line 339, jee.scss */
+/* line 369, jee.scss */
 #main #node-3 .field-name-field-vignette {
   background-image: url(../assets/img/shadow-dph.svg);
 }
-/* line 340, jee.scss */
+/* line 370, jee.scss */
 #main #node-3 .line {
   background-color: #cecd00;
 }
-/* line 344, jee.scss */
+/* line 374, jee.scss */
 #main #node-4::after {
   background-image: url(../assets/img/bgd-sub.svg);
 }
-/* line 345, jee.scss */
+/* line 375, jee.scss */
 #main #node-4, #main #node-4 a {
   color: #b71330;
 }
-/* line 346, jee.scss */
+/* line 376, jee.scss */
 #main #node-4 h2.node-title, #main #node-4 h2.node-title a {
   color: #cd0734;
 }
-/* line 347, jee.scss */
+/* line 377, jee.scss */
 #main #node-4 .field-name-field-vignette {
   background-image: url(../assets/img/shadow-sub.svg);
 }
-/* line 348, jee.scss */
+/* line 378, jee.scss */
 #main #node-4 .line {
   background-color: #de003a;
 }
-/* line 352, jee.scss */
+/* line 382, jee.scss */
 #main #node-5::after {
   background-image: url(../assets/img/bgd-bc.svg);
 }
-/* line 353, jee.scss */
+/* line 383, jee.scss */
 #main #node-5, #main #node-5 a {
   color: #033d6f;
 }
-/* line 354, jee.scss */
+/* line 384, jee.scss */
 #main #node-5 h2.node-title, #main #node-5 h2.node-title a {
   color: #024b87;
 }
-/* line 355, jee.scss */
+/* line 385, jee.scss */
 #main #node-5 .field-name-field-vignette {
   background-image: url(../assets/img/shadow-bc.svg);
 }
-/* line 356, jee.scss */
+/* line 386, jee.scss */
 #main #node-5 .line {
   background-color: #0066b1;
 }
-/* line 360, jee.scss */
+/* line 390, jee.scss */
 #main #node-6::after {
   background-image: url(../assets/img/bgd-opp.svg);
 }
-/* line 361, jee.scss */
+/* line 391, jee.scss */
 #main #node-6, #main #node-6 a {
   color: #7f1965;
 }
-/* line 362, jee.scss */
+/* line 392, jee.scss */
 #main #node-6 h2.node-title, #main #node-6 h2.node-title a {
   color: #941b80;
 }
-/* line 363, jee.scss */
+/* line 393, jee.scss */
 #main #node-6 .field-name-field-vignette {
   background-image: url(../assets/img/shadow-opp.svg);
 }
-/* line 364, jee.scss */
+/* line 394, jee.scss */
 #main #node-6 .line {
   background-color: #af1380;
 }
-/* line 368, jee.scss */
+/* line 398, jee.scss */
 #main #node-7::after {
   background-image: url(../assets/img/bgd-dub.svg);
 }
-/* line 369, jee.scss */
+/* line 399, jee.scss */
 #main #node-7, #main #node-7 a {
   color: #22742c;
 }
-/* line 370, jee.scss */
+/* line 400, jee.scss */
 #main #node-7 h2.node-title, #main #node-7 h2.node-title a {
   color: #288d80;
 }
-/* line 371, jee.scss */
+/* line 401, jee.scss */
 #main #node-7 .field-name-field-vignette {
   background-image: url(../assets/img/shadow-dub.svg);
 }
-/* line 372, jee.scss */
+/* line 402, jee.scss */
 #main #node-7 .line {
   background-color: #62a530;
 }
-/* line 376, jee.scss */
+/* line 406, jee.scss */
 #main #node-8::after {
   background-image: url(../assets/img/bgd-juso.svg);
 }
-/* line 377, jee.scss */
+/* line 407, jee.scss */
 #main #node-8, #main #node-8 a {
   color: #0b7f8a;
 }
-/* line 378, jee.scss */
+/* line 408, jee.scss */
 #main #node-8 h2.node-title, #main #node-8 h2.node-title a {
   color: #009aa8;
 }
-/* line 379, jee.scss */
+/* line 409, jee.scss */
 #main #node-8 .field-name-field-vignette {
   background-image: url(../assets/img/shadow-juso.svg);
 }
-/* line 380, jee.scss */
+/* line 410, jee.scss */
 #main #node-8 .line {
   background-color: #33b4b5;
 }
-/* line 383, jee.scss */
+/* line 413, jee.scss */
 #main .chapter-wrapper {
   position: absolute;
   top: 0;
@@ -4329,24 +4355,32 @@ div.messages {
   right: 0;
 }
 
-/* line 389, jee.scss */
+/*  __________  ____  ________________
+   / ____/ __ \/ __ \/_  __/ ____/ __ \
+  / /_  / / / / / / / / / / __/ / /_/ /
+ / __/ / /_/ / /_/ / / / / /___/ _, _/
+/_/    \____/\____/ /_/ /_____/_/ |_|
+*/
+/* line 426, jee.scss */
 #footer {
   position: fixed;
   bottom: 0;
   right: 0;
 }
-/* line 392, jee.scss */
+/* line 429, jee.scss */
 #footer .block {
   display: inline-block;
   vertical-align: top;
 }
 
-/* line 398, jee.scss */
-.backdom {
-  display: none;
-}
-
-/* line 402, jee.scss */
+/*
+    __  ____________ ______
+   /  |/  /  _/ ___// ____/
+  / /|_/ // / \__ \/ /
+ / /  / // / ___/ / /___
+/_/  /_/___//____/\____/
+*/
+/* line 441, jee.scss */
 #fullscreen-btn {
   position: fixed;
   top: 20px;
@@ -4354,7 +4388,13 @@ div.messages {
   z-index: 1000;
 }
 
-/* line 409, jee.scss */
+/*    ____  __________  __  ________
+   / __ \/ ____/ __ )/ / / / ____/
+  / / / / __/ / __  / / / / / __
+ / /_/ / /___/ /_/ / /_/ / /_/ /
+/_____/_____/_____/\____/\____/
+*/
+/* line 454, jee.scss */
 #fps {
   position: fixed;
   top: 20px;
@@ -4362,7 +4402,7 @@ div.messages {
   z-index: 1000;
 }
 
-/* line 415, jee.scss */
+/* line 460, jee.scss */
 #nav-cursor {
   position: absolute;
   width: 6px;

sites/all/themes/gui/jee/css/jee.scss

@@ -140,8 +140,9 @@ $animeLogoDuration:8s;
 div.messages{
   position:absolute;
   top:20px; right:20px;
-  width:250px; max-height:30%;
+  width:500px; max-height:60%;
   overflow-y:auto;
+  z-index: 1000;
 }
 
 #main{
@@ -157,66 +158,82 @@ div.messages{
 
   .node-chapitre.node-teaser{
       position:absolute;
-      // transition:0.1s ease-out;
-      // transition-property:transform;
-      // animation-fill-mode: forwards;
 
-      // INTERACTIVITÉ - - - - - - - - - - - --
-      // ----- DEFAULT MODE ----
+      /*
+          _____   __________________  ___   _________________    __________________
+         /  _/ | / /_  __/ ____/ __ \/   | / ____/_  __/  _/ |  / /  _/_  __/ ____/
+         / //  |/ / / / / __/ / /_/ / /| |/ /     / /  / / | | / // /  / / / __/
+       _/ // /|  / / / / /___/ _, _/ ___ / /___  / / _/ /  | |/ // /  / / / /___
+      /___/_/ |_/ /_/ /_____/_/ |_/_/  |_\____/ /_/ /___/  |___/___/ /_/ /_____/
+      */
+
+      /*
+       ____  _____ _____ _____ _____ __  _____    _____ _____ ____  _____
+      |    \|   __|   __|  _  |  |  |  ||_   _|  |     |     |    \|   __|
+      |  |  |   __|   __|     |  |  |  |__| |    | | | |  |  |  |  |   __|
+      |____/|_____|__|  |__|__|_____|_____|_|    |_|_|_|_____|____/|_____|
+
+      */
       h2.node-title{
         transform:none;
         transform-origin:bottom center;
         transition:1s ease-out;
         transition-property:transform;
+        z-index:5;
       }
-      .field-name-field-comprendre{
+      >.content{position:relative;}
+      .texts{
         opacity:0; height:1px; overflow:hidden;
         transition:1s ease-out;
         transition-property:opacity height;
+        position:absolute;
       }
       .field-name-field-partie{
           opacity:0;
           position:absolute;
-          transition:1s ease-out 0.5s;
+          transition:1s ease-in-out 0.1s;
           transition-property: opacity transform;
           // just let see the field vignette of first partie
-          &:nth-child(3){
+          &:nth-child(2){
             z-index:2;
             opacity:1;
-            transition-delay:0;
+            // transition-delay:0;
             >.field-type-text{
               opacity:0;
-              transition:1s ease-out 0.5s;
+              transition:1s ease-out 0.9s;
               transition-property: opacity;
             }
             >.field-name-field-vignette{cursor:pointer;z-index:2;}
           }
       }
-      // &.closed .field-name-field-partie{
-      //     transform:none!important;
-      // }
-      .links{
-        opacity:0;>*{display:none;}
-        transition:1s ease-out 1s;
-        transition-property:opacity;
-      }
       &:after{
         opacity:0;
-        // display:none;
-        transition: 3s ease-out;
+        transition: 2s ease-in;
         transition-property:opacity;
+        top:1px; left:1px; bottom:2px; right:2px;
       }
       .line{
-        // transition: 0.5s ease-out;
+        // transition: 0.1s ease-out;
         // transition-property:height transform;
       }
 
-       // ----- PREVIEW MODE ------
+      /*
+       _____ _____ _____ _____ _____ _____ _ _ _    _____ _____ ____  _____
+      |  _  | __  |   __|  |  |     |   __| | | |  |     |     |    \|   __|
+      |   __|    -|   __|  |  |-   -|   __| | | |  | | | |  |  |  |  |   __|
+      |__|  |__|__|_____|\___/|_____|_____|_____|  |_|_|_|_____|____/|_____|
+
+      */
       &.previewed{
-        &:after{opacity:1;}
+        &:after{
+          opacity:1;
+          $pad:-2em;
+          top:-$pad;
+          left:$pad*6; right:$pad*6;
+          bottom:$pad*15;
+        }
         h2.node-title{transform:scale(2,2);}
-        .field-name-field-comprendre{opacity:1; height:6em;}
-        .links{opacity:1;>*{display:block;}}
+        .texts{opacity:1; height:8em;}
         .field-name-field-partie{
           opacity:1; z-index:0;
           // display all fields inside each parties
@@ -224,18 +241,21 @@ div.messages{
         }
       }
 
-      // ------- GENERALS (non interactive) - - - - - - - - - - - - - - - - - -
+
+
+      /*
+         _____________   ____________  ___    __   _____     __                     _       __                       __  _            _
+        / ____/ ____/ | / / ____/ __ \/   |  / /  / ___/   _/_/___  ____  ____     (_)___  / /____  _________ ______/ /_(_)   _____  | |
+       / / __/ __/ /  |/ / __/ / /_/ / /| | / /   \__ \   / // __ \/ __ \/ __ \   / / __ \/ __/ _ \/ ___/ __ `/ ___/ __/ / | / / _ \ / /
+      / /_/ / /___/ /|  / /___/ _, _/ ___ |/ /______/ /  / // / / / /_/ / / / /  / / / / / /_/  __/ /  / /_/ / /__/ /_/ /| |/ /  __// /
+      \____/_____/_/ |_/_____/_/ |_/_/  |_/_____/____/  / //_/ /_/\____/_/ /_/  /_/_/ /_/\__/\___/_/   \__,_/\___/\__/_/ |___/\___//_/
+                                                        |_|                                                                      /_/
+      */
       &:after{ // background
         content:" ";
         background-size:contain;
-        // background-clip: content-box;
         background-repeat: no-repeat;
         position:absolute;
-        $pad:-2em;
-        top:-$pad;
-        left:$pad*6; right:$pad*6;
-        bottom:$pad*15;
-        // border: 1px solid blue;
         z-index:-1;
       }
 
@@ -255,10 +275,31 @@ div.messages{
         z-index: 5;
       }
 
+      .texts{
+        // position:relative;
+      }
+
       .field-name-field-comprendre{
         h1,h2,h3,h4,h5,h6{display:none!important;}
-        max-width:15em;
+        // max-width:15em;
         p{margin:0;}
+        min-width:16em;
+      }
+
+      ul.links{
+        display:block; margin:0; text-align:right; z-index:5; position:relative; width:100%;
+        li.node-readmore{
+          padding:0;
+          a{
+            display:inline-block;
+            height:25px;
+            font-family: "open_sans";
+            font-weight: 900;
+            color:#000!important;
+            width:8em; text-align: left;
+            background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
+          }
+        }
       }
 
       .field-name-field-partie{clear:both; padding-top:1em;}
@@ -295,22 +336,6 @@ div.messages{
         line-height:1.2;
       }
 
-      ul.links{
-        margin:0; text-align: right; z-index:5; position:relative;
-        li.node-readmore{
-          padding:0;
-          a{
-            display:inline-block;
-            height:25px;
-            font-family: "open_sans";
-            font-weight: 900;
-            color:#000!important;
-            width:8em; text-align: left;
-            background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
-          }
-        }
-      }
-
       .line{
         z-index:-1;
         position:absolute;
@@ -322,7 +347,12 @@ div.messages{
 
   } // node-chapitre
 
-  // COLORS BY NODE - - - - - - - - - - - - - - - - - - - - -
+  /*
+   _____ _____ __    _____ _____ _____    _____ __ __    _____ _____ ____  _____
+  |     |     |  |  |     | __  |   __|  | __  |  |  |  |   | |     |    \|   __|
+  |   --|  |  |  |__|  |  |    -|__   |  | __ -|_   _|  | | | |  |  |  |  |   __|
+  |_____|_____|_____|_____|__|__|_____|  |_____| |_|    |_|___|_____|____/|_____|
+  */
   //SOL
   #node-2{
     &::after{ background-image : url(../assets/img/bgd-sol.svg); }
@@ -386,6 +416,13 @@ div.messages{
   }
 } // main
 
+/*  __________  ____  ________________
+   / ____/ __ \/ __ \/_  __/ ____/ __ \
+  / /_  / / / / / / / / / / __/ / /_/ /
+ / __/ / /_/ / /_/ / / / / /___/ _, _/
+/_/    \____/\____/ /_/ /_____/_/ |_|
+*/
+
 #footer{
   position:fixed;
   bottom:0; right:0;
@@ -394,18 +431,26 @@ div.messages{
     vertical-align: top;
   }
 }
-
-.backdom{
-  display:none;
-}
-
+/*
+    __  ____________ ______
+   /  |/  /  _/ ___// ____/
+  / /|_/ // / \__ \/ /
+ / /  / // / ___/ / /___
+/_/  /_/___//____/\____/
+*/
 #fullscreen-btn{
   position:fixed;
   top:20px; left:20px;
   z-index: 1000;
 }
 
-// DEBUG
+/*    ____  __________  __  ________
+   / __ \/ ____/ __ )/ / / / ____/
+  / / / / __/ / __  / / / / / __
+ / /_/ / /___/ /_/ / /_/ / /_/ /
+/_____/_____/_____/\____/\____/
+*/
+
 #fps{
   position:fixed;
   top:20px; right:20px;

sites/all/themes/gui/jee/js/jee.js

@@ -47,18 +47,16 @@ jQuery(document).ready(function($) {
       // launchIntoFullscreen(document.documentElement); // the whole page
       launchIntoFullscreen(document.getElementById("root")); // any individual element
     });
-
   };
 
   function initDebug(){
-    $('<p>').attr('id', 'fps').appendTo(_$body);
+    $('<p>').attr('id', 'fps').appendTo(_$container);
     _fps = document.getElementById('fps');
     requestAnimationFrame(displayFps);
 
-    _$nav_cursor = $('<div id="nav-cursor"></div>').appendTo('body');
+    _$nav_cursor = $('<div id="nav-cursor"></div>').appendTo(_$container);
     moveDebugCursor();
-
-    };
+  };
 
   function displayFps(){
     requestAnimationFrame(displayFps);
@@ -75,7 +73,6 @@ jQuery(document).ready(function($) {
       left:_nav_pos.x+_center.x+"px",
       top:_nav_pos.y+_center.y+"px"
     });
-
   };
 
   function initChapters(){
@@ -213,12 +210,15 @@ jQuery(document).ready(function($) {
     this.trans = {x:0, y:0};
     this.ease = randB(0.05, 0.3);
 
+    //preview
+    this.is_previewed = false;
+
     //parties
     this.$parties = $('.field-name-field-partie', e);
+    this.parts_pos = {xs:new Array(), ys:new Array()};
     this.lines = new Array();
-    this.linesAnimeInterval = null;
-    this.linesAnimeCounter = 0;
-    this.linesAnimeTime = 2; // sec
+    this.linesAnimeStartTime = 0,
+    this.linesAnimeDuration = 2000; // milli sec
 
     // prototypes
     if (typeof Chapter.initialized == "undefined") {
@@ -290,8 +290,13 @@ jQuery(document).ready(function($) {
       };
 
       Chapter.prototype.preview = function(e){
+        // don't relaunch preview more that one time
+        if(this.is_previewed) return;
+
         console.log('preview', this.i);
 
+        this.is_previewed = true;
+
         // close other chapters
         for (var i = _chapitres_len - 1; i >= 0; i--) {
           if(i !== this.i)
@@ -299,51 +304,50 @@ jQuery(document).ready(function($) {
         };
 
         // define randomly position of parties
-        var px, py, tXt = new Array(), tYt = new Array();
-        for (var i = 0; i < 3; i++) {
-          switch(i){
-            case 0:
-              px=randB(-30, 30); py=randB(40, 60);
-            break;
-            case 1:
-              px=randB(180, 280); py=randB(200,300);
-            break;
-            case 2:
-              px=randB(-280, -180); py=randB(380,480);
-            break;
-          }
+        this.resetPartsPos();
 
-          tXt.push(px);
-          tYt.push(py);
-        };
-        console.log("tXt", tXt);
-        console.log("tYt", tYt);
-        tXt = shuffleArray(tXt);
-        tYt = shuffleArray(tYt);
         // apply new position to parties
+        var that = this;
         this.$parties.each(function(i, e) {
           setTimeout(
-            (function(i, e, tXt, tYt){
+            (function(i, e, xs, ys){
               return function(){
                 $(e)
                   .css({
-                    translate:[tXt[i], tYt[i]],
+                    transform:"translate3d("+xs[i]+"px,"+ys[i]+"px,0)",
                   });
                 }
-            }(i, e, tXt, tYt)),
+            }(i, e, that.parts_pos.xs, that.parts_pos.ys)),
           10);
 
         }); // each $parties
 
         this.$e.addClass('previewed');
-        this.animeLines();
+        requestAnimationFrame(this.animeLines.bind(this));
+      };
+
+      Chapter.prototype.resetPartsPos = function(){
+        this.parts_pos = {xs:new Array(), ys:new Array()};
+        for (var i = 0; i < 3; i++) {
+          switch(i){
+            case 0:
+              this.parts_pos.xs.push(randB(-30,30));      this.parts_pos.ys.push(randB(90,110));     break;
+            case 1:
+              this.parts_pos.xs.push(randB(180,280));     this.parts_pos.ys.push(randB(250,350));   break;
+            case 2:
+              this.parts_pos.xs.push(randB(-280,-180));   this.parts_pos.ys.push(randB(430,530));   break;
+          }
+        };
+        this.parts_pos.xs = shuffleArray(this.parts_pos.xs);
+        this.parts_pos.ys = shuffleArray(this.parts_pos.ys);
       };
 
       Chapter.prototype.closePreview = function(){
         this.$e.removeClass('previewed')
           .find('.field-name-field-partie')
           .css({transform:"none"});
-          this.animeLines();
+        requestAnimationFrame(this.animeLines.bind(this));
+        this.is_previewed = false;
       };
 
       Chapter.prototype.drawLines = function(){
@@ -354,52 +358,49 @@ jQuery(document).ready(function($) {
         };
       };
 
-      Chapter.prototype.animeLines = function(){
-        this.linesAnimeCounter = 0;
-        this.linesAnimeInterval = setInterval(
-          (function(_this){
-            return function(){
-              // console.log("partie pos : ", _this.$parties.eq(2).position());
-
-              // get the lines length
-              var l, a, pos1, pos2;
-              for (var i = 0; i < _this.lines.length; i++) {
-                pos1 =  _this.$parties.eq(i).position();
-                pos2 = _this.$parties.eq(i+1).position();
-
-                l = Math.sqrt(
-                  Math.pow(
-                    pos2.left - pos1.left
-                    ,2
-                  )
-                  +
-                  Math.pow(
-                    pos2.top - pos1.top
-                    ,2
-                  )
-                );
-
-                // get the rotation
-                a = 180 / 3.14 * Math.acos((pos2.top - pos1.top) / l);
-                if(pos2.left > pos1.left)
-                  a *= -1;
-
-                // console.log("a = "+a);
-                _this.lines[i].$line.css({
-                  'height':l,
-                  rotate:a+"deg"
-                });
-
-              };
-
-              console.log("anime line interval");
-              // limit the naimation time
-              _this.linesAnimeCounter ++;
-              if(_this.linesAnimeCounter > (1000/_fps)*_this.linesAnimeTime)
-                clearInterval(_this.linesAnimeInterval);
-            };
-          }(this)),
-        _fps);
+      Chapter.prototype.animeLines = function(timestamp){
+        // console.log("anime line "+this.nid);
+        // get the time on first anime launch
+        if(this.linesAnimeStartTime === 0)
+          this.linesAnimeStartTime = timestamp;
+
+        // limit the animation time
+        if(timestamp - this.linesAnimeStartTime < this.linesAnimeDuration){
+          requestAnimationFrame(this.animeLines.bind(this));
+        }else{
+          this.linesAnimeStartTime = 0;
+        }
+
+        // get the lines length
+        var l, a, pos1, pos2;
+        for (var i = 0; i < this.lines.length; i++) {
+          pos1 =  this.$parties.eq(i).position();
+          pos2 = this.$parties.eq(i+1).position();
+
+          l = Math.sqrt(
+            Math.pow(
+              pos2.left - pos1.left
+              ,2
+            )
+            +
+            Math.pow(
+              pos2.top - pos1.top
+              ,2
+            )
+          );
+
+          // get the rotation
+          a = 180 / 3.14 * Math.acos((pos2.top - pos1.top) / l);
+          if(pos2.left > pos1.left)
+            a *= -1;
+
+          // console.log("a = "+a);
+          this.lines[i].$line.css({
+            'height':l,
+            transform:"rotate3d(0,0,1,"+a+"deg)"
+          });
+
+        };
       };
 
       Chapter.prototype.loadNode = function(e){
@@ -441,6 +442,20 @@ jQuery(document).ready(function($) {
       return o;
   };
 
+  if (!Date.now) {
+    Date.now = function now() {
+      return new Date().getTime();
+    };
+  }
+
+  /*
+      _       _ __
+     (_)___  (_) /_
+    / / __ \/ / __/
+   / / / / / / /_
+  /_/_/ /_/_/\__/
+
+  */
   init();
 });
 

sites/all/themes/gui/jee/templates/node--chapitre.tpl.php

@@ -1,102 +1,21 @@
-<?php
-
-/**
- * @file
- * Default theme implementation to display a node.
- *
- * Available variables:
- * - $title: the (sanitized) title of the node.
- * - $content: An array of node items. Use render($content) to print them all,
- *   or print a subset such as render($content['field_example']). Use
- *   hide($content['field_example']) to temporarily suppress the printing of a
- *   given element.
- * - $user_picture: The node author's picture from user-picture.tpl.php.
- * - $date: Formatted creation date. Preprocess functions can reformat it by
- *   calling format_date() with the desired parameters on the $created variable.
- * - $name: Themed username of node author output from theme_username().
- * - $node_url: Direct URL of the current node.
- * - $display_submitted: Whether submission information should be displayed.
- * - $submitted: Submission information created from $name and $date during
- *   template_preprocess_node().
- * - $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:
- *   - node: The current template type; for example, "theming hook".
- *   - node-[type]: The current node type. For example, if the node is a
- *     "Blog entry" it would result in "node-blog". Note that the machine
- *     name will often be in a short form of the human readable label.
- *   - node-teaser: Nodes in teaser form.
- *   - node-preview: Nodes in preview mode.
- *   The following are controlled through the node publishing options.
- *   - node-promoted: Nodes promoted to the front page.
- *   - node-sticky: Nodes ordered above other non-sticky nodes in teaser
- *     listings.
- *   - node-unpublished: Unpublished nodes visible only to administrators.
- * - $title_prefix (array): An array containing additional output populated by
- *   modules, intended to be displayed in front of the main title tag that
- *   appears in the template.
- * - $title_suffix (array): An array containing additional output populated by
- *   modules, intended to be displayed after the main title tag that appears in
- *   the template.
- *
- * Other variables:
- * - $node: Full node object. Contains data that may not be safe.
- * - $type: Node type; for example, story, page, blog, etc.
- * - $comment_count: Number of comments attached to the node.
- * - $uid: User ID of the node author.
- * - $created: Time the node was published formatted in Unix timestamp.
- * - $classes_array: Array of html class attribute values. It is flattened
- *   into a string within the variable $classes.
- * - $zebra: Outputs either "even" or "odd". Useful for zebra striping in
- *   teaser listings.
- * - $id: Position of the node. Increments each time it's output.
- *
- * Node status variables:
- * - $view_mode: View mode; for example, "full", "teaser".
- * - $teaser: Flag for the teaser state (shortcut for $view_mode == 'teaser').
- * - $page: Flag for the full page state.
- * - $promote: Flag for front page promotion state.
- * - $sticky: Flags for sticky post setting.
- * - $status: Flag for published status.
- * - $comment: State of comment settings for the node.
- * - $readmore: Flags true if the teaser content of the node cannot hold the
- *   main body content.
- * - $is_front: Flags true when presented in the front page.
- * - $logged_in: Flags true when the current user is a logged-in member.
- * - $is_admin: Flags true when the current user is an administrator.
- *
- * Field variables: for each field instance attached to the node a corresponding
- * variable is defined; for example, $node->body becomes $body. When needing to
- * access a field's raw values, developers/themers are strongly encouraged to
- * use these variables. Otherwise they will have to explicitly specify the
- * desired field language; for example, $node->body['en'], thus overriding any
- * language negotiation rule that was previously applied.
- *
- * @see template_preprocess()
- * @see template_preprocess_node()
- * @see template_process()
- *
- * @ingroup themeable
- */
-?>
-<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>
-
-  <?php print $user_picture; ?>
-
-  <?php print render($title_prefix); ?>
+<section id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>
   <?php if (!$page): ?>
     <h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2>
   <?php endif; ?>
-  <?php
-      print render($title_suffix);
-
-      // We hide the comments and links now so that we can render them later.
-      hide($content['comments']);
-      hide($content['links']);
-      print render($content);
-
+  <div class="content">
+    <?php
+    // We hide the comments and links now so that we can render them later.
+    // dsm($content, "content");
+    hide($content['comments']);
+    hide($content['links']);
+    hide($content['field_comprendre']);
+    ?>
+    <div class="texts">
+    <?php
+      print render($content['field_comprendre']);
       print render($content['links']);
-  ?>
-
-</div>
+    ?>
+    </div>
+    <?php print render($content); ?>
+  </div>
+</section>