fix: improve styling and functionality for 404 and Repository pages

- 404.html: Move x-data directive to wrap entire content including modal, fixing Easter egg button click functionality. Add border, glow, and bg styling to main container.
- repository/list.html: Add border, glow, rounded, and bg styling to article container for consistency with other pages.
- Both pages now have consistent visual styling with borders, glows, and proper background colors.

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

diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css
index 26cad753351aefaf4cf69a9467fa746c22e2c4e4..677ea1e56c0c1441755c79790e5c4958d8075f45 100644 (file)
--- a/themes/danix-xyz-hacker/assets/css/main.min.css
+++ b/themes/danix-xyz-hacker/assets/css/main.min.css
@@ -1284,6 +1284,10 @@ button,
 
 /* Glow effect utility */
 
+.glow-accent {
+  box-shadow: 0 0 20px var(--accent-glow);
+}
+
 /* Frosted glass bar (header/footer) */
 
 .frosted-bar {
@@ -1812,10 +1816,6 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg {
   width: 100%;
 }
 
-.max-w-2xl {
-  max-width: 42rem;
-}
-
 .max-w-3xl {
   max-width: 48rem;
 }
@@ -2021,11 +2021,6 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg {
   border-color: var(--border);
 }
 
-.border-gray-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
-}
-
 .bg-accent {
   background-color: var(--accent);
 }
@@ -2038,16 +2033,6 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg {
   background-color: rgb(0 0 0 / 0.5);
 }
 
-.bg-gray-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
-}
-
-.bg-gray-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
-}
-
 .bg-surface {
   background-color: var(--surface);
 }
@@ -2241,11 +2226,6 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg {
   color: var(--bg);
 }
 
-.text-gray-600 {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
-}
-
 .text-text {
   color: var(--text);
 }
@@ -3529,11 +3509,6 @@ article.toast.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg {
   line-height: 2.25rem;
 }
 
-.hover\:bg-gray-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
-}
-
 .hover\:bg-surface:hover {
   background-color: var(--surface);
 }
@@ -3740,31 +3715,6 @@ article.toast.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg {
 }
 
 @media (prefers-color-scheme: dark) {
-  .dark\:border-gray-700 {
-    --tw-border-opacity: 1;
-    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
-  }
-
-  .dark\:bg-gray-800 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
-  }
-
-  .dark\:bg-gray-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
-  }
-
-  .dark\:text-gray-400 {
-    --tw-text-opacity: 1;
-    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
-  }
-
-  .dark\:hover\:bg-gray-800:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
-  }
-
   .dark\:hover\:text-text:hover {
     color: var(--text);
   }

diff --git a/themes/danix-xyz-hacker/layouts/404.html b/themes/danix-xyz-hacker/layouts/404.html
index 6dbe1dd6425e3c221fa5f4ce70ce7c275218132e..e39784ec6d2e4ef36ff114af24c8043f234e7a6b 100644 (file)
--- a/themes/danix-xyz-hacker/layouts/404.html
+++ b/themes/danix-xyz-hacker/layouts/404.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
 <main class="min-h-screen px-4 py-12">
-  <div class="mx-auto px-4 py-12 max-w-4xl">
-    <div class="text-center" x-data="notFoundPage()">
+  <div class="mx-auto px-4 py-12 max-w-4xl border border-border glow-accent rounded-lg bg-bg p-8" x-data="notFoundPage()">
+    <div class="text-center">
     <!-- 404 Heading -->
     <h1 class="text-7xl md:text-8xl font-bold text-accent mb-4 animate-fade-in">
       404
@@ -83,46 +83,47 @@
       </button>
     </div>
 
-    <!-- Easter Egg Modal (Hidden by default) -->
-    <div
-      class="fixed inset-0 z-50 hidden"
-      :class="{ 'flex items-center justify-center': showEasterEgg }"
-      x-show="showEasterEgg"
-      x-cloak
-    >
-      <!-- Overlay -->
+      <!-- Easter Egg Modal (Hidden by default) -->
       <div
-        class="absolute inset-0 bg-black/50"
-        @click="showEasterEgg = false"
-      ></div>
+        class="fixed inset-0 z-50 hidden"
+        :class="{ 'flex items-center justify-center': showEasterEgg }"
+        x-show="showEasterEgg"
+        x-cloak
+      >
+        <!-- Overlay -->
+        <div
+          class="absolute inset-0 bg-black/50"
+          @click="showEasterEgg = false"
+        ></div>
 
-      <!-- Modal Content -->
-      <div class="relative bg-bg border-2 border-accent p-8 rounded-lg shadow-xl max-w-md mx-4">
-        <h2 class="text-2xl font-bold mb-6 text-accent">{{ i18n "easterEggTitle" }}</h2>
+        <!-- Modal Content -->
+        <div class="relative bg-bg border-2 border-accent p-8 rounded-lg shadow-xl max-w-md mx-4">
+          <h2 class="text-2xl font-bold mb-6 text-accent">{{ i18n "easterEggTitle" }}</h2>
 
-        <div class="space-y-4">
-          <button
-            @click="showEasterEgg = false; window.location.href = '{{ .Site.BaseURL }}'"
-            class="w-full btn btn-primary"
-          >
-            💊 {{ i18n "bluePill" }}
-          </button>
+          <div class="space-y-4">
+            <button
+              @click="showEasterEgg = false; window.location.href = '{{ .Site.BaseURL }}'"
+              class="w-full btn btn-primary"
+            >
+              💊 {{ i18n "bluePill" }}
+            </button>
+
+            <button
+              @click="goToRandomArticle()"
+              class="w-full btn btn-secondary"
+            >
+              🐰 {{ i18n "redPill" }}
+            </button>
+          </div>
 
           <button
-            @click="goToRandomArticle()"
-            class="w-full btn btn-secondary"
+            @click="showEasterEgg = false"
+            class="absolute top-4 right-4 text-text-dim hover:text-text dark:hover:text-text transition-colors"
+            aria-label="Close modal"
           >
-            🐰 {{ i18n "redPill" }}
+            ✕
           </button>
         </div>
-
-        <button
-          @click="showEasterEgg = false"
-          class="absolute top-4 right-4 text-text-dim hover:text-text dark:hover:text-text transition-colors"
-          aria-label="Close modal"
-        >
-          ✕
-        </button>
       </div>
     </div>
   </div>

diff --git a/themes/danix-xyz-hacker/layouts/repository/list.html b/themes/danix-xyz-hacker/layouts/repository/list.html
index 73ae2227642e1c6596de33af8d3d676315be9176..71a998e30c952feddc855f9207d6342efff1490a 100644 (file)
--- a/themes/danix-xyz-hacker/layouts/repository/list.html
+++ b/themes/danix-xyz-hacker/layouts/repository/list.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
 <main class="min-h-screen px-4 py-12">
-  <article class="mx-auto px-4 py-12 max-w-4xl">
+  <article class="mx-auto px-4 py-12 max-w-4xl border border-border glow-accent rounded-lg bg-bg p-8">
     <!-- Page Title (Hero) -->
     <div class="mb-12">
       <h1 class="text-5xl md:text-6xl font-bold mb-4 text-accent animate-fade-in">