projects size random, better light

assets/css/app.scss

@@ -8,7 +8,7 @@
 
 
 body{
-  color: #ff00ff;
+  color: #1a1a1a;
 }
 
 #root{
@@ -20,6 +20,15 @@ body{
 
 }
 
+header[role="banner"]{
+  padding:1em;
+  pointer-events: none;
+  h1{
+    font-weight: 400;
+    font-size: 1em;
+  }
+}
+
 
 section[role="main-content"]{
 }

assets/css/base/_layout.scss

@@ -15,22 +15,10 @@ body{
 }
 
 #root{
-  display: flex;
-  flex-direction: column;
-  width: 100vw;
-  height:100vh;
-  %layout-element{
-    width:100vw;
-    box-sizing:border-box;
-  }
   header[role="banner"]{
-    flex: 0 0 auto;
-    @extend %layout-element;
-    padding:1em $side-padding 0 $side-padding;
+    position: absolute;
   }
   section[role="main-content"]{
-    flex:1 1 auto;
-    @extend %layout-element;
     overflow: hidden;
     >.wrapper{
       // padding:0 $side-padding 0 $side-padding;
@@ -40,11 +28,6 @@ body{
     }
   }
   footer[role="tools"]{
-    flex:0 0 auto;
-    @extend %layout-element;
-    // padding-bottom: 1em;
-    // >*{
-    //   padding:0.5em 1em;
-    // }
+    position: absolute;
   }
 }