diff options
Diffstat (limited to 'themes/danix-xyz-hacker/layouts/404.html')
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/404.html | 13 |
1 files changed, 7 insertions, 6 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" |