From 924f7ea4be1b4e1d23c6b3ece295320419a99797 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 7 Apr 2026 10:57:06 +0000 Subject: [PATCH 1/4] Apply Garden Mint spring theme Update colour palette to Option 2 - Garden Mint: - Page background: #F0FAF4 (soft mint white) - --primary: #3D8A5E (fresh sage, used for links and progress bar) - --primary-dark: #85C9A0 (light mint, used for hover states) https://claude.ai/code/session_014P9oTumBNs87hwhHQ7mkPW --- css/main.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css/main.css b/css/main.css index 0533a13..f2b1181 100644 --- a/css/main.css +++ b/css/main.css @@ -1,7 +1,7 @@ /* Color customization */ :root { - --primary: #89986D; - --primary-dark: #C5D89D; + --primary: #3D8A5E; + --primary-dark: #85C9A0; --font-family-base: "Inter", "Inter UI", -apple-system, sans-serif; --font-family-heading: "Playfair Display", serif, serif; @@ -790,7 +790,7 @@ video { } body { font-family: var(--font-family-base); - background: #F6F0D7; + background: #F0FAF4; color: #111111; } section { From 02a2065728a2821107f21b6c75fee3e2997d0e7f Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 7 Apr 2026 11:03:59 +0000 Subject: [PATCH 2/4] Add burger menu to header nav Replace inline nav links with a right-aligned hamburger button. Clicking it reveals a full-page overlay that slides down from the nav bottom border with a smooth CSS transition (and reverses on close). Links are centred, stacked with generous padding, and highlighted with the Garden Mint primary colour on hover. Closes on link click, Escape key, or toggling the button again. The 3-bar icon animates to an X when open. https://claude.ai/code/session_014P9oTumBNs87hwhHQ7mkPW --- _includes/layouts/base.njk | 9 ++++- css/main.css | 75 ++++++++++++++++++++++++++++++++++++-- src/main.js | 32 ++++++++++++++++ 3 files changed, 112 insertions(+), 4 deletions(-) diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index fb86a8a..5944890 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -78,11 +78,18 @@ {#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #} + + + + - {% block coverImage %}{% endblock %}
diff --git a/css/main.css b/css/main.css index f2b1181..7b504f8 100644 --- a/css/main.css +++ b/css/main.css @@ -2,6 +2,7 @@ :root { --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; @@ -873,12 +874,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; +} +#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: 99; + 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; } -header nav #nav > a:last-of-type { - margin-right: 1.5em; +#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; diff --git a/src/main.js b/src/main.js index 5a116ff..dda6428 100644 --- a/src/main.js +++ b/src/main.js @@ -199,6 +199,38 @@ addEventListener( true ); +// Burger menu +const burgerBtn = document.getElementById("burger-btn"); +const navMenu = document.getElementById("nav-menu"); +if (burgerBtn && navMenu) { + // Sync --nav-height with the actual rendered nav height + const navEl = document.querySelector("header nav"); + if (navEl) { + document.documentElement.style.setProperty( + "--nav-height", + navEl.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", () => { + toggleMenu(burgerBtn.getAttribute("aria-expanded") !== "true"); + }); + navMenu.querySelectorAll("a").forEach((a) => + a.addEventListener("click", () => toggleMenu(false)) + ); + document.addEventListener("keydown", (e) => { + if (e.key === "Escape" && navMenu.classList.contains("open")) { + toggleMenu(false); + burgerBtn.focus(); + } + }); +} + if (window.ResizeObserver && document.querySelector("header nav #nav")) { var progress = document.getElementById("reading-progress"); From 72f4880fceab01a272d5265b86675c1b28e0af89 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 7 Apr 2026 11:12:05 +0000 Subject: [PATCH 3/4] Centre article headings with subtle horizontal rule MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Article headings (h1–h6) are now centred with extra top padding. A hairline rule spans the full content block width on each side of the heading text, implemented via flex ::before/::after pseudo-elements so no HTML changes are needed. https://claude.ai/code/session_014P9oTumBNs87hwhHQ7mkPW --- css/main.css | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/css/main.css b/css/main.css index 7b504f8..279d9e3 100644 --- a/css/main.css +++ b/css/main.css @@ -612,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; From 6bd29151b06762d18b02121c57c62cfe46d06d14 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 7 Apr 2026 12:34:37 +0000 Subject: [PATCH 4/4] Fix burger menu z-index, visibility, and JS initialisation Three issues resolved: 1. Logo/burger invisible: #nav-menu (z-index 99) was inside header nav's stacking context and its translateY(-100%) bottom edge overlapped the nav bar, hiding content behind a near-opaque white overlay. Fixed by moving #nav-menu to body level (root stacking context) and setting header nav z-index to 1000, #nav-menu to 500. 2. Overlay behind headings: header nav z-index was too low (1) for page content to render behind it reliably. Now 1000 ensures it always wins. 3. Menu not initialising: rollup/node_modules not present so src/main.js never compiles to js/min.js. Moved burger menu JS to an inline diff --git a/css/main.css b/css/main.css index 279d9e3..41925eb 100644 --- a/css/main.css +++ b/css/main.css @@ -31,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 */ @@ -946,7 +946,7 @@ header nav a { flex-direction: column; align-items: stretch; justify-content: center; - z-index: 99; + z-index: 500; transform: translateY(-100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; diff --git a/src/main.js b/src/main.js index dda6428..5a116ff 100644 --- a/src/main.js +++ b/src/main.js @@ -199,38 +199,6 @@ addEventListener( true ); -// Burger menu -const burgerBtn = document.getElementById("burger-btn"); -const navMenu = document.getElementById("nav-menu"); -if (burgerBtn && navMenu) { - // Sync --nav-height with the actual rendered nav height - const navEl = document.querySelector("header nav"); - if (navEl) { - document.documentElement.style.setProperty( - "--nav-height", - navEl.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", () => { - toggleMenu(burgerBtn.getAttribute("aria-expanded") !== "true"); - }); - navMenu.querySelectorAll("a").forEach((a) => - a.addEventListener("click", () => toggleMenu(false)) - ); - document.addEventListener("keydown", (e) => { - if (e.key === "Escape" && navMenu.classList.contains("open")) { - toggleMenu(false); - burgerBtn.focus(); - } - }); -} - if (window.ResizeObserver && document.querySelector("header nav #nav")) { var progress = document.getElementById("reading-progress");