From d97d614328021a6c35dc69ef419d7b8f29db585a Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Fri, 17 Apr 2026 11:22:02 +0200
Subject: 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 <noreply@anthropic.com>
---
 themes/danix-xyz-hacker/layouts/404.html           | 69 +++++++++++-----------
 .../danix-xyz-hacker/layouts/repository/list.html  |  2 +-
 2 files changed, 36 insertions(+), 35 deletions(-)

(limited to 'themes/danix-xyz-hacker/layouts')

diff --git a/themes/danix-xyz-hacker/layouts/404.html b/themes/danix-xyz-hacker/layouts/404.html
index 6dbe1dd..e39784e 100644
--- 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 73ae222..71a998e 100644
--- 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">
-- 
cgit v1.2.3