blocs pos:absolute

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: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}em{font-style:italic}strong{font-family:Rubik-Bold}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}p strong{font-family:CooperHewitt-BoldItalic}.top>div:nth-child(1){color:#fff}.top>div: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);opacity:.5;background:green}#page .hand2{right:calc((100%/3) - 25px);opacity:.5;background:red}#page .mouseDown{cursor:-webkit-grabbing;cursor:grabbing}#page #start{width:100%;height:calc(100% - 50px)}#page #start .bottom,#page #start .top{display:-ms-inline-flexbox;display:inline-flex;width:100%;-ms-flex-pack:justify;justify-content:space-between}#page #start img{transition:filter .5s;filter:grayscale(100%) contrast(4)}#page #start img:hover{transition:filter .5s;filter:grayscale(0)}#page #start .top{position:relative;height:calc(100% / 2)}#page #start .top>div:nth-child(-n+2){padding:0 20px}#page #start .top>div:nth-child(1){background:#969696}#page #start .bottom{position:absolute;top:calc(100% / 2 + 25px);bottom:0;height:auto}#page #start .blocs{overflow-y:auto;width:calc(100% / 3);min-width:200px;margin:2px}#page #start .blocs:nth-child(2){left:calc(100% / 3);background:#fff}#page #start .blocs:nth-child(3){background:#fff}#page #start #links canvas{top:0;left:0}#page #start #links canvas[resize]{width:100vw;height:100vh}#page #start #streetmap>div:nth-of-type(1){height:100%}#page #start #streetmap #mapid{width:100%;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 .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{top:0;left:0}#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

@@ -224,10 +224,10 @@ function map() {
 }
 
 $(document).ready(function() {
-  wrap();
+  // wrap();
   map();
-  dragcanvas();
+  // dragcanvas();
-  clickhand();
+  // clickhand();
-  drag();
+  // drag();
   // scrollbar();
 });

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

@@ -3,6 +3,7 @@
 @include font-face($CooperHewitt-italic, $file2, $family2, $category2);
 @include font-face($rubik, $file3, $family3, $category3);
 @include font-face($rubik-B, $file4, $family3, $category3);
+@include font-face($rubik-MI, $file6, $family3, $category3);
 @include font-face($cmu, $file5, $family5, $category5);
 
 // Fonts-size
@@ -19,14 +20,18 @@ $marginbody: 35px;
 $heightH: (25px);
 
 // taille & position blocs
+// marge blocs
+$mrgbloc: 1px;
 
 // height
 $H100: 100%;
 $H50: calc(#{$H100} / 2);
-$H50-25: calc(#{$H100} / 2 + #{$heightH});
+$H50-25: calc((#{$H100} / 2 - #{$heightH}) - #{$mrgbloc});
+$T50-25: calc((#{$H100} / 2 + #{$heightH}) + #{$mrgbloc});
+
 // width
 $W100: 100%;
-$W33: calc(#{$W100} / 3);
+$W33: calc((#{$W100} / 3) - #{$mrgbloc});
 
 // top
 $T100: 100%;
@@ -39,5 +44,5 @@ $B100: 100%;
 
 // left
 $L100: 100%;
-$L33: calc(#{$L100} / 3);
+$L33: calc((#{$L100} / 3) + #{$mrgbloc});
 $L66: calc(#{$L33} * 2);

user/themes/r2c/scss/configuration/_mixin.scss

@@ -97,6 +97,29 @@ $file4: "Rubik-Bold";
     }
 }
 
+$rubik-MI: "Rubik-MediumItalic";
+$file6: "Rubik-MediumItalic";
+
+@mixin font-face($rubik-MI, $file6, $family3, $category3:"") {
+    $filepath: "../fonts/" + $family3 + "/" + $file6;
+    @font-face {
+        font-family: "#{$rubik-MI}";
+        src: url($filepath + ".eot");
+        src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf")  format('truetype'), url($filepath + ".svg#" + $rubik-MI + "") format('svg');
+    }
+    %#{$rubik-MI} {
+        font: {
+            @if $category3 != "" {
+                family: "#{$rubik-MI}", #{$category3};
+            }
+            @else {
+                family: "#{$rubik-MI}";
+                weight: normal;
+            }
+        }
+    }
+}
+
 $cmu: "cmu-concrete-ita";
 $file5: "cmunoti";
 $family5: "Concrete";

user/themes/r2c/scss/template/_reset.scss

@@ -69,6 +69,9 @@ table {
 
 p{
 	font-style: normal;
+  &:last-child{
+    margin: 0;
+  }
 }
 
 em{
@@ -76,6 +79,10 @@ em{
 }
 
 strong{
-	// font-weight: bolder;
+	font-weight: normal;
-  font-family: $rubik-B;
+  font-family: $rubik-MI;
+}
+
+text{
+  font-family: $rubik;
 }

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

@@ -19,14 +19,10 @@ body{
     cursor: grab;
   }
   .hand1{
-    background: green;
-    opacity: 0.5;
     left : calc((100%/3) - 25px);
   }
 
   .hand2{
-    background: red;
-    opacity: 0.5;
     right: calc((100%/3) - 25px);
   }
 
@@ -37,11 +33,6 @@ body{
   #start{
     width: 100%;
     height: calc(100% - 50px);
-    .top, .bottom{
-      width: 100%;
-      display: inline-flex;
-      justify-content: space-between;
-    }
     img{
       filter: grayscale(100%) contrast(4);
       transition: filter 0.5s;
@@ -50,36 +41,34 @@ body{
         transition: filter 0.5s;
       }
     }
-    .top{
-      position: relative;
-      height: $H50;
-      & > div{
-        &:nth-child(-n+2){
-          padding: 0px 20px;
-        }
-        &:nth-child(1){
-          background: rgb(150, 150, 150);
-        }
-      }
-    }
-    .bottom{
-      position: absolute;
-      height: auto;
-      top: $H50-25;
-      bottom: 0;
-    }
     .blocs{
-      // position: relative;
+      position: absolute;
       overflow-y: auto;
-      margin: 2px;
+      margin: 0;
       width: $W33;
+      height: $H50-25;
       min-width: 200px;
-      &:nth-child(2){
+      &:nth-child(1){
+        background: rgb(150, 150, 150);
+      }
+      &:nth-child(-n+2){
+        padding: 0px 20px;
+      }
+      &:nth-child(3n+2){
         background: white;
         left: $L33;
       }
-      &:nth-child(3){
+      &:nth-child(3n+3){
         background: white;
+        right: -1px;
+      }
+      &:nth-child(n+4){
+        top: $T50-25;
+      }
+      &:nth-of-type(-n+2){
+        & > div:nth-child(n+1){
+            margin-bottom: 25px;
+          }
       }
     }
 
@@ -104,7 +93,7 @@ body{
         height: 100%;
       }
       #mapid {
-        width: 100%;
+        width: 100vw;
         height: 100%;
       }
     }

user/themes/r2c/scss/template/_typography.scss

@@ -21,18 +21,14 @@ p{
   a{
     font-family: $cmu;
   }
-  strong{
-    font-family: $CooperHewitt-italic;
-  }
 }
 
-.top{
+
-  & > div{
+.blocs{
-    &:nth-child(1){
+  &:nth-child(1){
-      color: white;
+    color: white;
-      a{
+    a{
-        color: rgb(0, 0, 255);
+      color: rgb(0, 0, 255);
-      }
     }
   }
 }

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

@@ -72,8 +72,12 @@
     {% endblock %}
 
     {% block hero %}{% endblock %}
-        <div class="handler hand1"></div>
+        <div class="handler hand1">
-        <div class="handler hand2"></div>
+          <img src="user/themes/r2c/images/handler.svg" alt="">
+        </div>
+        <div class="handler hand2">
+          <img src="user/themes/r2c/images/handler.svg" alt="">
+        </div>
 
           <section id="start">
         {% block body %}