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 f7d42a98ead9d821c3627aeec099eeb7b8d34394..9e5c86a8d5118adb92e2c33fd73a1859b6439ec4 100644 (file)
--- 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 ab1f4bb915a956d9f6c84d379a3369111d4c077a..8c58a4fddb8db643b5c4023c57c019b2f30d43ac 100644 (file)
--- 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 caa6c6dee5b5d9c6c9528d8fa42cfe614ae7ad05..41f4e0b9ae4d5a602997e8e95da3bbf6e8514ded 100644 (file)
--- 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"