modif position blocs + add variable scss

logs/popularity/daily.json

@@ -1 +1 @@
-{"02-07-2018":140,"03-07-2018":176,"04-07-2018":10,"11-07-2018":166,"13-07-2018":188,"14-07-2018":111,"17-07-2018":197,"25-07-2018":26,"26-07-2018":10}
+{"02-07-2018":140,"03-07-2018":176,"04-07-2018":10,"11-07-2018":166,"13-07-2018":188,"14-07-2018":111,"17-07-2018":197,"25-07-2018":26,"26-07-2018":54}

logs/popularity/monthly.json

@@ -1 +1 @@
-{"07-2018":1024}
+{"07-2018":1068}

logs/popularity/totals.json

@@ -1 +1 @@
-{"\/":1024}
+{"\/":1068}

logs/popularity/visitors.json

@@ -1 +1 @@
-{"79c47964f1cd8a7f86f7fb4e1c1ac6bdb2551b4b":1532585943,"4b84b15bff6ee5796152495a230e45e3d7e947d9":1530699635}
+{"79c47964f1cd8a7f86f7fb4e1c1ac6bdb2551b4b":1532588999,"4b84b15bff6ee5796152495a230e45e3d7e947d9":1530699635}

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

@@ -1 +1 @@
-*{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-weight:bolder}#page{height:100%}#page .navbar{width:100%;height:50px}#page #start{width:100%;height:calc(100% - 50px)}#page #start .blocs{overflow-y:auto}#page #start .blocs:nth-child(1){background:red}#page #start .blocs:nth-child(2){background:pink}#page #start .blocs:nth-child(3){background:brown}#page #start .blocs:nth-child(4){background:#00f}#page #start .blocs:nth-child(5){background:green}#page #start .blocs:nth-child(6){background:#ff0}.top{height:50%}.bottom,.top{display:inline-grid;grid-template-columns:auto auto auto}.handler{position:absolute;z-index:999;top:50%;left:calc((100%/3) - 25px);width:50px;height:50px;border-radius:25px;background:#00f}.bottom{position:fixed;height:100%}.bottom>div{position:fixed;top:calc(100%/2 + 25px);bottom:0;width:calc(100%/3);height:calc(100%/2 - 25px)}.bottom>div:nth-child(2){left:calc(100%/3)}.bottom>div:nth-child(3){right:0}
+*{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-weight:bolder}.handler{position:absolute;z-index:999;top:50%;left:calc((100%/3) - 25px);width:50px;height:50px;border-radius:25px;background:#00f}body{overflow:hidden}#page{height:100%}#page .navbar{width:100%;height:50px}#page #start{width:100%;height:calc(100% - 50px)}#page #start .bottom,#page #start .top{position:relative;height:calc(100% / 2)}#page #start .blocs{position:absolute;overflow-y:auto;width:calc(100% / 3);height:100%}#page #start .blocs:nth-child(1){background:red}#page #start .blocs:nth-child(2){left:calc(100% / 3);background:pink}#page #start .blocs:nth-child(3){right:0;background:green}

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

@@ -14,3 +14,30 @@
 //width
 
 // $33: calc(100% / 3);
+
+// header
+$heightH: 25px;
+
+// taille & position blocs
+
+// height
+$H100: 100%;
+$H50: calc(#{$H100} / 2);
+
+// width
+$W100: 100%;
+$W33: calc(#{$W100} / 3);
+
+// top
+$T100: 100%;
+
+// right
+$R100: 100%;
+
+//bottom
+$B100: 100%;
+
+// left
+$L100: 100%;
+$L33: calc(#{$L100} / 3);
+$L66: calc(#{$L100} / 3);

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

@@ -1,43 +1,3 @@
-  #page{
-    height: 100%;
-    .navbar{
-      width: 100%;
-      height: 50px;
-    }
-    #start{
-      width: 100%;
-      height: calc(100% - 50px);
-      .blocs{
-        overflow-y: auto;
-        &:nth-child(1){
-          background: red;
-        }
-        &:nth-child(2){
-          background: pink;
-        }
-        &:nth-child(3){
-          background: brown;
-        }
-        &:nth-child(4){
-          background: blue;
-        }
-        &:nth-child(5){
-          background: green;
-        }
-        &:nth-child(6){
-          background: yellow;
-        }
-      }
-    }
-  }
-
-.top{
-  height: 50%;
-}
-.top, .bottom{
-  display: inline-grid;
-    grid-template-columns: auto auto auto;
-}
 .handler{
   width: 50px;
   height: 50px;
@@ -48,6 +8,52 @@
   top: 50%;
   z-index: 999;
 }
+body{
+  overflow: hidden;
+}
+#page{
+  height: 100%;
+  .navbar{
+    width: 100%;
+    height: 50px;
+  }
+  #start{
+    width: 100%;
+    height: calc(100% - 50px);
+    .top, .bottom{
+      position: relative;
+      height: $H50;
+    }
+    .blocs{
+      overflow-y: auto;
+      position: absolute;
+      width: $W33;
+      height: $H100;
+      &:nth-child(1){
+        background: red;
+
+      }
+      &:nth-child(2){
+        background: pink;
+        left: $L33;
+      }
+      &:nth-child(3){
+        background: green;
+        right: 0;
+      }
+    }
+  }
+}
+
+// .top{
+//   height: 50%;
+// }
+// .top, .bottom{
+//   // display: inline-grid;
+//   //   grid-template-columns: auto auto auto;
+// }
+
+
 
 //
 // #start{
@@ -57,21 +63,19 @@
 //     height: 100%;
 //   }
 // }
-
-.bottom{
-height: 100%;
-position: fixed;
-  & > div{
-    position: fixed;
-    width: calc(100%/3);
-    top: calc(100%/2 + 25px);
-    height: calc(100%/2 - 25px);
-    bottom: 0;
-    &:nth-child(2){
-      left: calc(100%/3);
-    }
-    &:nth-child(3){
-      right: 0;
-    }
-  }
-}
+//
+// .top, .bottom{
+//   & > div{
+//     position: fixed;
+//     width: calc(100%/3);
+//     top: calc(100%/2 + 25px);
+//     height: calc(100%/2 - 25px);
+//     bottom: 0;
+//     &:nth-child(2){
+//       left: calc(100%/3);
+//     }
+//     &:nth-child(3){
+//       right: 0;
+//     }
+//   }
+// }