started theming header

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 %}