drag responsive

user/pages/01._recits/_11-avril-2017/text.md

@@ -5,7 +5,7 @@ image_align: left
 id: rct_110417
 ---
 
-Première découverte du centre de Saint-Denis - [jour 1](#float-left)
+Première découverte du centre de Saint-Denis - [jour 1](#float-left#cc)[](http://facebook.com)
 
 Aujourd'hui, je me rends pour la première fois dans la ville de Saint Denis.
 J’y découvre d'abord, en sortant de la station de métro, le quartier de la Basilique ou j’apprécie la place avec tous ses cafés. Le contraste entre l'architecture de la Basilique et celle de Gailhoustet sur la place du Caquet est frappant.

user/themes/r2c/css-compiled/template.min.css

@@ -1 +1 @@
-@font-face{font-family:CooperHewitt;src:url(../fonts/CooperHewitt/CooperHewitt-Bold.eot);src:url(../fonts/CooperHewitt/CooperHewitt-Bold.eot?#iefix) format('embedded-opentype'),url(../fonts/CooperHewitt/CooperHewitt-Bold.woff) format('woff'),url(../fonts/CooperHewitt/CooperHewitt-Bold.ttf) format('truetype'),url(../fonts/CooperHewitt/CooperHewitt-Bold.svg#CooperHewitt) format('svg')}@font-face{font-family:CooperHewitt-BoldItalic;src:url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.eot);src:url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.eot?#iefix) format('embedded-opentype'),url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.woff) format('woff'),url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.ttf) format('truetype'),url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.svg#CooperHewitt-BoldItalic) format('svg')}@font-face{font-family:rubik;src:url(../fonts/rubik/Rubik-Light.eot);src:url(../fonts/rubik/Rubik-Light.eot?#iefix) format('embedded-opentype'),url(../fonts/rubik/Rubik-Light.woff) format('woff'),url(../fonts/rubik/Rubik-Light.ttf) format('truetype'),url(../fonts/rubik/Rubik-Light.svg#rubik) format('svg')}@font-face{font-family:Rubik-Bold;src:url(../fonts/rubik/Rubik-Bold.eot);src:url(../fonts/rubik/Rubik-Bold.eot?#iefix) format('embedded-opentype'),url(../fonts/rubik/Rubik-Bold.woff) format('woff'),url(../fonts/rubik/Rubik-Bold.ttf) format('truetype'),url(../fonts/rubik/Rubik-Bold.svg#Rubik-Bold) format('svg')}@font-face{font-family:Rubik-MediumItalic;src:url(../fonts/rubik/Rubik-MediumItalic.eot);src:url(../fonts/rubik/Rubik-MediumItalic.eot?#iefix) format('embedded-opentype'),url(../fonts/rubik/Rubik-MediumItalic.woff) format('woff'),url(../fonts/rubik/Rubik-MediumItalic.ttf) format('truetype'),url(../fonts/rubik/Rubik-MediumItalic.svg#Rubik-MediumItalic) format('svg')}@font-face{font-family:cmu-concrete-ita;src:url(../fonts/Concrete/cmunoti.eot);src:url(../fonts/Concrete/cmunoti.eot?#iefix) format('embedded-opentype'),url(../fonts/Concrete/cmunoti.woff) format('woff'),url(../fonts/Concrete/cmunoti.ttf) format('truetype'),url(../fonts/Concrete/cmunoti.svg#cmu-concrete-ita) format('svg')}*{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{font:inherit;font-size:16px;margin:0;padding:0;vertical-align:baseline;border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,html{height:100%}body{line-height:1}ol,ul{list-style:none}a{text-decoration:none;color:#000}blockquote,q{quotes:none}img{width:100%;height:100%;vertical-align:bottom}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-spacing:0;border-collapse:collapse}p{font-style:normal}p:last-child{margin:0}em{font-style:italic}strong{font-family:Rubik-MediumItalic;font-weight:400}text{font-family:rubik}h1{font-size:1.2rem;line-height:50px}h1 a{font-family:CooperHewitt;font-weight:400}h2{font-family:CooperHewitt-BoldItalic;font-size:1.1rem;line-height:50px}p{font-family:rubik;font-size:1rem;line-height:1.3rem;margin-bottom:12px}p a{font-family:cmu-concrete-ita}.blocs:nth-child(1){color:#fff}.blocs:nth-child(1) a{color:#00f}body{overflow:hidden;background:#e6e6e6}#page{height:100%}#page .navbar{width:100%;height:50px}#page .handler{position:absolute;z-index:999;top:50%;width:50px;height:50px;cursor:-webkit-grab;cursor:grab;border-radius:25px}#page .hand1{left:calc((100%/3) - 25px)}#page .hand2{right:calc((100%/3) - 25px)}#page .mouseDown{cursor:-webkit-grabbing;cursor:grabbing}#page #start{width:100%;height:calc(100% - 50px)}#page #start img{transition:filter .5s;filter:grayscale(100%) contrast(4)}#page #start img:hover{transition:filter .5s;filter:grayscale(0)}#page #start .blocs{position:absolute;overflow-y:auto;width:calc((100% / 3) - 1px);min-width:200px;height:calc((100% / 2 - 25px) - 1px);margin:0}#page #start .blocs:nth-child(1){background:#969696}#page #start .blocs:nth-child(-n+2){padding:0 20px}#page #start .blocs:nth-child(3n+2){left:calc((100% / 3) + 1px);background:#fff}#page #start .blocs:nth-child(3n+3){right:-1px;background:#fff}#page #start .blocs:nth-child(n+4){top:calc((100% / 2 + 25px) + 1px)}#page #start .blocs:nth-of-type(-n+2)>div:nth-child(n+1){margin-bottom:25px}#page #start #links canvas[resize]{width:100vw;height:100vh}#page #start #streetmap>div:nth-of-type(1){height:100%}#page #start #streetmap #mapid{width:100vw;height:100%}
+@font-face{font-family:CooperHewitt;src:url(../fonts/CooperHewitt/CooperHewitt-Bold.eot);src:url(../fonts/CooperHewitt/CooperHewitt-Bold.eot?#iefix) format('embedded-opentype'),url(../fonts/CooperHewitt/CooperHewitt-Bold.woff) format('woff'),url(../fonts/CooperHewitt/CooperHewitt-Bold.ttf) format('truetype'),url(../fonts/CooperHewitt/CooperHewitt-Bold.svg#CooperHewitt) format('svg')}@font-face{font-family:CooperHewitt-BoldItalic;src:url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.eot);src:url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.eot?#iefix) format('embedded-opentype'),url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.woff) format('woff'),url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.ttf) format('truetype'),url(../fonts/CooperHewitt/CooperHewitt-BoldItalic.svg#CooperHewitt-BoldItalic) format('svg')}@font-face{font-family:rubik;src:url(../fonts/rubik/Rubik-Light.eot);src:url(../fonts/rubik/Rubik-Light.eot?#iefix) format('embedded-opentype'),url(../fonts/rubik/Rubik-Light.woff) format('woff'),url(../fonts/rubik/Rubik-Light.ttf) format('truetype'),url(../fonts/rubik/Rubik-Light.svg#rubik) format('svg')}@font-face{font-family:Rubik-Bold;src:url(../fonts/rubik/Rubik-Bold.eot);src:url(../fonts/rubik/Rubik-Bold.eot?#iefix) format('embedded-opentype'),url(../fonts/rubik/Rubik-Bold.woff) format('woff'),url(../fonts/rubik/Rubik-Bold.ttf) format('truetype'),url(../fonts/rubik/Rubik-Bold.svg#Rubik-Bold) format('svg')}@font-face{font-family:Rubik-MediumItalic;src:url(../fonts/rubik/Rubik-MediumItalic.eot);src:url(../fonts/rubik/Rubik-MediumItalic.eot?#iefix) format('embedded-opentype'),url(../fonts/rubik/Rubik-MediumItalic.woff) format('woff'),url(../fonts/rubik/Rubik-MediumItalic.ttf) format('truetype'),url(../fonts/rubik/Rubik-MediumItalic.svg#Rubik-MediumItalic) format('svg')}@font-face{font-family:cmu-concrete-ita;src:url(../fonts/Concrete/cmunoti.eot);src:url(../fonts/Concrete/cmunoti.eot?#iefix) format('embedded-opentype'),url(../fonts/Concrete/cmunoti.woff) format('woff'),url(../fonts/Concrete/cmunoti.ttf) format('truetype'),url(../fonts/Concrete/cmunoti.svg#cmu-concrete-ita) format('svg')}*{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{font:inherit;font-size:16px;margin:0;padding:0;vertical-align:baseline;border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,html{height:100%}body{line-height:1}ol,ul{list-style:none}a{text-decoration:none;color:#000}blockquote,q{quotes:none}img{width:100%;height:100%;vertical-align:bottom}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-spacing:0;border-collapse:collapse}p{font-style:normal}p:last-child{margin:0}em{font-style:italic}strong{font-family:Rubik-MediumItalic;font-weight:400}text{font-family:rubik}h1{font-size:1.2rem;line-height:50px}h1 a{font-family:CooperHewitt;font-weight:400}h2{font-family:CooperHewitt-BoldItalic;font-size:1.1rem;line-height:50px}p{font-family:rubik;font-size:1rem;line-height:1.3rem;margin-bottom:12px}p a{font-family:cmu-concrete-ita}.blocs:nth-child(1){color:#fff}.blocs:nth-child(1) a{color:#00f}body{overflow:hidden;background:#e6e6e6}#page{height:100%}#page .navbar{width:100%;height:50px}#page #start{position:relative;width:100%;height:calc(100% - 50px)}#page #start .handler{position:absolute;z-index:999;top:50%;width:50px;height:50px;cursor:-webkit-grab;cursor:grab;border-radius:25px}#page #start .hand1{left:calc((100%/3));margin-top:-24px;margin-left:-26px}#page #start .hand2{left:calc((100%/3) * 2);margin-top:-24px;margin-left:-25px}#page #start .hand2 img{margin-left:1px}#page #start .mouseDown{cursor:-webkit-grabbing;cursor:grabbing}#page #start img{transition:filter .5s;filter:grayscale(100%) contrast(4)}#page #start img:hover{transition:filter .5s;filter:grayscale(0)}#page #start .blocs{position:absolute;overflow-y:auto;width:calc((100% / 3));min-width:200px;height:calc((100% / 2));margin:0}#page #start .blocs:nth-child(3n+2){left:-2px}#page #start .blocs:nth-of-type(2){background:#969696}#page #start .blocs:nth-child(-n+3){padding:0 20px}#page #start .blocs:nth-child(3n+3){left:calc((100% / 3));background:#fff}#page #start .blocs:nth-child(3n+4){right:-2px;background:#fff}#page #start .blocs:nth-child(n+5){top:calc((100% / 2));margin-top:2px}#page #start .blocs:nth-of-type(-n+2)>div:nth-child(n+1){margin-bottom:25px}#page #start #links canvas[resize]{width:100vw;height:100vh}#page #start #streetmap>div:nth-of-type(1){height:100%}#page #start #streetmap #mapid{width:100vw;height:100%}

user/themes/r2c/js/script.js

@@ -22,90 +22,82 @@ function drag() {
   var $hand1 = $( ".hand1" );
   var $hand2 = $( ".hand2" );
 
-  // General
-    // origine
-    var oW = parseFloat($(window).outerWidth(true));
-    var oH = parseFloat($(window).outerHeight(true));
-    // pourcent
   var p = 100;
 
+  //marge
+  var mrg = 1;
+
   // Blocs
     // find
-    var $recits = $hand.parent('#page').find('#recits');
+    var $recits = $hand.parents('#page').find('#recits');
-    var $itw = $hand.parent('#page').find("#interviews");
+    var $itw = $hand.parents('#page').find("#interviews");
-    var $img = $hand.parent('#page').find("#images");
+    var $img = $hand.parents('#page').find("#images");
-    var $stmp = $hand.parent('#page').find("#streetmap");
+    var $stmp = $hand.parents('#page').find("#streetmap");
-    var $rs = $hand.parent('#page').find("#reseaux-sociaux");
+    var $rs = $hand.parents('#page').find("#reseaux-sociaux");
-    var $links = $hand.parent('#page').find("#links");
+    var $links = $hand.parents('#page').find("#links");
 
     // handler
       // dimension
-      var $Whand = $hand.outerWidth(true);
+      var $Whand = parseFloat($hand.outerWidth(true));
-      var $Hhand = $hand.outerHeight(true);
+      var $Hhand = parseFloat($hand.outerHeight(true));
 
   $hand1.draggable({
     containment: "#start",
     scroll: false,
-    drag: function(event, ui){
 
-      // var dragDistance = 300;
+    drag: function(event, ui){
-      // ui.position.left = Math.min( ui.position.left,  ui.helper.next().offset().left + ui.helper.next().width() - dragDistance);
+      var oW = parseFloat($("#start").outerWidth(true));
-      // ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistance);
+      var oH = parseFloat($("#start").outerHeight(true));
-      //
+
-      // // ui.position.top = Math.max( ui.position.top, ui.helper.prev().offset().top + ui.helper.prev().outerHeight() - dragDistance);
+      var ajustH = (100 * ( 25/ oH )) + "%";
-      // ui.position.top = Math.max(ui.position.top, ui.helper.prev().offset().top + dragDistance);
+
+      var stophand = (0.8 * oW) - 130;
+          ui.position.left = Math.max( 200, ui.position.left );
+          ui.position.left = Math.min( stophand, ui.position.left );
       // handler
         // position
         var pos = $hand1.position();
+
         var pos1 = $hand2.position();
+        var pos11 = parseFloat(pos1.left) + 25;
 
-        // center
+        // center handler
-        var ajustW = $Whand / 2 - 1;
+        var ajustW = $Whand / 2;
-        var ajustH = $Hhand / 2 + 1;
+        var ajustH = $Hhand / 2;
-
-        var ajustW2 = $Whand / 2 + 1;
-        var ajustH2 = $Hhand / 2 + 1;
-
-        var ajustW3 = $Whand / 2 - 3;
-        var ajustH3 = $Hhand / 2 + 1;
 
         // position XY
-        var xPos = ( p * parseFloat( (pos.left + ajustW ) / oW)+ "%" );
+        var xPos = ( p * parseFloat( ((ui.position.left)) / oW) ) + "%" ;
-        var yPos = ( p * parseFloat( (pos.top - ajustH ) / oH ) ) + "%" ;
+        var yPos = ( p * parseFloat( ((ui.position.top)) / oH ) ) + "%" ;
 
-        var xPos2 = ( p * parseFloat( (pos.left + ajustW2 ) / oW ) ) + "%";
+        var xPos2 = ( p * parseFloat( ((ui.position.left ) ) / oW) ) + "%";
-        var yPos2 = ( p * parseFloat( (pos.top + ajustH ) / oH ) ) + "%" ;
+        var yPos2 = ( p * parseFloat( ((ui.position.top ) ) / oH) ) + "%" ;
-
-        var xPos3 = ( p * parseFloat( (pos1.left + ajustW3) / oW ) ) + "%";
-        var yPos3 = ( p * parseFloat( (pos.top ) / oH ) ) + "%" ;
 
+        var xPos3 = ( p * parseFloat( (pos1.left + ajustW) / oW) ) + "%";
+        var yPos3 = ( p * parseFloat( (ui.position.top ) / oH) ) + "%" ;
         //handler2
         var $handler2 = $(this).parent().find('.hand2');
-        var PosHand = (parseFloat(xPos3) - parseFloat(xPos)) + "%";
+        var PosHand = ( parseFloat(p * parseFloat((pos11 - 25) / oW)) - parseFloat(p * parseFloat( (ui.position.left) / oW)) ) + "%";
 
         // application dimension
-        $(this).css({
-          'left': xPos,
-          'top': yPos,
-        })
-
         $hand2.css({
           'top': yPos3,
         })
-
         $recits.css({
           "width": xPos,
           "height": yPos,
+          "left": "-2px",
         })
 
         $itw.css({
           "left":xPos2,
           "width": PosHand,
           "height": yPos,
+          "min-width": "200px"
         })
 
         $img.css({
           "height": yPos,
+          "min-width": "200px",
         })
 
         $stmp.css({
@@ -128,7 +120,32 @@ function drag() {
           "bottom":0,
           "height": 'auto',
         })
-    }
+
+        // if itw < 200
+        var testPourcent = parseFloat( p * parseFloat(ui.position.left + 238) / oW ) + "%";
+        var img200 = parseFloat( p * parseFloat( (oW - (pos11 - 25 )) / oW) ) + "%" ;
+
+        if ( $itw.width() < 200) {
+          $img.css({
+            "width": img200,
+          })
+          $links.css({
+            "width": img200,
+          })
+          $hand2.css({
+            'left':testPourcent,
+          })
+        } else {}
+    },
+
+      stop: function( event, ui ) {
+        var parent = $(this).parents('#start');
+        $(this).css({
+          left:parseInt($(this).css('left'))/parent.width()*100+"%",
+          top: parseInt($(this).css('top'))/parent.height()*100+"%",
+        });
+
+      },
   });
 
   $hand2.draggable({
@@ -136,21 +153,24 @@ function drag() {
     scroll: false,
 
     drag: function(event, ui){
-      // var dragDistance = 300;
+      var oW = parseFloat($("#start").outerWidth(true));
-      // ui.position.left = Math.min( ui.position.left,  ui.helper.next().offset().left + ui.helper.next().width() - dragDistance);
+      var oH = parseFloat($("#start").outerHeight(true));
-      // ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistance);
+
-      //
+      var stophand = (oW - 200) - 50;
-      // // ui.position.top = Math.max( ui.position.top, ui.helper.prev().offset().top + ui.helper.prev().outerHeight() - dragDistance);
+      console.log(stophand)
-      // ui.position.top = Math.max(ui.position.top, ui.helper.prev().offset().top + dragDistance);
+          ui.position.left = Math.max( 400, ui.position.left );
+          ui.position.left = Math.min( stophand, ui.position.left );
 
       // handler
         // position
         var pos = $hand1.position();
         var pos1 = $hand2.position();
+        var pos11 = parseFloat(pos.left) + 25;
 
         // center
         var ajustW = $Whand / 2 - 1;
         var ajustH = $Hhand / 2 + 1;
+        var ajustW200 = $Whand / 2 + 6;
 
         var ajustW2 = $Whand / 2 + 1;
         var ajustH2 = $Hhand / 2 + 1;
@@ -159,26 +179,26 @@ function drag() {
         var ajustH3 = $Hhand / 2 + 1;
 
         // position XY
-        var xPos = ( p * parseFloat( ( oW - (pos1.left + ajustW) ) / oW) + "%" );
+        var xPos = ( p * parseFloat( ( oW - (ui.position.left) ) / oW) + "%" );
-        var yPos = ( p * parseFloat( (pos1.top - ajustH ) / oH ) ) + "%" ;
+        var yPos = ( p * parseFloat( (ui.position.top ) / oH ) ) + "%" ;
 
-        var xPos2 = ( p * parseFloat( ( oW - (pos1.left + ajustW2) ) / oW ) ) + "%";
+        var xPos2 = ( p * parseFloat( ( oW - (ui.position.left) ) / oW ) ) + "%";
-        var yPos2 = ( p * parseFloat( (pos1.top + ajustH ) / oH ) ) + "%" ;
+        var yPos2 = ( p * parseFloat( (ui.position.top ) / oH ) ) + "%" ;
 
-        var xPos3 = ( p * parseFloat( (oW - (pos.left + ajustW3)) / oW ) ) + "%";
+        // var xPos3 = ( p * parseFloat( (oW - (pos.left)) / oW ) ) + "%";
-        var yPos3 = ( p * parseFloat( (pos1.top ) / oH ) ) + "%" ;
+        var xPos3 = ( p * parseFloat( (pos1.left + ajustW) / oW) ) + "%";
+
+        var yPos3 = ( p * parseFloat( (ui.position.top ) / oH ) ) + "%" ;
 
         //handler2
         var $handler2 = $(this).parent().find('.hand2');
 
+
         var PosHand = (parseFloat(xPos3) - parseFloat(xPos)) + "%";
 
-        // application dimension
+        var PosHand1 = ( parseFloat(p * parseFloat( (ui.position.left) / oW)) - parseFloat(p * parseFloat((pos11 - 25) / oW))) + "%";
-        $(this).css({
-          'left': xPos,
-          'top': yPos
-        })
 
+        // application dimension
         $hand1.css({
           'top': yPos3,
         })
@@ -188,7 +208,7 @@ function drag() {
         })
 
         $itw.css({
-          "width": PosHand,
+          "width": PosHand1,
           "height": yPos,
         })
 
@@ -205,7 +225,7 @@ function drag() {
 
         $rs.css({
           "top": yPos2,
-          "width":PosHand,
+          "width":PosHand1,
           "bottom":"1px",
           "height": 'auto',
           })
@@ -216,7 +236,40 @@ function drag() {
           "bottom":0,
           "height": 'auto',
         })
+
+        // if itw < 200
+        var test = ui.position.left - 200;
+        var testPourcent = ( p * parseFloat(test) / oW ) + "%";
+        var img200 = ( p * parseFloat(  ((pos.left) ) / oW) + "%" );
+
+        if ( $itw.width() < 200) {
+          $recits.css({
+            "width": img200,
+          })
+          $stmp.css({
+            "width": img200,
+          })
+          $itw.css({
+            "left": img200,
+          })
+          $rs.css({
+            "left": img200,
+          })
+          $hand1.css({
+            'left':test,
+          })
+        }else {
+
         }
+    },
+    stop: function( event, ui ) {
+      var parent = $(this).parents("#start");
+      $(this).css({
+        left:parseInt($(this).css('left'))/parent.width()*100+"%",
+        top: parseInt($(this).css('top'))/parent.height()*100+"%",
+      });
+
+    },
   });
 };
 

user/themes/r2c/scss/configuration/_config.scss

@@ -26,12 +26,12 @@ $mrgbloc: 1px;
 // height
 $H100: 100%;
 $H50: calc(#{$H100} / 2);
-$H50-25: calc((#{$H100} / 2 - #{$heightH}) - #{$mrgbloc});
+$H50-25: calc((#{$H100} / 2 );
-$T50-25: calc((#{$H100} / 2 + #{$heightH}) + #{$mrgbloc});
+$T50-25: calc((#{$H100} / 2 );
 
 // width
 $W100: 100%;
-$W33: calc((#{$W100} / 3) - #{$mrgbloc});
+$W33: calc((#{$W100} / 3));
 
 // top
 $T100: 100%;
@@ -44,5 +44,5 @@ $B100: 100%;
 
 // left
 $L100: 100%;
-$L33: calc((#{$L100} / 3) + #{$mrgbloc});
+$L33: calc((#{$L100} / 3));
 $L66: calc(#{$L33} * 2);

user/themes/r2c/scss/template/_section.scss

@@ -9,6 +9,12 @@ body{
     width: 100%;
     height: 50px;
   }
+
+
+  #start{
+    width: 100%;
+    height: calc(100% - 50px);
+    position: relative;
     .handler{
       width: 50px;
       height: 50px;
@@ -19,18 +25,21 @@ body{
       cursor: grab;
     }
     .hand1{
-    left : calc((100%/3) - 25px);
+      left : calc((100%/3));
+      margin-left: -26px;
+      margin-top: -24px;
     }
     .hand2{
-    right: calc((100%/3) - 25px);
+      left: calc((100%/3) * 2);
+      margin-left: -25px;
+      margin-top: -24px;
+      img{
+        margin-left: 1px;
+      }
     }
     .mouseDown{
       cursor: grabbing;
     }
-
-  #start{
-    width: 100%;
-    height: calc(100% - 50px);
     img{
       filter: grayscale(100%) contrast(4);
       transition: filter 0.5s;
@@ -44,24 +53,28 @@ body{
       overflow-y: auto;
       margin: 0;
       width: $W33;
-      height: $H50-25;
       min-width: 200px;
-      &:nth-child(1){
+      height: $H50-25;
+      &:nth-child(3n+2){
+        left: -2px;
+      }
+      &:nth-of-type(2){
         background: rgb(150, 150, 150);
       }
-      &:nth-child(-n+2){
+      &:nth-child(-n+3){
         padding: 0px 20px;
       }
-      &:nth-child(3n+2){
-        background: white;
-        left: $L33;
-      }
       &:nth-child(3n+3){
         background: white;
-        right: -1px;
+        left: $L33;
       }
-      &:nth-child(n+4){
+      &:nth-child(3n+4){
+        background: white;
+        right: -2px;
+      }
+      &:nth-child(n+5){
         top: $T50-25;
+        margin-top: 2px;
       }
       &:nth-of-type(-n+2){
         & > div:nth-child(n+1){

user/themes/r2c/templates/partials/base.html.twig

@@ -74,6 +74,10 @@
 
     {% block hero %}{% endblock %}
 
+
+          <section id="start">
+            <div id="handlers">
+
             <div class="handler hand1">
               <img src="user/themes/r2c/images/handler.svg" alt="">
             </div>
@@ -81,8 +85,7 @@
             <div class="handler hand2">
               <img src="user/themes/r2c/images/handler.svg" alt="">
             </div>
-
+          </div>
-          <section id="start">
         {% block body %}
             <section id="body-wrapper" class="section">
                 <section class="container {{ grid_size }}">