@karaoke-cms/theme-default 0.6.2 → 0.9.0

package/README.md

@@ -0,0 +1,65 @@
+# @karaoke-cms/theme-default
+
+Two-column knowledge base theme for karaoke-cms. Includes blog, docs, and tags sections with a clean system-UI design.
+
+## Where it belongs
+
+`packages/theme-default/` in the monorepo. Activated via `karaoke.config.ts`:
+
+```ts
+// karaoke.config.ts
+import { loadEnv } from '@karaoke-cms/astro/env';
+const { KARAOKE_VAULT } = loadEnv(new URL('.', import.meta.url));
+
+export default {
+  vault: KARAOKE_VAULT,
+  theme: '@karaoke-cms/theme-default',
+};
+```
+
+`@karaoke-cms/astro` resolves the theme string to this package and loads it as a nested Astro integration at build time.
+
+## What it does
+
+Injects all site routes and sets the `@theme` Vite alias so that `Base.astro` can resolve `@theme/styles.css`:
+
+| Route | Page |
+|-------|------|
+| `/` | Home — recent blog posts + recent docs |
+| `/blog` | Blog index — all published posts, sorted by date |
+| `/blog/[slug]` | Blog post — full content with related posts |
+| `/docs` | Docs index — all published docs, sorted alphabetically |
+| `/docs/[slug]` | Doc page — full content |
+| `/tags` | Tags index — all tags with post counts |
+| `/tags/[tag]` | Tag page — posts filtered by tag |
+| `/404` | Not found page |
+
+### Design system
+
+`src/styles.css` defines all tokens as CSS variables on `:root`:
+
+- **Typography**: `--font-body`, `--font-mono`, `--font-size-base`, `--font-size-sm/lg/xl`
+- **Color**: `--color-bg`, `--color-text`, `--color-muted`, `--color-border`, `--color-link`, `--color-link-hover`, `--color-link-visited`
+- **Spacing**: `--spacing-xs/sm/md/lg/xl`
+- **Sizing**: `--width-content` (680px), `--width-site` (800px), `--radius-sm`
+
+Dark mode is automatic via `@media (prefers-color-scheme: dark)` — no JavaScript toggle.
+
+## How to use
+
+Install alongside `@karaoke-cms/astro`:
+
+```bash
+npm install @karaoke-cms/astro @karaoke-cms/theme-default
+```
+
+Set `theme: '@karaoke-cms/theme-default'` (or omit — it's the default) in `karaoke.config.ts`.
+
+Your vault needs `blog/` and/or `docs/` directories with Markdown files. Only files with `publish: true` in frontmatter appear on the site.
+
+## How it changes the behavior of the system
+
+- Provides the only routes that make up the site's public pages. Without a theme, nothing is served at `/`.
+- The `@theme` alias means `Base.astro` and all pages resolve styles and components from this package at build time. Switching themes is a one-line change in `karaoke.config.ts`.
+- Does not include `/docs` routes — that differentiates it from `theme-blog`. Suitable for mixed blog + documentation sites.
+- The layout is driven by `Base.astro`'s region system — sidebar content (recent posts, search) is controlled by the `layout.regions` config in `karaoke.config.ts`, not hardcoded in the theme.

package/package.json

@@ -1,13 +1,29 @@
 {
   "name": "@karaoke-cms/theme-default",
   "type": "module",
-  "version": "0.6.2",
-  "description": "Default theme for karaoke-cms",
+  "version": "0.9.0",
+  "description": "Default theme for karaoke-cms — two-column knowledge base with blog and docs",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "files": [
+    "src/"
+  ],
   "keywords": [
     "astro",
     "cms",
-    "theme"
+    "theme",
+    "karaoke-cms"
   ],
+  "peerDependencies": {
+    "astro": ">=6.0.0",
+    "@karaoke-cms/astro": "^0.9.0"
+  },
+  "devDependencies": {
+    "astro": "^6.0.8",
+    "@karaoke-cms/astro": "0.9.0"
+  },
   "scripts": {
     "test": "echo \"Stub — no tests\""
   }

package/src/index.ts

@@ -0,0 +1,31 @@
+import type { AstroIntegration } from 'astro';
+import type { KaraokeConfig } from '@karaoke-cms/astro';
+import { fileURLToPath } from 'url';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+export default function themeDefault(_config: KaraokeConfig): AstroIntegration {
+  return {
+    name: '@karaoke-cms/theme-default',
+    hooks: {
+      'astro:config:setup': ({ injectRoute, updateConfig }) => {
+        injectRoute({ pattern: '/',             entrypoint: `${__dirname}pages/index.astro` });
+        injectRoute({ pattern: '/blog',         entrypoint: `${__dirname}pages/blog/index.astro` });
+        injectRoute({ pattern: '/blog/[slug]',  entrypoint: `${__dirname}pages/blog/[slug].astro` });
+        injectRoute({ pattern: '/docs',         entrypoint: `${__dirname}pages/docs/index.astro` });
+        injectRoute({ pattern: '/docs/[slug]',  entrypoint: `${__dirname}pages/docs/[slug].astro` });
+        injectRoute({ pattern: '/tags',         entrypoint: `${__dirname}pages/tags/index.astro` });
+        injectRoute({ pattern: '/tags/[tag]',   entrypoint: `${__dirname}pages/tags/[tag].astro` });
+        injectRoute({ pattern: '/404',          entrypoint: `${__dirname}pages/404.astro` });
+
+        updateConfig({
+          vite: {
+            resolve: {
+              alias: { '@theme': `${__dirname}` },
+            },
+          },
+        });
+      },
+    },
+  };
+}

package/src/pages/404.astro

@@ -0,0 +1,14 @@
+---
+import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import { siteTitle } from 'virtual:karaoke-cms/config';
+---
+
+<Base title={`Page not found — ${siteTitle}`}>
+  <div class="post-header">
+    <h1>Page not found</h1>
+    <p class="post-meta">The page you're looking for doesn't exist or hasn't been published.</p>
+  </div>
+  <div class="prose">
+    <p><a href="/">Go home →</a></p>
+  </div>
+</Base>

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

@@ -0,0 +1,66 @@
+---
+import { getCollection, render } from 'astro:content';
+import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import ModuleLoader from '@karaoke-cms/astro/components/ModuleLoader.astro';
+import { siteTitle } from 'virtual:karaoke-cms/config';
+
+export async function getStaticPaths() {
+  const posts = await getCollection('blog', ({ data }) => data.publish === true);
+  return posts.map(entry => ({
+    params: { slug: entry.id },
+    props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await render(entry);
+
+// Resolve related entries by ID across both collections
+const relatedIds = entry.data.related ?? [];
+const related = relatedIds.length > 0
+  ? (await Promise.all([
+      getCollection('blog', ({ data }) => data.publish === true),
+      getCollection('docs', ({ data }) => data.publish === true),
+    ]))
+    .flat()
+    .filter(e => relatedIds.includes(e.id))
+  : [];
+---
+
+<Base title={`${entry.data.title} — ${siteTitle}`} description={entry.data.description} type="article">
+  <article>
+    <div class="post-header">
+      <h1>{entry.data.title}</h1>
+      <div class="post-meta">
+        {entry.data.date && <span>{entry.data.date.toISOString().slice(0, 10)}</span>}
+        {entry.data.author && entry.data.date && <span> · </span>}
+        {entry.data.author && (
+          <span>{Array.isArray(entry.data.author) ? entry.data.author.join(' · ') : entry.data.author}</span>
+        )}
+        {entry.data.reading_time && <span> · {entry.data.reading_time} min read</span>}
+      </div>
+    </div>
+    <div class="prose">
+      <Content />
+    </div>
+    <div class="post-footer">
+      {entry.data.tags && entry.data.tags.length > 0 && (
+        <div class="post-tags">
+          {entry.data.tags.map(tag => <a href={`/tags/${tag}`} class="tag">#{tag}</a>)}
+        </div>
+      )}
+      {related.length > 0 && (
+        <div class="related-posts">
+          <p class="related-label">Related</p>
+          <ul>
+            {related.map(r => (
+              <li><a href={`/${r.collection}/${r.id}`}>{r.data.title}</a></li>
+            ))}
+          </ul>
+        </div>
+      )}
+      <a href="/blog">← Blog</a>
+    </div>
+  </article>
+  <ModuleLoader comments={entry.data.comments} />
+</Base>

package/src/pages/blog/index.astro

@@ -0,0 +1,31 @@
+---
+import { getCollection } from 'astro:content';
+import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import { siteTitle } from 'virtual:karaoke-cms/config';
+
+const posts = (await getCollection('blog', ({ data }) => data.publish === true))
+  .sort((a, b) => (b.data.date?.valueOf() ?? 0) - (a.data.date?.valueOf() ?? 0));
+---
+
+<Base title={`Blog — ${siteTitle}`}>
+  <div class="listing-header">
+    <h1>Blog</h1>
+  </div>
+  {posts.length > 0 ? (
+    <ul class="post-list">
+      {posts.map(post => (
+        <li>
+          {post.data.date && (
+            <span class="post-date">{post.data.date.toISOString().slice(0, 10)}</span>
+          )}
+          <a href={`/blog/${post.id}`}>{post.data.title}</a>
+        </li>
+      ))}
+    </ul>
+  ) : (
+    <div class="empty-state">
+      <p>No posts published yet.</p>
+      <p>Create a Markdown file in your vault's <code>blog/</code> folder and set <code>publish: true</code> in the frontmatter to make it appear here.</p>
+    </div>
+  )}
+</Base>

package/src/pages/docs/[slug].astro

@@ -0,0 +1,66 @@
+---
+import { getCollection, render } from 'astro:content';
+import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import ModuleLoader from '@karaoke-cms/astro/components/ModuleLoader.astro';
+import { siteTitle } from 'virtual:karaoke-cms/config';
+
+export async function getStaticPaths() {
+  const docs = await getCollection('docs', ({ data }) => data.publish === true);
+  return docs.map(entry => ({
+    params: { slug: entry.id },
+    props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await render(entry);
+
+// Resolve related entries by ID across both collections
+const relatedIds = entry.data.related ?? [];
+const related = relatedIds.length > 0
+  ? (await Promise.all([
+      getCollection('blog', ({ data }) => data.publish === true),
+      getCollection('docs', ({ data }) => data.publish === true),
+    ]))
+    .flat()
+    .filter(e => relatedIds.includes(e.id))
+  : [];
+---
+
+<Base title={`${entry.data.title} — ${siteTitle}`} description={entry.data.description} type="article">
+  <article>
+    <div class="post-header">
+      <h1>{entry.data.title}</h1>
+      <div class="post-meta">
+        {entry.data.date && <span>{entry.data.date.toISOString().slice(0, 10)}</span>}
+        {entry.data.author && entry.data.date && <span> · </span>}
+        {entry.data.author && (
+          <span>{Array.isArray(entry.data.author) ? entry.data.author.join(' · ') : entry.data.author}</span>
+        )}
+        {entry.data.reading_time && <span> · {entry.data.reading_time} min read</span>}
+      </div>
+    </div>
+    <div class="prose">
+      <Content />
+    </div>
+    <div class="post-footer">
+      {entry.data.tags && entry.data.tags.length > 0 && (
+        <div class="post-tags">
+          {entry.data.tags.map(tag => <a href={`/tags/${tag}`} class="tag">#{tag}</a>)}
+        </div>
+      )}
+      {related.length > 0 && (
+        <div class="related-posts">
+          <p class="related-label">Related</p>
+          <ul>
+            {related.map(r => (
+              <li><a href={`/${r.collection}/${r.id}`}>{r.data.title}</a></li>
+            ))}
+          </ul>
+        </div>
+      )}
+      <a href="/docs">← Docs</a>
+    </div>
+  </article>
+  <ModuleLoader comments={entry.data.comments} />
+</Base>

package/src/pages/docs/index.astro

@@ -0,0 +1,31 @@
+---
+import { getCollection } from 'astro:content';
+import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import { siteTitle } from 'virtual:karaoke-cms/config';
+
+const docs = (await getCollection('docs', ({ data }) => data.publish === true))
+  .sort((a, b) => a.data.title.localeCompare(b.data.title));
+---
+
+<Base title={`Docs — ${siteTitle}`}>
+  <div class="listing-header">
+    <h1>Docs</h1>
+  </div>
+  {docs.length > 0 ? (
+    <ul class="post-list">
+      {docs.map(doc => (
+        <li>
+          {doc.data.date && (
+            <span class="post-date">{doc.data.date.toISOString().slice(0, 10)}</span>
+          )}
+          <a href={`/docs/${doc.id}`}>{doc.data.title}</a>
+        </li>
+      ))}
+    </ul>
+  ) : (
+    <div class="empty-state">
+      <p>No docs published yet.</p>
+      <p>Create a Markdown file in your vault's <code>docs/</code> folder and set <code>publish: true</code> in the frontmatter to make it appear here.</p>
+    </div>
+  )}
+</Base>

package/src/pages/index.astro

@@ -0,0 +1,65 @@
+---
+import { getCollection } from 'astro:content';
+import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import { siteTitle, siteDescription } from 'virtual:karaoke-cms/config';
+
+const posts = (await getCollection('blog', ({ data }) => data.publish === true))
+  .sort((a, b) => (b.data.date?.valueOf() ?? 0) - (a.data.date?.valueOf() ?? 0))
+  .slice(0, 5);
+
+const docs = (await getCollection('docs', ({ data }) => data.publish === true))
+  .sort((a, b) => a.data.title.localeCompare(b.data.title))
+  .slice(0, 5);
+---
+
+<Base title={siteTitle} description={siteDescription}>
+  <div class="home-grid">
+    <section class="home-section">
+      <h2>Blog</h2>
+      {posts.length > 0 ? (
+        <>
+          <ul class="post-list">
+            {posts.map(post => (
+              <li>
+                <a href={`/blog/${post.id}`}>{post.data.title}</a>
+                {post.data.date && (
+                  <span class="post-date">{post.data.date.toISOString().slice(0, 10)}</span>
+                )}
+              </li>
+            ))}
+          </ul>
+          <a href="/blog" class="view-all">View all →</a>
+        </>
+      ) : (
+        <div class="empty-state">
+          <p>No posts yet.</p>
+          <p>Add a Markdown file to <code>blog/</code> with <code>publish: true</code> in the frontmatter.</p>
+        </div>
+      )}
+    </section>
+
+    <section class="home-section">
+      <h2>Docs</h2>
+      {docs.length > 0 ? (
+        <>
+          <ul class="post-list">
+            {docs.map(doc => (
+              <li>
+                <a href={`/docs/${doc.id}`}>{doc.data.title}</a>
+                {doc.data.date && (
+                  <span class="post-date">{doc.data.date.toISOString().slice(0, 10)}</span>
+                )}
+              </li>
+            ))}
+          </ul>
+          <a href="/docs" class="view-all">View all →</a>
+        </>
+      ) : (
+        <div class="empty-state">
+          <p>No docs yet.</p>
+          <p>Add a Markdown file to <code>docs/</code> with <code>publish: true</code> in the frontmatter.</p>
+        </div>
+      )}
+    </section>
+  </div>
+</Base>

package/src/pages/tags/[tag].astro

@@ -0,0 +1,53 @@
+---
+import { getCollection } from 'astro:content';
+import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import { siteTitle } from 'virtual:karaoke-cms/config';
+
+export async function getStaticPaths() {
+  const [blog, docs] = await Promise.all([
+    getCollection('blog', ({ data }) => data.publish === true),
+    getCollection('docs', ({ data }) => data.publish === true),
+  ]);
+
+  // Collect all unique tags
+  const tags = new Set<string>();
+  for (const entry of [...blog, ...docs]) {
+    for (const tag of entry.data.tags ?? []) tags.add(tag);
+  }
+
+  return [...tags].map(tag => ({
+    params: { tag },
+    props: {
+      tag,
+      entries: [...blog, ...docs]
+        .filter(e => e.data.tags?.includes(tag))
+        .sort((a, b) => (b.data.date?.valueOf() ?? 0) - (a.data.date?.valueOf() ?? 0)),
+    },
+  }));
+}
+
+const { tag, entries } = Astro.props;
+
+// Determine the URL prefix for each entry by its collection
+function href(entry: { collection: string; id: string }) {
+  return `/${entry.collection}/${entry.id}`;
+}
+---
+
+<Base title={`#${tag} — ${siteTitle}`}>
+  <div class="listing-header">
+    <h1>#{tag}</h1>
+    <p><a href="/tags">← All tags</a></p>
+  </div>
+  <ul class="post-list">
+    {entries.map(entry => (
+      <li>
+        {entry.data.date && (
+          <span class="post-date">{entry.data.date.toISOString().slice(0, 10)}</span>
+        )}
+        <a href={href(entry)}>{entry.data.title}</a>
+        <span class="post-collection">{entry.collection}</span>
+      </li>
+    ))}
+  </ul>
+</Base>

package/src/pages/tags/index.astro

@@ -0,0 +1,41 @@
+---
+import { getCollection } from 'astro:content';
+import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import { siteTitle } from 'virtual:karaoke-cms/config';
+
+const [blog, docs] = await Promise.all([
+  getCollection('blog', ({ data }) => data.publish === true),
+  getCollection('docs', ({ data }) => data.publish === true),
+]);
+
+// Count occurrences of each tag across both collections
+const counts = new Map<string, number>();
+for (const entry of [...blog, ...docs]) {
+  for (const tag of entry.data.tags ?? []) {
+    counts.set(tag, (counts.get(tag) ?? 0) + 1);
+  }
+}
+
+const tags = [...counts.entries()].sort((a, b) => a[0].localeCompare(b[0]));
+---
+
+<Base title={`Tags — ${siteTitle}`}>
+  <div class="listing-header">
+    <h1>Tags</h1>
+  </div>
+  {tags.length > 0 ? (
+    <ul class="tag-list">
+      {tags.map(([tag, count]) => (
+        <li>
+          <a href={`/tags/${tag}`}>{tag}</a>
+          <span class="tag-count">{count}</span>
+        </li>
+      ))}
+    </ul>
+  ) : (
+    <div class="empty-state">
+      <p>No tags yet.</p>
+      <p>Tags are added to posts via the <code>tags</code> frontmatter field or by AI enrichment.</p>
+    </div>
+  )}
+</Base>

package/src/styles.css

@@ -0,0 +1,533 @@
+/* @karaoke-cms/theme-default — system UI, clean two-column layout */
+
+:root {
+  --font-body: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
+
+  --font-size-base: 1.0625rem;
+  --font-size-sm:   0.875rem;
+  --font-size-lg:   1.25rem;
+  --font-size-xl:   1.875rem;
+
+  --line-height-body:    1.7;
+  --line-height-heading: 1.2;
+
+  --color-bg:           #fafaf9;
+  --color-text:         #1a1a1a;
+  --color-muted:        #737373;
+  --color-border:       #e5e5e5;
+  --color-link:         #0066cc;
+  --color-link-hover:   #004499;
+  --color-link-visited: #551a8b;
+
+  --width-content: 680px;
+  --width-site:    800px;
+
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 2rem;
+  --spacing-xl: 4rem;
+
+  --radius-sm: 4px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg:           #0f0f0f;
+    --color-text:         #e5e5e5;
+    --color-muted:        #9ca3af;
+    --color-border:       #262626;
+    --color-link:         #60a5fa;
+    --color-link-hover:   #93c5fd;
+    --color-link-visited: #a78bfa;
+  }
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: var(--font-size-base);
+}
+
+body {
+  margin: 0;
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: var(--font-body);
+  line-height: var(--line-height-body);
+}
+
+/* --- Header --- */
+
+header {
+  border-bottom: 2px solid var(--color-border);
+  margin-bottom: var(--spacing-xl);
+}
+
+.header-inner {
+  max-width: var(--width-site);
+  margin: 0 auto;
+  padding: 0 var(--spacing-md);
+  display: flex;
+  align-items: center;
+  height: 3.25rem;
+  gap: var(--spacing-md);
+}
+
+.site-name {
+  font-weight: 700;
+  font-size: 1rem;
+  text-decoration: none;
+  color: var(--color-text);
+  flex-shrink: 0;
+  letter-spacing: -0.01em;
+}
+
+.site-name:hover {
+  color: var(--color-link);
+}
+
+header nav {
+  margin-left: auto;
+}
+
+header nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: var(--spacing-md);
+}
+
+header nav ul a {
+  text-decoration: none;
+  color: var(--color-muted);
+  font-size: var(--font-size-sm);
+  padding: var(--spacing-xs) 0;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  transition: color 0.1s;
+}
+
+header nav ul a:hover,
+header nav ul a[aria-current="page"] {
+  color: var(--color-text);
+}
+
+/* --- Page body (left + main + right regions) --- */
+
+.page-body {
+  display: flex;
+  align-items: flex-start;
+  max-width: var(--width-site);
+  margin: 0 auto;
+  padding: 0 var(--spacing-md);
+  min-height: calc(100vh - 14rem);
+  gap: var(--spacing-lg);
+}
+
+.page-body.has-left,
+.page-body.has-right {
+  max-width: calc(var(--width-site) + var(--width-sidebar, 220px) + var(--spacing-lg));
+}
+
+.page-body.has-left.has-right {
+  max-width: calc(var(--width-site) + 2 * (var(--width-sidebar, 220px) + var(--spacing-lg)));
+}
+
+main {
+  flex: 1;
+  min-width: 0;
+}
+
+.region-left,
+.region-right {
+  width: var(--width-sidebar, 220px);
+  flex-shrink: 0;
+  padding-top: var(--spacing-xs);
+}
+
+/* --- Sidebar --- */
+
+.sidebar-section {
+  margin-bottom: var(--spacing-lg);
+}
+
+.sidebar-heading {
+  font-size: var(--font-size-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-muted);
+  font-weight: 600;
+  margin: 0 0 var(--spacing-sm);
+}
+
+.sidebar-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.sidebar-list li {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sidebar-list a {
+  font-size: var(--font-size-sm);
+  text-decoration: none;
+  color: var(--color-text);
+}
+
+.sidebar-list a:hover {
+  color: var(--color-link);
+}
+
+/* --- Footer --- */
+
+footer {
+  border-top: 1px solid var(--color-border);
+  margin-top: var(--spacing-xl);
+}
+
+.footer-inner {
+  max-width: var(--width-site);
+  margin: 0 auto;
+  padding: var(--spacing-lg) var(--spacing-md);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  color: var(--color-muted);
+  font-size: var(--font-size-sm);
+}
+
+.footer-attr {
+  margin-left: auto;
+}
+
+footer a {
+  color: var(--color-muted);
+  text-decoration: none;
+}
+
+footer a:hover {
+  color: var(--color-link);
+}
+
+/* --- Typography --- */
+
+h1, h2, h3, h4 {
+  line-height: var(--line-height-heading);
+  font-weight: 700;
+  margin-top: 0;
+}
+
+h1 { font-size: var(--font-size-xl); }
+h2 { font-size: var(--font-size-lg); }
+
+a {
+  color: var(--color-link);
+}
+
+a:hover {
+  color: var(--color-link-hover);
+}
+
+a:visited {
+  color: var(--color-link-visited);
+}
+
+code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  background: var(--color-border);
+  padding: 0.15em 0.35em;
+  border-radius: 3px;
+}
+
+pre {
+  background: var(--color-border);
+  padding: var(--spacing-md);
+  overflow-x: auto;
+  border-radius: 6px;
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+/* --- Post/doc prose --- */
+
+.prose {
+  max-width: var(--width-content);
+}
+
+.prose img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+}
+
+.prose p {
+  margin-top: 0;
+  margin-bottom: var(--spacing-md);
+}
+
+/* --- Listing pages --- */
+
+.listing-header {
+  margin-bottom: var(--spacing-lg);
+}
+
+.listing-header h1 {
+  font-size: var(--font-size-xl);
+  margin-bottom: 0;
+}
+
+.post-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.post-list li {
+  padding: var(--spacing-sm) 0;
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  gap: var(--spacing-md);
+  align-items: baseline;
+}
+
+.post-list li:first-child {
+  border-top: 1px solid var(--color-border);
+}
+
+.post-date {
+  color: var(--color-muted);
+  font-size: var(--font-size-sm);
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.empty-state {
+  color: var(--color-muted);
+  padding: var(--spacing-lg) 0;
+}
+
+.empty-state p {
+  margin: 0 0 var(--spacing-sm);
+}
+
+/* --- Homepage two-column --- */
+
+.home-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-xl);
+}
+
+.home-section h2 {
+  font-size: var(--font-size-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: 600;
+  color: var(--color-muted);
+  margin-bottom: var(--spacing-md);
+}
+
+.home-section .post-list li {
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.view-all {
+  display: inline-block;
+  margin-top: var(--spacing-md);
+  font-size: var(--font-size-sm);
+  color: var(--color-muted);
+  text-decoration: none;
+}
+
+.view-all:hover {
+  color: var(--color-link);
+}
+
+@media (max-width: 640px) {
+  .home-grid {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-lg);
+  }
+
+  .page-body {
+    flex-direction: column;
+  }
+
+  .region-left,
+  .region-right {
+    width: 100%;
+  }
+
+  .footer-inner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+  }
+
+  .footer-attr {
+    margin-left: 0;
+  }
+}
+
+/* --- Single post/doc --- */
+
+.post-header {
+  max-width: var(--width-content);
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.post-header h1 {
+  font-size: var(--font-size-xl);
+  margin-bottom: var(--spacing-sm);
+}
+
+.post-meta {
+  color: var(--color-muted);
+  font-size: var(--font-size-sm);
+}
+
+.post-footer {
+  margin-top: var(--spacing-xl);
+  padding-top: var(--spacing-md);
+  border-top: 1px solid var(--color-border);
+  max-width: var(--width-content);
+}
+
+.post-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+  margin-bottom: var(--spacing-md);
+}
+
+.tag {
+  font-size: var(--font-size-sm);
+  color: var(--color-muted);
+  text-decoration: none;
+  border: 1px solid var(--color-border);
+  border-radius: 3px;
+  padding: 2px 8px;
+  transition: color 0.1s, border-color 0.1s;
+}
+
+.tag:hover {
+  color: var(--color-text);
+  border-color: var(--color-text);
+}
+
+.tag-list {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.tag-list li {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.tag-count {
+  font-size: var(--font-size-sm);
+  color: var(--color-muted);
+}
+
+.post-collection {
+  font-size: var(--font-size-sm);
+  color: var(--color-muted);
+}
+
+/* --- Related posts --- */
+
+.related-posts {
+  margin-top: var(--spacing-lg);
+}
+
+.related-label {
+  font-size: var(--font-size-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: 600;
+  color: var(--color-muted);
+  margin: 0 0 var(--spacing-sm);
+}
+
+.related-posts ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+/* ── karaoke-menu ─────────────────────────────────────────────────────────── */
+
+nav.karaoke-menu ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* Horizontal — flex row, CSS-only dropdown submenus */
+nav.karaoke-menu[data-orientation="horizontal"] > ul {
+  display: flex;
+  gap: var(--spacing-md, 1rem);
+}
+
+nav.karaoke-menu[data-orientation="horizontal"] li {
+  position: relative;
+}
+
+nav.karaoke-menu[data-orientation="horizontal"] li ul {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 10rem;
+  flex-direction: column;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm, 4px);
+  z-index: 100;
+}
+
+nav.karaoke-menu[data-orientation="horizontal"] li:hover ul,
+nav.karaoke-menu[data-orientation="horizontal"] li:focus-within ul {
+  display: flex;
+}
+
+/* Vertical — flex column, submenus always visible and indented */
+nav.karaoke-menu[data-orientation="vertical"] > ul {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs, 0.25rem);
+}
+
+nav.karaoke-menu[data-orientation="vertical"] li ul {
+  padding-left: var(--spacing-md, 1rem);
+}