From 2ade470fc12e5ad2595215261e1ece22ff8b6412 Mon Sep 17 00:00:00 2001
From: Anjo Vahldiek-Oberwagner <anjovahldiek@gmail.com>
Date: Tue, 19 May 2026 10:38:58 +0200
Subject: [PATCH] fix: prevent white overlay when mobile burger menu opens

The Minimal Mistakes theme's greedy-nav JS adds a .close class to the
hamburger toggle button, which triggers a full-screen white ::before
overlay (opacity 0.9, background #fff). Since we use Alpine.js for the
hamburger menu instead of the theme's built-in mechanism, this overlay
blocks the entire page on mobile in both light and dark mode.

Fixes:
1. Add inline <style> in head/custom.html that sets display:none and
   content:none on .greedy-nav__toggle::before (guaranteed to load
   before the theme's CSS takes effect)
2. Prevent the .close class from hiding the navicon (hamburger icon)
3. Unbind jQuery's click handler on window load so the theme's JS
   cannot interfere with Alpine's menu toggling
---
 src/_includes/head/custom.html | 31 ++++++++++++++++++++++++++++++-
 src/assets/css/main.scss       |  8 ++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/_includes/head/custom.html b/src/_includes/head/custom.html
index 893253ff..90a25585 100644
--- a/src/_includes/head/custom.html
+++ b/src/_includes/head/custom.html
@@ -3,7 +3,24 @@
 <link rel="apple-touch-icon" href="{{ '/assets/images/favicon.svg' | relative_url }}">
 
 <!-- Alpine.js x-cloak: hide elements until Alpine initializes -->
-<style>[x-cloak] { display: none !important; }</style>
+<!-- Kill Minimal Mistakes greedy-nav full-screen white backdrop overlay.
+     The theme's @supports rule (pointer-events:none) creates a fixed, page-wide
+     white ::before on .greedy-nav__toggle.close. We use Alpine.js for the menu,
+     so this overlay just blocks the page on mobile. -->
+<style>
+[x-cloak] { display: none !important; }
+.greedy-nav__toggle::before,
+.greedy-nav__toggle.close::before {
+  display: none !important;
+  content: none !important;
+}
+/* Prevent theme's .close class from hiding the navicon */
+.greedy-nav__toggle.close .navicon,
+.greedy-nav__toggle.close .navicon::before,
+.greedy-nav__toggle.close .navicon::after {
+  background: currentColor !important;
+}
+</style>
 
 <!-- Prevent FOUC: apply saved theme before any paint -->
 <script>
@@ -55,3 +72,15 @@
      scripts so Tabulator + ECharts are available when Alpine processes
      x-data directives and calls component boot() functions. -->
 <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
+
+<!-- Neutralise Minimal Mistakes greedy-nav jQuery click handler.
+     The theme's JS toggles .close on the burger button and shows .hidden-links,
+     causing a white overlay.  We use Alpine.js instead; unbind jQuery's handler
+     after all scripts have loaded so it cannot interfere. -->
+<script>
+window.addEventListener('load', function() {
+  if (window.jQuery) {
+    jQuery('nav.greedy-nav .greedy-nav__toggle').off('click');
+  }
+});
+</script>
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index 3bbcfb86..ccc83148 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -191,6 +191,14 @@ html {
   border: none;
   padding: 4px 8px;
   color: #333;
+
+  // Disable the theme's full-screen white backdrop overlay.
+  // The theme uses ::before on .greedy-nav__toggle.close to create a page-wide
+  // white overlay when .hidden-links is shown. Since we use Alpine.js for the
+  // hamburger menu instead, this overlay just blocks the page.
+  &::before {
+    display: none !important;
+  }
 }
 
 // Desktop (≥768px): show all items, keep hamburger visible