started map: drawing concernement with entities and contours

src/assets/colors.scss

@@ -0,0 +1,3 @@
+$back: #eee;
+$front: #fff;
+$btns_back: #ddd;

src/assets/common.scss

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

src/assets/layout.scss

@@ -4,12 +4,18 @@ html,body{
 
 }
 
+
+@mixin layout-row{
+  box-sizing: content-box;
+  max-width: 1920px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
 #app {
   box-sizing: border-box;
-  max-width: 1920px;
+  width: 100vw;
   height: 100vh;
-  margin: 0 auto;
-  padding: 1rem;
 
   font-weight: normal;
 
@@ -18,11 +24,24 @@ html,body{
 }
 
 #header{
-  flex: 0 0 5rem;
+  flex: 0 0 auto;
+  padding: 1rem 0;
+  >.row{
+    @include layout-row();
+  }
 }
 
 #main-content{
   flex: 1 1 auto;
-
+  overflow-x: hidden;
+  overflow-y: auto;
+  // padding: 1rem 0;
+  #map-concernements{
+    width:100%;
+    height:100%;
+  }
+  >.row{
+    @include layout-row();
+  }
 }
 

src/assets/main.scss

@@ -1,23 +1,35 @@
 // @import './node_modules/@mdi/font/scss/materialdesignicons.scss';
 @import "./base.scss";
+@import "./colors.scss";
+@import "./common.scss";
 @import "./layout.scss";
 @import "./fonts/snap_it/snap_it.css";
 
+body{
+  background-color: $back;
+}
 
 #app{
 
 }
 
-#app>header{
+#app>header#header{
+  background-color: $front;
   .row{
     display: flex;
     flex-direction: row;
     >*{
       margin-right: 1em;
     }
+    &.top{
+      h1{
+        font-family: "snap-it";
+      }
+    }
+    &.bottom{
+      padding:1em 0;
+
+    }
   }
 
-  h1{
-    font-family: "snap-it";
-  }
 }