started responsive UI: header

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

@@ -5,6 +5,7 @@
 @import './base/layout';
 @import './base/animations';
 @import './base/fonts';
+@import './base/responsive';
 
 
 html{
@@ -35,6 +36,12 @@ header[role="banner"]{
       margin:0;
       line-height: 1;
     }
+    .slogan{
+
+      @include responsive-mediaquery-phone(){
+        display:none;
+      }
+    }
   }
 
   #block-socialmedialinks{
@@ -44,6 +51,9 @@ header[role="banner"]{
     li{
       padding:0;
     }
+    @include responsive-mediaquery-phone(){
+      display:none;
+    }
   }
 
   #block-userlogin{
@@ -146,9 +156,14 @@ header[role="banner"]{
   // vue userblock
   #user-tools{
     padding-top: 0.06em;
-    h4{
+    a.mdi-account{
       @extend %header-fs;
       cursor: pointer;
+      span{
+        @include responsive-mediaquery-phone(){
+          display:none;
+        }
+      }
     }
     .mdi-logout::before {
       margin: -0.125em 0 0 0;
@@ -168,6 +183,11 @@ header[role="banner"]{
       @extend %header-fs;
       cursor: pointer;
       &:before{padding-right: 0.2em;}
+      span{
+        @include responsive-mediaquery-phone(){
+          display:none;
+        }
+      }
     }
     ul{
       background-color: #fff;
@@ -265,19 +285,52 @@ header[role="banner"]{
     margin-right: 1em;
     padding-left: 1em;
     border-left: 1px solid #000;
+    #block-header-menu,
+    label[for="block-header-menu"]{
+      display:none;
+    }
     ul.menu{
       margin:0;
       li{
         padding:0;
-        display: inline-block;
-        &:not(:first-of-type){
-          margin-left: 0.5em;
-        }
         a{
           @extend %header-fs;
         }
       }
     }
+    @include responsive-mediaquery-desktop(){
+      ul.menu{
+        li{
+          display: inline-block;
+          &:not(:first-of-type){
+            margin-left: 0.5em;
+          }
+        }
+      }
+    }
+    @include responsive-mediaquery-phone(){
+      position: relative;
+
+      label[for="block-header-menu"]{
+        display:block;
+      }
+      /* Toggle Show/Hide Menu */
+      // https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/#sec-download
+      ul.menu { display: none; }
+      input:checked ~ ul.menu { display: block; }
+      ul.menu{
+        position: absolute;
+        width: 110px;
+        height: auto;
+        top: 18.9px;
+        right: 0;
+        background-color: white;
+        padding: 0.2em 0.5em;
+        margin-right: -0.5em;
+        z-index: 90;
+        text-align: right;
+      }
+    }
   }
 
   #block-languageswitcher{