From: Danilo M. <redacted>
Date: Thu, 16 Apr 2026 14:01:56 +0000 (+0200)
Subject: fix: add x-cloak to prevent menu flash on page load
X-Git-Tag: release_22042026-1342~192
X-Git-Url: https://git.danix.xyz/?a=commitdiff_plain;h=ec4b801a718cf2b79c6dac90363fca3bc3fffeeb;p=danix.xyz-2.git

fix: add x-cloak to prevent menu flash on page load

- Add [x-cloak] { display: none } CSS rule
- Add x-cloak attribute to menu overlay div
- This hides the menu until Alpine.js initializes
- Prevents the menu from appearing briefly on page refresh/load
- Rebuild CSS: main.min.css updated

Co-Authored-By: Claude Haiku 4.5 <redacted>
---

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index f7d42a9..9e5c86a 100644
--- a/themes/danix-xyz-hacker/assets/css/main.css
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -530,6 +530,11 @@ html.theme-light .prose-invert blockquote {
   }
 }
 
+/* Alpine.js x-cloak - hide content until Alpine initializes */
+[x-cloak] {
+  display: none !important;
+}
+
 /* Respect user's motion preferences */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css
index ab1f4bb..8c58a4f 100644
--- a/themes/danix-xyz-hacker/assets/css/main.min.css
+++ b/themes/danix-xyz-hacker/assets/css/main.min.css
@@ -2344,6 +2344,12 @@ html.theme-light .prose-invert blockquote {
   }
 }
 
+/* Alpine.js x-cloak - hide content until Alpine initializes */
+
+[x-cloak] {
+  display: none !important;
+}
+
 /* Respect user's motion preferences */
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
index caa6c6d..41f4e0b 100644
--- a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
+++ b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
@@ -1,5 +1,6 @@
 <!-- Mobile menu overlay (Alpine.js controlled) -->
 <div
+  x-cloak
   x-data="{ menuOpen: false }"
   @toggle-menu.window="menuOpen = !menuOpen"
   @keydown.escape.window="menuOpen = false"