AGENTS.md

@@ -0,0 +1,169 @@
+# AGENTS.md
+
+This file provides guidance to Codex (Codex.ai/code) when working with code in this repository.
+
+## Project Quick Reference
+
+**Project:** Cozy Den - Personal landing page for hiddenden.cafe
+**Owner:** Latte (gay furry developer, values self-hosting and privacy)
+**Tech Stack:** Astro 4.x, TypeScript, Vanilla CSS, Docker + Nginx
+**Aesthetic:** Warm coffee/cappuccino theme, cozy hidden den vibes
+**Deployment:** Docker containers pushed to Gitea registry at git.hiddenden.cafe
+
+## Core Design Principles
+
+1. **Cozy Aesthetic** - Warm colors, coffee/cappuccino theme, hidden den vibes
+2. **Self-Hosted** - Everything runs on personal infrastructure (homelab/VPS)
+3. **Privacy First** - No tracking, no external dependencies
+4. **Lightweight** - Static HTML/CSS, minimal JavaScript
+5. **Docker-Ready** - Easy deployment via containers
+
+## File Structure
+
+```
+cozy-den/
+├── src/
+│   ├── layouts/
+│   │   └── BaseLayout.astro      # Base layout + global styles
+│   └── pages/
+│       ├── index.astro            # Main landing page
+│       └── 404.astro              # Custom 404 page
+├── public/
+│   ├── favicon.svg                # Coffee emoji favicon
+│   └── robots.txt                 # Search engine directives
+├── astro.config.mjs               # Astro config with sitemap
+├── package.json                   # Dependencies (Astro 4.x, @astrojs/sitemap)
+├── Dockerfile                     # Multi-stage: Node builder + Nginx
+├── docker-compose.yml             # Local container orchestration
+└── nginx.conf                     # Production web server config
+```
+
+## Architecture Notes
+
+This is a simple static site following standard Astro conventions:
+- Layouts in `src/layouts/` for reusable page templates
+- Pages in `src/pages/` (routes automatically based on filename)
+- All content is on a single page (`index.astro`) with multiple sections
+- Custom 404 page with cozy theming
+- No client-side JavaScript - pure static HTML/CSS output
+- CSS custom properties centralized in `BaseLayout.astro` for theming
+- Accessibility improvements with ARIA labels and semantic HTML
+
+## Commands
+
+```bash
+# Development
+npm install          # Install dependencies
+npm run dev          # Start dev server at http://localhost:4321
+npm run build        # Build for production (runs astro check + astro build)
+npm run preview      # Preview production build
+
+# Docker
+docker build -t cozy-den .
+docker run -d -p 3000:80 --name cozy-den cozy-den
+docker-compose up -d
+
+# Deployment to Gitea registry
+docker tag cozy-den git.hiddenden.cafe/mats/cozy-den:latest
+docker login git.hiddenden.cafe
+docker push git.hiddenden.cafe/mats/cozy-den:latest
+```
+
+## Color System
+
+All colors use CSS custom properties in `BaseLayout.astro`:
+
+```css
+--color-bg: #1a1410           /* Dark background (deep coffee) */
+--color-bg-light: #2a1f18     /* Lighter background for cards */
+--color-text: #f4e9d8          /* Cream text */
+--color-text-dim: #c4b5a0      /* Dimmed text */
+--color-accent: #d4a574        /* Warm accent (coffee with cream) */
+--color-accent-bright: #e8bf8e /* Brighter accent for highlights */
+--color-warm: #8b6f47          /* Warm brown for borders/accents */
+```
+
+**To change theme:** Edit these variables. All components update automatically.
+
+## Common Modification Patterns
+
+### Adding a Section
+```astro
+<section class="section new-section">
+  <div class="container">
+    <div class="card fade-in">
+      <h2>Section Title</h2>
+      <p>Content</p>
+    </div>
+  </div>
+</section>
+```
+
+### Adding a Service
+```astro
+<div class="service-item">
+  <h3><a href="https://service.hiddenden.cafe">🔧 Service Name</a></h3>
+  <p>Description of the service</p>
+</div>
+```
+
+### Adding a New Page
+Create new `.astro` file in `src/pages/`:
+```astro
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+---
+
+<BaseLayout title="New Page">
+  <div class="container">
+    <h1>New Page</h1>
+  </div>
+</BaseLayout>
+```
+Note: Pages route based on filename (e.g., `about.astro` → `/about`)
+
+## Implementation Guidelines
+
+**DO:**
+- Maintain cozy, warm aesthetic (coffee/cappuccino theme)
+- Keep site lightweight - static HTML/CSS only, no JavaScript runtime
+- Use CSS custom properties for all colors (defined in `src/layouts/BaseLayout.astro`)
+- Use `.fade-in` class for animations, `.card` class for consistent card styling
+- Test production builds and Docker builds after changes
+- Ensure responsive design works on mobile
+- Follow standard Astro structure (layouts in `src/layouts/`, pages in `src/pages/`)
+
+**DON'T:**
+- Add tracking or external dependencies (privacy-first approach)
+- Add client-side JavaScript unless absolutely necessary
+- Break the coffee/warm color theme
+- Create sterile or corporate design elements
+
+## Astro-Specific Notes
+
+- Frontmatter (code between `---`) runs at build time only
+- `<style>` tags are scoped by default; use `<style is:global>` for global styles (see `src/layouts/BaseLayout.astro`)
+- Site generates static HTML at build time - no JavaScript runtime
+- Sitemap integration configured in `astro.config.mjs` via `@astrojs/sitemap`
+- Custom 404 page at `src/pages/404.astro` with warm, themed styling
+
+## Context & Preferences
+
+- **Owner:** Latte (gay furry developer who values self-hosting, privacy, and open-source)
+- **Deployment:** All deployments via Docker to personal Gitea registry (git.hiddenden.cafe)
+- **Design Philosophy:** Warm, personal, cozy aesthetic over corporate/sterile design
+- **Technical Background:** Owner typically uses Python/Flask, learning Astro with this project
+
+## Troubleshooting
+
+**Build fails:** Check TypeScript config, ensure Node 18+, run `astro check`
+**Styles not applying:** Verify CSS variables are in `BaseLayout.astro`, check if you need `is:global`
+**Docker build fails:** Ensure `package.json` and `package-lock.json` exist
+**Changes not showing:** Hard refresh browser, restart dev server, or clear `.astro` cache
+
+## Related Documentation
+
+- **PROJECT_CONTEXT.md** - Design principles and project philosophy
+- **DEVELOPMENT.md** - Detailed developer documentation
+- **TODO.md** - Current tasks and future feature ideas
+- **README.md** - User-facing setup and deployment guide

