Fix styling issues on 404 and Repository pages

- Add proper container styling (mx-auto, px-4, py-12) to main content wrappers matching single.html pattern
- Replace gray color hardcodes with theme-aware CSS variables:
  - bg-gray-50/gray-900 → bg-bg/50 with hover:bg-bg/70 for article cards
  - text-gray-600/gray-400 → text-text-dim for text
  - border-gray-300/gray-700 → border-border for borders
  - bg-gray-200/gray-800 → bg-border/20 for tags
- Fixes color inconsistency in both light and dark modes
- Ensures 404 latest articles and Repository tags use theme colors instead of fixed gray

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

2 files changed, 12 insertions, 11 deletions

diff --git a/themes/danix-xyz-hacker/layouts/404.html b/themes/danix-xyz-hacker/layouts/404.html
index 8cb694c..6dbe1dd 100644
--- a/themes/danix-xyz-hacker/layouts/404.html
+++ b/themes/danix-xyz-hacker/layouts/404.html
@@ -1,6 +1,7 @@
 {{ define "main" }}
-<main class="min-h-screen flex items-center justify-center px-4">
-  <div class="text-center max-w-2xl w-full" x-data="notFoundPage()">
+<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()">
     <!-- 404 Heading -->
     <h1 class="text-7xl md:text-8xl font-bold text-accent mb-4 animate-fade-in">
       404
@@ -23,13 +24,13 @@
           id="search-input"
           type="text"
           placeholder="{{ (i18n "searchPlaceholder") }}"
-          class="px-4 py-3 border-2 border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-bg text-text"
+          class="px-4 py-3 border-2 border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-bg text-text"
           @input="filterArticles($el.value)"
         />
       </form>
       <div id="search-results" class="mt-4 text-left space-y-3" x-show="filteredArticles.length > 0">
         <template x-for="article in filteredArticles" :key="article.title">
-          <div class="p-4 border-l-4 border-accent bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+          <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors">
             <a :href="article.url" class="block text-left">
               <h4 class="font-bold text-accent hover:underline" x-text="article.title"></h4>
               <p class="text-sm text-text-dim mt-1" x-text="article.date"></p>
@@ -47,7 +48,7 @@
       <h3 class="text-2xl font-bold mb-6">{{ i18n "recentArticles" }}</h3>
       <div class="space-y-4">
         {{ range first 5 (where .Site.RegularPages "Section" "articles") }}
-        <div class="p-4 border-l-4 border-accent bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+        <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors">
           <a href="{{ .Permalink }}" class="block text-left">
             <h4 class="font-bold text-accent hover:underline">{{ .Title }}</h4>
             <p class="text-sm text-text-dim mt-1">
@@ -73,7 +74,7 @@
     </div>
 
     <!-- Easter Egg Trigger -->
-    <div class="mt-12 pt-8 border-t border-gray-300 dark:border-gray-700">
+    <div class="mt-12 pt-8 border-t border-border">
       <button
         @click="toggleEasterEgg()"
         class="text-sm text-text-dim hover:text-accent transition-colors underline"
diff --git a/themes/danix-xyz-hacker/layouts/repository/list.html b/themes/danix-xyz-hacker/layouts/repository/list.html
index aa6805e..73ae222 100644
--- a/themes/danix-xyz-hacker/layouts/repository/list.html
+++ b/themes/danix-xyz-hacker/layouts/repository/list.html
@@ -1,12 +1,12 @@
 {{ define "main" }}
 <main class="min-h-screen px-4 py-12">
-  <article class="max-w-4xl mx-auto">
+  <article class="mx-auto px-4 py-12 max-w-4xl">
     <!-- Page Title (Hero) -->
     <div class="mb-12">
       <h1 class="text-5xl md:text-6xl font-bold mb-4 text-accent animate-fade-in">
         {{ i18n "repositoryTitle" }}
       </h1>
-      <p class="text-xl text-gray-600 dark:text-gray-400 animate-fade-in-delay">
+      <p class="text-xl text-text-dim animate-fade-in-delay">
         {{ i18n "repositorySubtitle" }}
       </p>
     </div>
@@ -22,7 +22,7 @@
 
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {{ range $.Site.Data.repos.repos }}
-        <div class="border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
+        <div class="border border-border rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
           <!-- Card Image -->
           <img
             src="{{ .image }}"
@@ -35,7 +35,7 @@
           <div class="p-6">
             <h3 class="text-xl font-bold mb-2">{{ .name }}</h3>
 
-            <p class="text-gray-600 dark:text-gray-400 mb-4">
+            <p class="text-text-dim mb-4">
               {{ i18n .description_key }}
             </p>
 
@@ -43,7 +43,7 @@
             {{ if .tags }}
             <div class="flex flex-wrap gap-2 mb-4">
               {{ range .tags }}
-              <span class="text-xs px-2 py-1 bg-gray-200 dark:bg-gray-800 rounded">
+              <span class="text-xs px-2 py-1 bg-border/20 rounded">
                 {{ . }}
               </span>
               {{ end }}