From 7493b5103ab00b1f29c3759daab82950fcf08367 Mon Sep 17 00:00:00 2001
From: Ethan Holz <ethan.holz@omsf.io>
Date: Tue, 25 Aug 2026 10:40:05 -0600
Subject: [PATCH 1/5] feat: improve mobile navigation accessibility

Expose the mobile menu only at its breakpoint, add accessible expanded
state and labels, and provide touch-sized controls with clear open and
close styling.

Assisted-by: Pi:openai-codex/gpt-5.6-sol
---
 .../layouts/partials/hamburger.html           | 22 ++++++++++---------
 .../hugo-kiera-master/static/css/agathe.css   |  2 +-
 themes/hugo-kiera-master/static/css/media.css | 22 +++++++++++++++++--
 3 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/themes/hugo-kiera-master/layouts/partials/hamburger.html b/themes/hugo-kiera-master/layouts/partials/hamburger.html
index bdd6f6f..79aaa45 100755
--- a/themes/hugo-kiera-master/layouts/partials/hamburger.html
+++ b/themes/hugo-kiera-master/layouts/partials/hamburger.html
@@ -1,10 +1,10 @@
-<button onclick="myFunction()" id="toggle-main-menu-mobile" class="hamburger hamburger--slider" type="button">
+<button onclick="toggleMobileMenu()" id="toggle-main-menu-mobile" class="hamburger hamburger--slider" type="button" aria-label="Open menu" aria-controls="mobile-submenu" aria-expanded="false">
   <span class="hamburger-box">
     <span class="hamburger-inner"></span>
   </span> 
 </button>
 
-<div id="mobile-submenu" style="display:none;" class="mobile-submenu">
+<div id="mobile-submenu" class="mobile-submenu" hidden>
 	{{ $currentPage := . }}
 	{{ range .Site.Menus.main }}
   <ul>
@@ -23,12 +23,14 @@
 </div>
 
 <script>
