Apply Garden Mint spring theme

_includes/layouts/base.njk

@@ -78,9 +78,11 @@
             </a>
           </h1>
           {#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #}
-          {%- for entry in collections.all | eleventyNavigation %}
-            <a href="{{ entry.url | url }}">{{ entry.title }}</a>
-          {%- endfor %}
+          <button id="burger-btn" aria-label="Toggle menu" aria-expanded="false">
+            <span></span>
+            <span></span>
+            <span></span>
+          </button>
         </div>
         <div id="reading-progress" aria-hidden="true"></div>
       </nav>
@@ -116,6 +118,44 @@
       <a href="/site-index/">Index</a>
     </footer>
 
+    <div id="nav-menu" aria-hidden="true">
+      {%- for entry in collections.all | eleventyNavigation %}
+        <a href="{{ entry.url | url }}">{{ entry.title }}</a>
+      {%- endfor %}
+    </div>
+    <script>
+      (function () {
+        var burgerBtn = document.getElementById("burger-btn");
+        var navMenu = document.getElementById("nav-menu");
+        if (!burgerBtn || !navMenu) return;
+
+        var nav = document.querySelector("header nav");
+        if (nav) {
+          document.documentElement.style.setProperty("--nav-height", nav.offsetHeight + "px");
+        }
+
+        function toggleMenu(open) {
+          burgerBtn.setAttribute("aria-expanded", String(open));
+          navMenu.classList.toggle("open", open);
+          navMenu.setAttribute("aria-hidden", String(!open));
+        }
+
+        burgerBtn.addEventListener("click", function () {
+          toggleMenu(burgerBtn.getAttribute("aria-expanded") !== "true");
+        });
+
+        navMenu.querySelectorAll("a").forEach(function (a) {
+          a.addEventListener("click", function () { toggleMenu(false); });
+        });
+
+        document.addEventListener("keydown", function (e) {
+          if (e.key === "Escape" && navMenu.classList.contains("open")) {
+            toggleMenu(false);
+            burgerBtn.focus();
+          }
+        });
+      })();
+    </script>
     <!-- Current page: {{ page.url | url }} -->
   </body>
 </html>

css/main.css

@@ -1,7 +1,8 @@
 /* Color customization */
 :root {
-  --primary: #89986D;
-  --primary-dark: #C5D89D;
+  --primary: #3D8A5E;
+  --primary-dark: #85C9A0;
+  --nav-height: 68px;
   --font-family-base: "Inter", "Inter UI", -apple-system, sans-serif;
   --font-family-heading: "Playfair Display", serif,
     serif;
@@ -30,7 +31,7 @@ article * {
 /* "Content-visibility: auto" move the images over the other elements
    Set z-index to keep the nav over the rasterized images */
 header nav {
-  z-index: 1;
+  z-index: 1000;
 }
 
 /*! purgecss start ignore */
@@ -611,6 +612,32 @@ h6 {
   font-style: italic;
 }
 
+/* Article headings: centred with a subtle rule spanning the content width */
+article h1,
+article h2,
+article h3,
+article h4,
+article h5,
+article h6 {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  gap: 0.75em;
+  padding-top: 1.25em;
+  padding-bottom: 0.25em;
+}
+article h1::before, article h1::after,
+article h2::before, article h2::after,
+article h3::before, article h3::after,
+article h4::before, article h4::after,
+article h5::before, article h5::after,
+article h6::before, article h6::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: rgba(0, 0, 0, 0.12);
+}
+
 a {
   color: #f9c412;
   text-decoration: none;
@@ -790,7 +817,7 @@ video {
 }
 body {
   font-family: var(--font-family-base);
-  background: #F6F0D7;
+  background: #F0FAF4;
   color: #111111;
 }
 section {
@@ -873,12 +900,80 @@ header nav a {
   color: #181818;
   margin-left: 1.5em;
 }
-header nav #nav > a:first-of-type {
+/* Burger button */
+#burger-btn {
   margin-left: auto;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.5em;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  align-items: flex-end;
+  z-index: 2;
+}
+#burger-btn span {
+  display: block;
+  height: 2px;
+  background: #181818;
+  border-radius: 2px;
+  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
 }
-header nav #nav > a:last-of-type {
-  margin-right: 1.5em;
+#burger-btn span:nth-child(1) { width: 22px; }
+#burger-btn span:nth-child(2) { width: 16px; }
+#burger-btn span:nth-child(3) { width: 22px; }
+#burger-btn[aria-expanded="true"] span:nth-child(1) {
+  transform: translateY(7px) rotate(45deg);
 }
+#burger-btn[aria-expanded="true"] span:nth-child(2) {
+  opacity: 0;
+  transform: scaleX(0);
+}
+#burger-btn[aria-expanded="true"] span:nth-child(3) {
+  transform: translateY(-7px) rotate(-45deg);
+}
+
+/* Nav overlay menu */
+#nav-menu {
+  position: fixed;
+  top: var(--nav-height);
+  left: 0;
+  width: 100vw;
+  height: calc(100vh - var(--nav-height));
+  background: hsla(0, 0%, 100%, 0.97);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  z-index: 500;
+  transform: translateY(-100%);
+  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+}
+#nav-menu.open {
+  transform: translateY(0);
+  pointer-events: auto;
+}
+#nav-menu a {
+  display: block;
+  text-align: center;
+  padding: 1.25em 2em;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #181818;
+  margin-left: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  transition: color 0.2s ease, background 0.2s ease;
+}
+#nav-menu a:first-child {
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+}
+#nav-menu a:hover {
+  color: var(--primary);
+  background: rgba(61, 138, 94, 0.05);
+}
+
 header nav label {
   color: #000;
   cursor: pointer;