first draft of gradient+trame background

src/assets/common.scss

@@ -1,7 +1,8 @@
 $pad_btn: 0.5em;
 @mixin btn() {
-  padding: $pad_btn;
+  padding: $pad_btn/2 $pad_btn;
   border-radius: 5px;
   background-color: $btns_back;
   cursor: pointer;
+  line-height: 1.5;
 }

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;
+  }
+
 }
 

src/assets/main.scss

@@ -14,7 +14,7 @@ body{
 }
 
 #app>header#header{
-  background-color: $front;
+  // background-color: $front;
   .row{
     display: flex;
     flex-direction: row;
@@ -26,10 +26,41 @@ body{
         font-family: "snap-it";
       }
     }
-    &.bottom{
-      padding:1em 0;
+    // &.bottom{
+    //   padding:1em 0;
 
+    // }
+  }
+
+}
+
+#main-content{
+
+  #map-backgrounds{
+    .map-bg-canvas{
+      mix-blend-mode: multiply;
     }
   }
 
-}
+  #map-concernements{
+
+  }
+
+  #map-nav{
+    ul{
+      display: flex;
+      flex-flow: row;
+      gap: 1em;
+      li{
+        list-style: none;
+        a{
+          @include btn();
+        }
+      }
+    }
+  }
+
+  #content{
+
+  }
+}