Hiddenden/Cozy-Den
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign site as personal page with Catppuccin theme
Enterprise AI Code Review / ai-review (pull_request) Successful in 44s
Details

Browse Source 
- Switch to Catppuccin Mocha color palette
- Add monospace font (JetBrains Mono/Fira Code)
- Create minimalist layout with centered card design
- Add subtle animated grid background
- Update content to personal info (Latte)
- Include projects, games, and crypto donation addresses
- Update 404 page to match new style
This commit is contained in:
Latte
2026-01-03 13:00:17 +01:00
parent f36f65733e
commit a21e512bbe
3 changed files with 349 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/404.astro
+68 -92
View File
@@ -4,30 +4,29 @@ import BaseLayout from "../layouts/BaseLayout.astro";
<BaseLayout
title="404 - Page Not Found | Hidden Den Cafe"
description="This page doesn't exist in the Hidden Den. Let's get you back to somewhere cozy."
description="This page doesn't exist in the Hidden Den."
>
<div class="matrix-bg" aria-hidden="true"></div>
<main class="not-found-page">
<div class="container">
<div class="card fade-in">
<div class="not-found-content">
<h1 class="error-code">404</h1>
<h2 class="error-title">Lost in the Den?</h2>
<p class="error-message">
Oops! This cozy corner doesn't seem to exist. Maybe it's
still being built, or perhaps you've wandered into a
part of the den that hasn't been opened yet.
</p>
<div class="actions">
<a href="/" class="btn-primary"> Back to Home </a>
<a
href="https://git.hiddenden.cafe"
class="btn-secondary"
target="_blank"
rel="noopener noreferrer"
>
Visit Gitea
</a>
</div>
<div class="content fade-in">
<h1 class="error-code">404</h1>
<div class="divider">══════════════════════════════</div>
<h2 class="error-title">Lost in the Den?</h2>
<p class="error-message">
This corner doesn't exist yet.
</p>
<div class="actions">
<a href="/" class="btn">[Back to Home]</a>
<a
href="https://git.hiddenden.cafe"
class="btn"
target="_blank"
rel="noopener noreferrer"
>
[Gitea]
</a>
</div>
</div>
</div>
@@ -35,6 +34,26 @@ import BaseLayout from "../layouts/BaseLayout.astro";
</BaseLayout>
<style>
.matrix-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.03;
background:
linear-gradient(var(--color-accent) 1px, transparent 1px),
linear-gradient(90deg, var(--color-accent) 1px, transparent 1px);
background-size: 50px 50px;
animation: grid-move 20s linear infinite;
}
@keyframes grid-move {
0% { transform: translate(0, 0); }
100% { transform: translate(50px, 50px); }
}
.not-found-page {
display: flex;
align-items: center;
@@ -44,45 +63,40 @@ import BaseLayout from "../layouts/BaseLayout.astro";
}
.container {
max-width: 600px;
max-width: 500px;
width: 100%;
}
.card {
background: var(--color-bg-light);
border-radius: 12px;
background: rgba(30, 30, 46, 0.8);
backdrop-filter: blur(10px);
border: 1px solid var(--color-surface);
border-radius: 8px;
padding: var(--space-xl);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(212, 165, 116, 0.1);
text-align: center;
}
.not-found-content {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.error-code {
font-size: 6rem;
font-size: 5rem;
font-weight: bold;
color: var(--color-accent);
color: var(--color-warm);
line-height: 1;
margin: 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.divider {
color: var(--color-surface);
font-size: 0.75rem;
margin: var(--space-md) 0;
user-select: none;
}
.error-title {
font-size: 2rem;
margin: 0;
color: var(--color-accent-bright);
font-size: 1.25rem;
margin: 0 0 var(--space-sm) 0;
color: var(--color-accent);
}
.error-message {
font-size: 1.1rem;
color: var(--color-text-dim);
line-height: 1.6;
margin: 0;
margin: 0 0 var(--space-lg) 0;
}
.actions {
@@ -90,65 +104,27 @@ import BaseLayout from "../layouts/BaseLayout.astro";
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
margin-top: var(--space-md);
}
.btn-primary,
.btn-secondary {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-lg);
border-radius: 8px;
font-weight: 500;
transition: all 0.2s ease;
.btn {
color: var(--color-blue);
text-decoration: none;
transition: color 0.2s ease;
}
.btn-primary {
background: var(--color-accent);
color: var(--color-bg);
}
.btn-primary:hover {
background: var(--color-accent-bright);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(212, 165, 116, 0.3);
}
.btn-secondary {
background: transparent;
.btn:hover {
color: var(--color-accent-bright);
border: 2px solid var(--color-accent);
}
.btn-secondary:hover {
background: rgba(212, 165, 116, 0.1);
border-color: var(--color-accent-bright);
transform: translateY(-2px);
}
@media (max-width: 768px) {
@media (max-width: 600px) {
.error-code {
font-size: 4rem;
font-size: 3rem;
}
}
.error-title {
font-size: 1.5rem;
}
.error-message {
font-size: 1rem;
}
.actions {
flex-direction: column;
}
.btn-primary,
.btn-secondary {
width: 100%;
justify-content: center;
@media (prefers-reduced-motion: reduce) {
.matrix-bg {
animation: none;
}
}
</style>