v1 of custom theme

aaron.libraries.yml

@@ -1,6 +1,10 @@
 base:
   version: VERSION
+  js:
+    js/menu-toggle.js: {}
   css:
+    base:
+      css/layout.css: {}
     component:
       css/components/action-links.css:
         weight: -10

css/layout.css

@@ -0,0 +1,106 @@
+body {
+  background-color: #F1E9DA; /* beige */
+  color: #1C1C1C; /* deep charcoal */
+  font-family: Arial;
+  line-height: 1;
+  padding-top: 10px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0;
+  line-height: 1.1;
+}
+
+p {
+  margin-top: 2px;
+}
+
+blockquote {
+  border: 3px dashed #800020;
+/*  box-shadow: 6px 6px 0px #800020;*/
+  padding: 5px 40px 5px 40px;
+}
+
+.u-hidden {
+  display: none !important;
+}
+
+/* style for all boxes */
+.layout-header-contents,
+.region-primary-menu,
+.region-secondary-menu,
+.region-breadcrumb,
+.region-content {
+  background-color: #D7CEA3; /* dusty tan */
+  border: 6px solid #2E4D38; /* forest green */
+  border-style: double;
+  padding: 10px;
+/*  margin-bottom: 20px;*/
+  /*box-shadow: 6px 6px 0px #800020; */ /* maroon */
+}
+
+.node {
+  border: 2px solid #800020;
+  box-shadow: 4px 4px 0px #800020;
+  padding: 3px;
+}
+
+.layout-container {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 10px;
+  width: 90%;
+  max-width: 1400px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.layout-header-contents {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: 10px;
+}
+
+.layout-columns {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.layout-menus {
+  display:flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 260px;
+}
+
+.layout-not-menus {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.region-header {
+}
+
+.region-primary-menu {
+}
+
+.layout-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.node {
+  margin-bottom: 10px;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block; /* Removes the tiny gap at the bottom of images */
+}

js/menu-toggle.js

@@ -0,0 +1,19 @@
+// Wait for the page to load
+document.addEventListener('DOMContentLoaded', function() {
+  const btn = document.querySelector('#menu-toggle');
+  const menu = document.querySelector('.layout-menus');
+
+const menuState = localStorage.getItem('menuHidden');
+if (menuState === 'true') {
+  menu.classList.add('u-hidden');
+}
+
+  if (btn && menu) {
+    btn.addEventListener('click', function() {
+      menu.classList.toggle('u-hidden');
+
+      const isHidden = menu.classList.contains('u-hidden');
+      localStorage.setItem('menuHidden', isHidden);
+    });
+  }
+});

templates/layout/page.html.twig

@@ -45,38 +45,51 @@
 <div class="layout-container">
 
   <header role="banner">
-    {{ page.header }}
+    <div class="layout-header-contents">
+      <div class="region-menu-button">
+        <button id="menu-toggle" class="menu-button">
+          Menu
+        </button>
+      </div>
+      {{ page.header }}
+    </div>
   </header>
 
-  {{ page.primary_menu }}
-  {{ page.secondary_menu }}
+  <div class="layout-columns">
+    <div class="layout-menus">
+      {{ page.primary_menu }}
+      {{ page.secondary_menu }}
+    </div>
 
-  {{ page.breadcrumb }}
+  <div class="layout-not-menus">  
+    {{ page.breadcrumb }}
 
-  {{ page.highlighted }}
+    {{ page.highlighted }}
 
-  {{ page.help }}
+    {{ page.help }}
 
-  <main role="main">
-    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
+    <main role="main">
+      <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
 
-    <div class="layout-content">
-      {{ page.content }}
-    </div>{# /.layout-content #}
+      <div class="layout-content">
+        {{ page.content }}
+      </div>{# /.layout-content #}
 
-    {% if page.sidebar_first %}
-      <aside class="layout-sidebar-first" role="complementary">
-        {{ page.sidebar_first }}
-      </aside>
-    {% endif %}
+      {% if page.sidebar_first %}
+        <aside class="layout-sidebar-first" role="complementary">
+          {{ page.sidebar_first }}
+        </aside>
+      {% endif %}
 
-    {% if page.sidebar_second %}
-      <aside class="layout-sidebar-second" role="complementary">
-        {{ page.sidebar_second }}
-      </aside>
-    {% endif %}
+      {% if page.sidebar_second %}
+        <aside class="layout-sidebar-second" role="complementary">
+          {{ page.sidebar_second }}
+        </aside>
+      {% endif %}
 
-  </main>
+      </main>
+    </div>
+  </div>
 
   {% if page.footer %}
     <footer role="contentinfo">