-	function myFunction() {
-  var x = document.getElementById("mobile-submenu");
-  if (x.style.display === "none") {
-    x.style.display = "block";
-  } else {
-    x.style.display = "none";
-  }
+function toggleMobileMenu() {
+  const menu = document.getElementById("mobile-submenu");
+  const button = document.getElementById("toggle-main-menu-mobile");
+  const open = menu.hidden;
+
+  menu.hidden = !open;
+  button.classList.toggle("is-active", open);
+  button.setAttribute("aria-expanded", open);
+  button.setAttribute("aria-label", open ? "Close menu" : "Open menu");
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/themes/hugo-kiera-master/static/css/agathe.css b/themes/hugo-kiera-master/static/css/agathe.css
index 890e86c..02290f5 100644
--- a/themes/hugo-kiera-master/static/css/agathe.css
+++ b/themes/hugo-kiera-master/static/css/agathe.css
@@ -239,7 +239,7 @@ li.menu-item-has-children a.menu-link::after{
   display: block;
 }
 .hamburger--slider, #toggle-main-menu-mobile {
-	opacity: 0;
+  display: none;
 }
 /* GRILLE ARTICLE AVEC IMAGES A GAUCHE -------------------------------------------- */
 figcaption {
diff --git a/themes/hugo-kiera-master/static/css/media.css b/themes/hugo-kiera-master/static/css/media.css
index b575ba3..9e05bae 100644
--- a/themes/hugo-kiera-master/static/css/media.css
+++ b/themes/hugo-kiera-master/static/css/media.css
@@ -74,6 +74,7 @@ margin-top: 2em:
   .homepage main section { padding: 3% 6%;}
   .homepage main nav { padding: 0px;}
   .homepage main nav ul { margin-left: 0px;}
+  .homepage #toggle-main-menu-mobile { display: none; }
 
    /* Grids --------------------------------- */
   :is(.projects, .people, .events) .gridflex {
@@ -99,11 +100,13 @@ main article figure img {
   }
   .hamburger--slider,
   #toggle-main-menu-mobile {
+    display: inline-block;
     opacity: 1;
   }
   .hamburger--slider {
     position: absolute !important;
-    right: 0;
+    right: 1ch;
+    top: 1ch;
   }
   .hamburger {
     padding: 15px;
@@ -119,6 +122,8 @@ main article figure img {
     border: 0;
     margin: 0;
     overflow: visible;
+    min-width: 44px;
+    min-height: 44px;
   }
   .hamburger-box {
     width: 32px;
@@ -165,12 +170,24 @@ main article figure img {
   }
   .hamburger--slider .hamburger-inner::after {
     top: 16px;
+  }
+  .hamburger--slider.is-active .hamburger-inner {
+    transform: translate3d(0, 8px, 0) rotate(45deg);
+  }
+  .hamburger--slider.is-active .hamburger-inner::before {
+    opacity: 0;
+  }
+  .hamburger--slider.is-active .hamburger-inner::after {
+    transform: translate3d(0, -16px, 0) rotate(-90deg);
   }
     .mobile-submenu {
     display: none;
     margin-top: 1ch;
     width: 100%;
   }
+  .mobile-submenu:not([hidden]) {
+    display: block;
+  }
   .mobile-submenu ul {
     list-style: none;
   }
@@ -179,7 +196,8 @@ main article figure img {
     width: 100%;
     text-decoration: none;
     text-align: center;
-    margin: 5px;
+    margin: 0;
+    padding: 0.6em;
     border-top: 1px solid grey;
   }
   .mobile-submenu a:hover {

From 3be1325859b51a0bcefb2c2f71c5e60a825fee76 Mon Sep 17 00:00:00 2001
From: Ethan Holz <ethan.holz@omsf.io>
Date: Tue, 25 Aug 2026 10:40:12 -0600
Subject: [PATCH 2/5] fix: refine layouts on small screens

Reduce narrow-screen typography and gutters, keep footer and wide content
inside the viewport, and normalize event separator and grid spacing.

Assisted-by: Pi:openai-codex/gpt-5.6-sol
---
 themes/hugo-kiera-master/static/css/media.css | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/themes/hugo-kiera-master/static/css/media.css b/themes/hugo-kiera-master/static/css/media.css
index 9e05bae..62cdaa0 100644
--- a/themes/hugo-kiera-master/static/css/media.css
+++ b/themes/hugo-kiera-master/static/css/media.css
@@ -8,7 +8,7 @@
 */
 
 .events .gridflex {
-margin-top: 2em:
+  margin-top: 2em;
 }
 
 @media only screen and (min-width: 2000px) {
@@ -228,12 +228,31 @@ main article figure img {
 /* Footer  --------------------------------- */
   footer { display: block; }
   footer > div { width: unset; }
+  #logo-footer { max-width: 100%; height: auto; }
   footer .column-2 { text-align: center; }
   footer .column-2 .social { margin: 1em 0; }
+  footer .terms a { display: block; padding: 0.35em 0; }
 }
 
 
 @media only screen and (max-width: 600px) {
+  :root { --font-size: 19px; }
+  h1, h2, h3 { line-height: 1.15; }
+  h2 { font-size: 1.5em; }
+
+  header .logo {
+    width: min(240px, calc(100% - 56px));
+    margin: 0;
+  }
+  header .logo img { display: block; width: 100%; }
+
+  main article { border-left-width: 0.75em; }
+  main article > * {
+    padding-right: 1.25rem;
+    padding-left: 1.25rem;
+  }
+  .grid-page { padding: 1.25em; }
+
   :is(.projects, .people,.events) .gridflex {
     grid-template-columns: repeat(1,100%);
   }
@@ -244,6 +263,11 @@ main article figure img {
     padding: 0px;
   }
   hr {
-    width: 150px;
+    width: min(150px, 100%);
+    height: 0;
+    margin: 2em auto 1.5em;
   }
+  main article hr + h2 { margin-top: 0; }
+  footer { padding: 2em 1.25em; }
+  pre, table { max-width: 100%; overflow-x: auto; }
 }

From 3ef115d23ff69fce630bcd81ea5b919af9d9b776 Mon Sep 17 00:00:00 2001
From: Ethan Holz <ethan.holz@omsf.io>
Date: Tue, 25 Aug 2026 10:54:05 -0600
Subject: [PATCH 3/5] fix: lock page behind mobile menu

Freeze the underlying document while navigation is expanded, keep the
menu independently scrollable, and restore the prior page position when
it closes.

Assisted-by: Pi:openai-codex/gpt-5.6-sol
---
 .../layouts/partials/hamburger.html                | 14 ++++++++++++++
 themes/hugo-kiera-master/static/css/agathe.css     |  4 +++-
 themes/hugo-kiera-master/static/css/media.css      | 13 +++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/themes/hugo-kiera-master/layouts/partials/hamburger.html b/themes/hugo-kiera-master/layouts/partials/hamburger.html
index 79aaa45..c3c300d 100755
--- a/themes/hugo-kiera-master/layouts/partials/hamburger.html
+++ b/themes/hugo-kiera-master/layouts/partials/hamburger.html
@@ -27,10 +27,24 @@
   const menu = document.getElementById("mobile-submenu");
   const button = document.getElementById("toggle-main-menu-mobile");
   const open = menu.hidden;
+  const scrollY = open ? window.scrollY : Number(document.body.dataset.scrollY);
+
+  if (open) {
+    document.body.dataset.scrollY = scrollY;
+    document.body.style.top = `-${scrollY}px`;
+  }
 
   menu.hidden = !open;
+  document.documentElement.classList.toggle("menu-open", open);
+  document.body.classList.toggle("menu-open", open);
   button.classList.toggle("is-active", open);
   button.setAttribute("aria-expanded", open);
   button.setAttribute("aria-label", open ? "Close menu" : "Open menu");
+
+  if (!open) {
+    document.body.style.top = "";
+    delete document.body.dataset.scrollY;
+    window.scrollTo(0, scrollY);
+  }
 }
 </script>
diff --git a/themes/hugo-kiera-master/static/css/agathe.css b/themes/hugo-kiera-master/static/css/agathe.css
index 02290f5..78497ab 100644
--- a/themes/hugo-kiera-master/static/css/agathe.css
+++ b/themes/hugo-kiera-master/static/css/agathe.css
@@ -238,7 +238,9 @@ li.menu-item-has-children a.menu-link::after{
 .menu-item-has-children:hover .sub-menu {
   display: block;
 }
-.hamburger--slider, #toggle-main-menu-mobile {
+.mobile-submenu,
+.hamburger--slider,
+#toggle-main-menu-mobile {
   display: none;
 }
 /* GRILLE ARTICLE AVEC IMAGES A GAUCHE -------------------------------------------- */
diff --git a/themes/hugo-kiera-master/static/css/media.css b/themes/hugo-kiera-master/static/css/media.css
index 62cdaa0..2b3b398 100644
--- a/themes/hugo-kiera-master/static/css/media.css
+++ b/themes/hugo-kiera-master/static/css/media.css
@@ -94,6 +94,16 @@ main article figure img {
 
   /* header menu --------------------------------- */
   nav:not(.homepage nav) { display: none; }
+  html.menu-open,
+  body.menu-open { overflow: hidden; }
+  body.menu-open {
+    position: fixed;
+    width: 100%;
+  }
+  body.menu-open #container > header {
+    position: fixed;
+    inset: 0 0 auto;
+  }
   .homepage .hamburger--slider, 
   .homepage #toggle-main-menu-mobile {
     opacity: 0;
@@ -187,6 +197,9 @@ main article figure img {
   }
   .mobile-submenu:not([hidden]) {
     display: block;
+    max-height: calc(100dvh - 5rem);
+    overflow-y: auto;
+    overscroll-behavior: contain;
   }
   .mobile-submenu ul {
     list-style: none;

From 2c3619f3de0c2d071b769fddd838b3805170f4da Mon Sep 17 00:00:00 2001
From: Ethan Holz <ethan.holz@omsf.io>
Date: Tue, 25 Aug 2026 11:01:20 -0600
Subject: [PATCH 4/5] fix: hide mobile menu scrollbars

Keep the expanded navigation scrollable while suppressing standard and
WebKit scrollbar chrome on small screens.

Assisted-by: Pi:openai-codex/gpt-5.6-sol
---
 themes/hugo-kiera-master/static/css/media.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/themes/hugo-kiera-master/static/css/media.css b/themes/hugo-kiera-master/static/css/media.css
index 2b3b398..cd258ba 100644
--- a/themes/hugo-kiera-master/static/css/media.css
+++ b/themes/hugo-kiera-master/static/css/media.css
@@ -200,7 +200,9 @@ main article figure img {
     max-height: calc(100dvh - 5rem);
     overflow-y: auto;
     overscroll-behavior: contain;
+    scrollbar-width: none;
   }
+  .mobile-submenu::-webkit-scrollbar { display: none; }
   .mobile-submenu ul {
     list-style: none;
   }

From 8d65c613af4a6c20423498c2718f143b32965788 Mon Sep 17 00:00:00 2001
From: Ethan Holz <ethan.holz@omsf.io>
Date: Tue, 25 Aug 2026 11:08:58 -0600
Subject: [PATCH 5/5] fix: pad mobile header logo

Add breathing room below the logo on narrow screens and reduce the open
menu height so navigation remains inside short viewports.

Assisted-by: Pi:openai-codex/gpt-5.6-sol
---
 themes/hugo-kiera-master/static/css/media.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/themes/hugo-kiera-master/static/css/media.css b/themes/hugo-kiera-master/static/css/media.css
index cd258ba..2b24849 100644
--- a/themes/hugo-kiera-master/static/css/media.css
+++ b/themes/hugo-kiera-master/static/css/media.css
@@ -197,7 +197,7 @@ main article figure img {
   }
   .mobile-submenu:not([hidden]) {
     display: block;
-    max-height: calc(100dvh - 5rem);
+    max-height: calc(100dvh - 6rem);
     overflow-y: auto;
     overscroll-behavior: contain;
     scrollbar-width: none;
@@ -258,6 +258,7 @@ main article figure img {
   header .logo {
     width: min(240px, calc(100% - 56px));
     margin: 0;
+    padding-bottom: 0.5rem;
   }
   header .logo img { display: block; width: 100%; }