started theming header

web/themes/custom/materiotheme/assets/styles/app.scss

@@ -7,6 +7,7 @@
 // @License: GPL-V3
 
 @import 'base/reset';
+@import 'base/variables';
 @import 'base/colors';
 @import 'base/grid';
 @import 'base/layout';
@@ -21,3 +22,41 @@ html{
 aside.messages{
   border:none;
 }
+
+
+//  _  _             _
+// | || |___ __ _ __| |___ _ _
+// | __ / -_) _` / _` / -_) '_|
+// |_||_\___\__,_\__,_\___|_|
+
+header[role="banner"]{
+  #block-sitebranding{
+    h1{
+      margin:0;
+    }
+  }
+
+  #block-userlogin{
+    h2{
+      margin: 0;
+    }
+    &>section{
+      background-color: #fff;
+      overflow: hidden;
+      height:1px;
+      padding:0.01em 1em;
+      box-sizing:content-box;
+      transition: all 0.4s ease-in-out;
+      // outline: 1px solid blue;
+      transition-delay: 2s;
+    }
+    &:hover{
+      &>section{
+        transition-delay: 0s;
+        height:16em;
+        padding:1em 1em;
+        box-shadow: 0 0 10px #ccc;
+      }
+    }
+  }
+}

web/themes/custom/materiotheme/assets/styles/base/_layout.scss

@@ -11,3 +11,40 @@ body, html{
 body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
   padding-top: 24px!important;
 }
+
+
+//  _  _             _
+// | || |___ __ _ __| |___ _ _
+// | __ / -_) _` / _` / -_) '_|
+// |_||_\___\__,_\__,_\___|_|
+
+header[role="banner"]{
+  background-color: #fff;
+  overflow: visible;
+  position: fixed;
+  z-index: 10;
+  width:100vw;
+  // outline: 1px solid blue;
+  height: $header_height;
+  .wrapper{
+    .header-block{
+      min-height: 15px;
+      font-size: 0;
+      &>*{
+        display: inline-block;
+        vertical-align: top;
+        font-size: $base_font_size;
+      }
+    }
+  }
+}
+
+
+//  __  __      _
+// |  \/  |__ _(_)_ _
+// | |\/| / _` | | ' \
+// |_|  |_\__,_|_|_||_|
+
+main[role="main"]{
+  padding-top: $header_height;
+}

web/themes/custom/materiotheme/assets/styles/base/_variables.scss

@@ -0,0 +1,3 @@
+$base_font_size:16px;
+
+$header_height: 80px;