src/components/Nav.astro

@@ -5,6 +5,7 @@ const links = [
     { href: "/", label: "home" },
     { href: "/about", label: "about" },
     { href: "/projects", label: "projects" },
+    { href: "/now", label: "now" },
     { href: "/blog", label: "blog" },
 ];
 
@@ -39,7 +40,7 @@ function isActive(href: string, current: string): boolean {
         right: 0;
         z-index: 100;
         padding: var(--space-sm) var(--space-md);
-        background: rgba(30, 30, 46, 0.85);
+        background: var(--color-glass-nav);
         backdrop-filter: blur(8px);
         border-bottom: 1px solid var(--color-surface);
     }

src/content/blog/hello-world.md

@@ -1,8 +1,8 @@
 ---
 title: "Welcome to the Den"
-date: 2026-03-04
+date: 2026-03-01
 description: "First proper post. Why I built this site, what it runs on, and what to expect."
-draft: true
+draft: false
 ---
 
 So I finally got around to setting up a proper blog. Welcome.

src/data/now.md

@@ -0,0 +1,25 @@
+Living snapshot of what I am building, learning, and focusing on right now.
+
+Last updated: 2026-03-06
+
+## Current Projects
+
+- **GuardDen** - tightening moderation and security workflows for community spaces.
+- **loyal_companion** - active work-in-progress with feature and stability passes.
+- **Cozy Den** - improving structure and adding pages that are easier to maintain over time.
+
+## Learning Right Now
+
+- Better Astro content organization for small personal sites.
+- Cleaner Docker + nginx deployment routines for self-hosted services.
+- Practical writing habits for short, regular project updates.
+
+## Focus Areas
+
+- Privacy-first self-hosting with minimal external dependencies.
+- Building lightweight tools that stay understandable and maintainable.
+- Sustainable progress: consistent small steps instead of burnout sprints.
+
+## Next Check-In
+
+I try to refresh this page every few weeks so it stays useful and current.

