first draft of gradient+trame background

src/assets/layout.scss

@@ -19,12 +19,16 @@ html,body{
 
   font-weight: normal;
 
-  display: flex;
-  flex-flow: column-reverse;
+  // display: flex;
+  // flex-flow: column-reverse;
 }
 
 #header{
-  flex: 0 0 auto;
+  // flex: 0 0 auto;
+  position: absolute;
+  bottom:0;
+  left:0;
+  width: 100vw;
   padding: 1rem 0;
   >.row{
     @include layout-row();
@@ -32,16 +36,56 @@ html,body{
 }
 
 #main-content{
-  flex: 1 1 auto;
+  // flex: 1 1 auto;
+  width:100vw;
+  height:100vh;
+
   overflow-x: hidden;
   overflow-y: auto;
   // padding: 1rem 0;
+  
+  #map-backgrounds{
+    position: absolute;
+    z-index: -1;
+    top:0; left:0;
+    width:100%;
+    height:100%;
+    >canvas.map-bg-canvas{
+      position: absolute;
+      // z-index: -1;
+      top:0; left:0;
+      width:100%;
+      height:100%;
+    }
+  }
+  
   #map-concernements{
     width:100%;
     height:100%;
+    z-index: 1;
   }
+
+  
+  #map-nav{
+    position: absolute;
+    z-index: 2;
+    top:0; left: 0;
+    width:100vw;
+    padding:1rem 0;
+    >ul{
+      @include layout-row();
+    }
+  }
+
   >.row{
     @include layout-row();
   }
+
+  #content{
+    position: absolute;
+    top:0; right:0;
+    height:100vh;
+  }
+
 }