started theming header

config/sync/block.block.sitebranding.yml

@@ -8,8 +8,8 @@ dependencies:
     - materiotheme
 id: sitebranding
 theme: materiotheme
-region: header
-weight: -2
+region: header_left
+weight: -1
 provider: null
 plugin: system_branding_block
 settings:

config/sync/block.block.userlogin.yml

@@ -0,0 +1,20 @@
+uuid: 4b88457a-625e-45dd-be43-dbf029e174f5
+langcode: en
+status: true
+dependencies:
+  module:
+    - user
+  theme:
+    - materiotheme
+id: userlogin
+theme: materiotheme
+region: header_right
+weight: 0
+provider: null
+plugin: user_login_block
+settings:
+  id: user_login_block
+  label: 'Member Access'
+  provider: user
+  label_display: visible
+visibility: {  }

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;

web/themes/custom/materiotheme/materiotheme.info.yml

@@ -10,6 +10,9 @@ libraries:
 
 regions:
   header: Header
+  header_left: Header left
+  header_middle: Header middle
+  header_right: Header right
   content: Content
   footer_left: 'Footer Left'
   footer_center: 'Footer Center'

web/themes/custom/materiotheme/templates/block/block--userlogin.html.twig

@@ -0,0 +1,46 @@
+{#
+/**
+ * @file
+ * Theme override to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ */
+#}
+{%
+  set classes = [
+    'block',
+    'block-' ~ configuration.provider|clean_class,
+    'block-' ~ plugin_id|clean_class,
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  <section>
+    {% block content %}
+    {{ content }}
+    {% endblock %}
+  </section>
+</div>

web/themes/custom/materiotheme/templates/block/block.html.twig

@@ -0,0 +1,44 @@
+{#
+/**
+ * @file
+ * Theme override to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ */
+#}
+{%
+  set classes = [
+    'block',
+    'block-' ~ configuration.provider|clean_class,
+    'block-' ~ plugin_id|clean_class,
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</div>

web/themes/custom/materiotheme/templates/layout/page.html.twig

@@ -39,22 +39,35 @@
 {# <div class="layout-container"> #}
 
   <header role="banner">
-    <div class="wrapper">
+    <div class="wrapper row">
       {{ page.header }}
+      <div class="header-block header-left col-4">
+        {% if page.header_left %}
+          {{ page.header_left}}
+        {% endif %}
+      </div>
+      <div class="header-block header-middle col-4">
+        {% if page.header_middle %}
+          {{ page.header_middle}}
+        {% endif %}
+      </div>
+      <div class="header-block header-right col-4">
+        {% if page.header_right %}
+          {{ page.header_right}}
+        {% endif %}
+      </div>
     </div>
   </header>
 
-  {% if page.content.messages %}
-    <aside class="messages">
-      {{ page.content.messages }}
-    </aside>
-  {% endif %}
+  <main role="main">  
+    {% if page.content.messages %}
+      <aside class="messages">
+        {{ page.content.messages }}
+      </aside>
+    {% endif %}
 
-  <main role="main">
     <div class="layout-content">
-      <div class="row">
-        {{ page.content|without('messages') }}
-      </div>
+      {{ page.content|without('messages') }}
     </div>{# /.layout-content #}
   </main>
 

web/themes/custom/materiotheme/templates/layout/region.html.twig

@@ -19,7 +19,7 @@
   ]
 %}
 {% if content %}
-  <div{{ attributes.addClass(classes) }}>
+  <!-- <div{{ attributes.addClass(classes) }}> -->
     {{ content }}
-  </div>
+  <!-- </div> -->
 {% endif %}