src/layouts/BaseLayout.astro

@@ -54,8 +54,18 @@ const fullOgImage = new URL(ogImage, Astro.site).href;
             name="keywords"
             content="self-hosted, privacy, open-source, furry, developer, cozy, hidden den"
         />
-        <meta name="theme-color" content="#cba6f7" />
+        <meta name="theme-color" content="#1e1e2e" />
-        <meta name="color-scheme" content="dark" />
+        <meta
+            name="theme-color"
+            media="(prefers-color-scheme: dark)"
+            content="#1e1e2e"
+        />
+        <meta
+            name="theme-color"
+            media="(prefers-color-scheme: light)"
+            content="#f6efe6"
+        />
+        <meta name="color-scheme" content="dark light" />
 
         <!-- Favicons -->
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@@ -101,6 +111,9 @@ const fullOgImage = new URL(ogImage, Astro.site).href;
         --color-blue: #89b4fa;
         --color-green: #a6e3a1;
         --color-peach: #fab387;
+        --color-glass: rgba(30, 30, 46, 0.8);
+        --color-glass-nav: rgba(30, 30, 46, 0.85);
+        color-scheme: dark;
 
         /* Spacing */
         --space-xs: 0.5rem;
@@ -113,6 +126,25 @@ const fullOgImage = new URL(ogImage, Astro.site).href;
         --font-body: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;
     }
 
