add flexbox + color

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 #start{display:table;width:100%;height:90%}#page #start>div{display:table-row}#page #start>div>div{display:table-cell;text-align:center;outline:1px solid #000}#page #start .ui-icon,#page #start .ui-widget-content .ui-icon{background:red}
+*{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{display:-ms-flexbox;display:flex;width:100%;height:calc(100% - 50px);-ms-flex-wrap:wrap;flex-wrap:wrap}#page #start .blocs{overflow-y:auto;width:calc(100%/3);height:calc(100vh/2 - 25px)}#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}

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

@@ -1,31 +1,37 @@
+
   #page{
     height: 100%;
+    .navbar{
+      width: 100%;
+      height: 50px;
+    }
     #start{
       width: 100%;
-      // height: 100%;
-      display: table;
-      height: 90%;
-
-      // display: inline-grid;
-      // grid-template-columns: 33% 33% 33%;
-      // grid-template-rows: auto auto;
-      // justify-items: stretch;
-      // align-items: stretch;
-      // justify-content: stretch;
-      // display: flex;
-      // align-content: stretch;
-      & > div {
-        display: table-row;
-        & > div {
-          display: table-cell;
-          text-align: center;
-          outline: 1px solid black;
+      height: calc(100% - 50px);
+      display: flex;
+      flex-wrap: wrap;
+      .blocs{
+        width: calc(100%/3);
+        height: calc(100vh/2 - 25px);
+        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;
         }
-        // width: calc(100% / 3);
-        // // height: 50%;
-      }
-      .ui-icon, .ui-widget-content .ui-icon{
-        background: red;
       }
     }
   }