blocs pos:absolute

user/themes/r2c/js/script.js

@@ -224,10 +224,10 @@ function map() {
 }
 
 $(document).ready(function() {
-  wrap();
+  // wrap();
   map();
-  dragcanvas();
-  clickhand();
-  drag();
+  // dragcanvas();
+  // clickhand();
+  // 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-family: $rubik-B;
+	font-weight: normal;
+  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,39 +41,37 @@ 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;
+          }
       }
     }
-    
+
     #links{
       canvas{
         top: 0;
@@ -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{
-    &:nth-child(1){
-      color: white;
-      a{
-        color: rgb(0, 0, 255);
-      }
+
+.blocs{
+  &:nth-child(1){
+    color: white;
+    a{
+      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 hand2"></div>
+        <div class="handler hand1">
+          <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 %}