+    @media (prefers-color-scheme: light) {
+        :root {
+            --color-bg: #f6efe6;
+            --color-bg-light: #efe1cf;
+            --color-surface: #d8c2a8;
+            --color-text: #35251a;
+            --color-text-dim: #6b5442;
+            --color-accent: #8b5e3c;
+            --color-accent-bright: #a16c45;
+            --color-warm: #b6794f;
+            --color-blue: #326b8f;
+            --color-green: #3f7c47;
+            --color-peach: #b5693e;
+            --color-glass: rgba(246, 239, 230, 0.82);
+            --color-glass-nav: rgba(246, 239, 230, 0.88);
+            color-scheme: light;
+        }
+    }
+
     * {
         margin: 0;
         padding: 0;

src/pages/404.astro

@@ -66,7 +66,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     .container {
         max-width: 500px;
         width: 100%;
-        background: rgba(30, 30, 46, 0.8);
+        background: var(--color-glass);
         backdrop-filter: blur(10px);
         border: 1px solid var(--color-surface);
         border-radius: 8px;

src/pages/about.astro

@@ -105,7 +105,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     .container {
         max-width: 700px;
         width: 100%;
-        background: rgba(30, 30, 46, 0.8);
+        background: var(--color-glass);
         backdrop-filter: blur(10px);
         border: 1px solid var(--color-surface);
         border-radius: 8px;

src/pages/blog/[...slug].astro

@@ -76,7 +76,7 @@ function formatDate(date: Date) {
     .container {
         max-width: 700px;
         width: 100%;
-        background: rgba(30, 30, 46, 0.8);
+        background: var(--color-glass);
         backdrop-filter: blur(10px);
         border: 1px solid var(--color-surface);
         border-radius: 8px;

src/pages/blog/index.astro

@@ -83,7 +83,7 @@ function formatDate(date: Date) {
     .container {
         max-width: 700px;
         width: 100%;
-        background: rgba(30, 30, 46, 0.8);
+        background: var(--color-glass);
         backdrop-filter: blur(10px);
         border: 1px solid var(--color-surface);
         border-radius: 8px;

src/pages/index.astro

@@ -210,7 +210,7 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;
     .container {
         max-width: 700px;
         width: 100%;
-        background: rgba(30, 30, 46, 0.8);
+        background: var(--color-glass);
         backdrop-filter: blur(10px);
         border: 1px solid var(--color-surface);
         border-radius: 8px;

src/pages/now.astro

@@ -0,0 +1,152 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import NowContent from "../data/now.md";
+---
+
+<BaseLayout
+    title="Now - Hidden Den Cafe"
+    description="A living snapshot of what Latte is building, learning, and focusing on right now."
+>
+    <div class="matrix-bg" aria-hidden="true"></div>
+
+    <main class="main">
+        <article class="now-card fade-in">
+            <header class="header">
+                <h1 class="title">Now</h1>
+                <div class="divider">══════════════════════════════</div>
+            </header>
+            <NowContent />
+        </article>
+    </main>
+</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); }
+    }
+
+    .main {
+        min-height: 100vh;
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        padding: var(--space-lg) var(--space-md);
+        padding-top: calc(var(--space-lg) + 3rem);
+    }
+
+    .now-card {
+        width: 100%;
+        max-width: 700px;
+        background: var(--color-glass);
+        backdrop-filter: blur(10px);
+        border: 1px solid var(--color-surface);
+        border-radius: 8px;
+        padding: var(--space-xl);
+    }
+
+    .header {
+        margin-bottom: var(--space-lg);
+    }
+
+    .title {
+        font-size: 2rem;
+        font-weight: 700;
+        letter-spacing: 2px;
+        text-align: center;
+    }
+
+    .divider {
+        color: var(--color-surface);
+        text-align: center;
+        font-size: 0.75rem;
+        margin: var(--space-md) 0;
+        user-select: none;
+    }
+
+    .now-card :global(h2) {
+        font-size: 1rem;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        margin-top: var(--space-lg);
+        margin-bottom: var(--space-sm);
+        color: var(--color-accent);
+    }
+
+    .now-card :global(p),
+    .now-card :global(li) {
+        color: var(--color-text-dim);
+        line-height: 1.7;
+    }
+
+    .now-card :global(p) {
+        margin-bottom: var(--space-sm);
+    }
+
+    .now-card :global(ul) {
+        margin-left: 1.2rem;
+        display: grid;
+        gap: var(--space-xs);
+    }
+
+    .now-card :global(strong) {
+        color: var(--color-accent-bright);
+        font-weight: 700;
+    }
+
+    .fade-in {
+        animation: fadeIn 0.6s ease-out forwards;
+        opacity: 0;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @media (max-width: 600px) {
+        .now-card {
+            padding: var(--space-md);
+        }
+
+        .title {
+            font-size: 1.5rem;
+        }
+
+        .divider {
+            font-size: 0.6rem;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .matrix-bg {
+            animation: none;
+        }
+
+        .fade-in {
+            animation: none;
+            opacity: 1;
+        }
+    }
+</style>

src/pages/projects.astro

@@ -126,7 +126,7 @@ function getPrimaryLink(project: Project): string | undefined {
     .container {
         max-width: 700px;
         width: 100%;
-        background: rgba(30, 30, 46, 0.8);
+        background: var(--color-glass);
         backdrop-filter: blur(10px);
         border: 1px solid var(--color-surface);
         border-radius: 8px;