From c333602836405d9b65bb08ab6ab61edffd1e9d2a Mon Sep 17 00:00:00 2001
From: root <root@drupal.server.axvig.com>
Date: Wed, 21 Jan 2026 22:29:57 -0600
Subject: [PATCH] v1 of custom theme

---
 aaron.libraries.yml             |   4 ++
 css/layout.css                  | 106 ++++++++++++++++++++++++++++++++
 js/menu-toggle.js               |  19 ++++++
 templates/layout/page.html.twig |  57 ++++++++++-------
 4 files changed, 164 insertions(+), 22 deletions(-)
 create mode 100644 css/layout.css
 create mode 100644 js/menu-toggle.js

diff --git a/aaron.libraries.yml b/aaron.libraries.yml
index dfe9d8d..6fa0dd9 100644
--- a/aaron.libraries.yml
+++ b/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
diff --git a/css/layout.css b/css/layout.css
new file mode 100644
index 0000000..e633f1f
--- /dev/null
+++ b/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 */
+}
diff --git a/js/menu-toggle.js b/js/menu-toggle.js
new file mode 100644
index 0000000..a0809dd
--- /dev/null
+++ b/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);
+    });
+  }
+});
diff --git a/templates/layout/page.html.twig b/templates/layout/page.html.twig
index 694ac13..c9fde11 100644
--- a/templates/layout/page.html.twig
+++ b/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">