Add blog via Astro content collections

Introduce blog support: content collection schema, listing and post
routes, and a sample Markdown post. Update docs and TODO; add blog
assets dir and adjust color variables in docs. Also set
absolute_redirect off in nginx.conf for container routing.

DEVELOPMENT.md

@@ -16,15 +16,22 @@ Cozy Den is a landing page for hiddenden.cafe built with Astro. The site feature
 ```
 cozy-den/
 ├── src/
+│   ├── content/
+│   │   ├── config.ts              # Content collection schema
+│   │   └── blog/
+│   │       └── *.md               # Blog posts (Markdown)
 │   ├── layouts/
 │   │   └── BaseLayout.astro      # Base HTML layout with global styles
 │   ├── pages/
 │   │   ├── index.astro            # Main landing page
-│   │   └── 404.astro              # Custom 404 error page
-│   └── components/                # (Empty - ready for future components)
+│   │   ├── 404.astro              # Custom 404 error page
+│   │   └── blog/
+│   │       ├── index.astro        # Blog listing page (/blog)
+│   │       └── [...slug].astro    # Individual post pages (/blog/<slug>)
 ├── public/
 │   ├── favicon.svg                # Site favicon (coffee emoji)
-│   └── robots.txt                 # Search engine directives
+│   ├── robots.txt                 # Search engine directives
+│   └── blog/                      # Blog post images (per-post subdirectory)
 ├── astro.config.mjs               # Astro configuration with sitemap
 ├── package.json                   # Node dependencies
 ├── tsconfig.json                  # TypeScript configuration
@@ -40,13 +47,15 @@ cozy-den/
 The site uses CSS custom properties for theming. All colors are defined in `src/layouts/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 for less emphasis */
---color-accent: #d4a574        /* Warm accent (coffee with cream) */
---color-accent-bright: #e8bf8e /* Brighter accent for highlights */
---color-warm: #8b6f47          /* Warm brown for borders/accents */
+--color-bg: #1e1e2e           /* Dark background (Catppuccin Mocha base) */
+--color-text: #cdd6f4          /* Light text */
+--color-text-dim: #a6adc8      /* Dimmed text for less emphasis */
+--color-accent: #cba6f7        /* Mauve accent */
+--color-accent-bright: #f5c2e7 /* Pink accent for highlights */
+--color-surface: #313244       /* Surface color for borders/cards */
+--color-blue: #89b4fa          /* Blue for links */
+--color-green: #a6e3a1         /* Green for code */
+--color-peach: #fab387         /* Peach for labels */
 ```
 
 ## Component Architecture
@@ -62,12 +71,31 @@ The base layout provides:
 ### index.astro
 
 The main page includes these sections:
-1. **Hero** - Title and subtitle
-2. **About Hidden Den** - Information about the site/space
-3. **About Me** - Information about Latte
-4. **Services** - List of self-hosted services
-5. **Support** - Ways to help/contribute
-6. **Footer** - Links and credits
+1. **Header** - Title
+2. **About** - Introduction, age, status
+3. **Cryptographic Keys** - PGP fingerprint and SSH public key
+4. **Games** - Games Latte plays
+5. **Socials** - Links to social platforms
+6. **Services** - Self-hosted services
+7. **Support** - Crypto donation addresses
+8. **Blog** - Link to `/blog`
+9. **Footer** - Credits
+
+### blog/index.astro
+
+Blog listing page at `/blog`. Fetches all non-draft posts from the `blog` content collection, sorted by date descending.
+
+### blog/[...slug].astro
+
+Individual blog post page. Renders Markdown content using Astro's `<Content />` component. Styles for prose content (headings, paragraphs, code blocks, images, etc.) are scoped within `.content :global(...)`.
+
+### src/content/config.ts
+
+Defines the `blog` content collection schema:
+- `title` (string) — post title
+- `date` (date) — publish date, used for sorting
+- `description` (string) — shown on the listing page
+- `draft` (boolean, optional) — set to `true` to hide from listing
 
 ### 404.astro
 
@@ -120,9 +148,15 @@ npm run preview
 2. Follow the existing structure with h3 link and description
 
 **Adding images:**
-1. Place images in `public/` directory
-2. Reference them with `/image.jpg` in your code
-3. They'll be served as static assets
+1. Place images in `public/blog/<post-slug>/` directory
+2. Reference in Markdown with `/blog/<post-slug>/image.jpg`
+3. They'll be served as static assets by nginx
+
+**Adding a blog post:**
+1. Create `src/content/blog/my-post-slug.md`
+2. Add frontmatter: `title`, `date`, `description` (and optionally `draft: true`)
+3. Write content in Markdown below the frontmatter
+4. The post appears automatically at `/blog/my-post-slug`
 
 ## Docker Deployment
 
@@ -273,14 +307,12 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 ## Future Enhancements
 
 Ideas for future development:
-- [ ] Add blog section using Astro's content collections
-- [ ] Create reusable components for service items
-- [ ] Add dark/light theme toggle
-- [ ] Implement contact form
+- [x] Add blog section using Astro's content collections
+- [x] Create custom 404 page
 - [ ] Add RSS feed for blog
-- [ ] Create custom 404 page
+- [ ] Create reusable components for service items
 - [ ] Add more animations and transitions
-- [ ] Integrate with analytics (privacy-friendly)
+- [ ] Integrate with analytics (privacy-friendly, self-hosted)
 
 ## Resources