style(mermaid): add dark theme styling with transparent backgrounds

Override mermaid's default white backgrounds to blend with dark theme:
- Transparent SVG background
- Node fills use --bg-sidebar
- Labels use --fg color
- Edges use --fg-muted

README.md

@@ -8,6 +8,14 @@
 
 sukr transforms Markdown content into high-performance static HTML. No bloated runtimes, no client-side JavaScript, just clean output.
 
+## Why sukr?
+
+Most static site generators punt rich content to the browser. sukr doesn't.
+
+- **Tree-sitter syntax highlighting** — Proper parsing, not regex. Supports language injection (Nix shells, HTML scripts).
+- **Build-time math** — KaTeX renders LaTeX to static HTML. No 300KB JavaScript bundle.
+- **Build-time diagrams** — Mermaid compiles to inline SVG. Diagrams load instantly.
+
 ## Features
 
 - **Syntax highlighting** — Tree-sitter with language injection (Nix→Bash, HTML→JS/CSS)
@@ -56,7 +64,7 @@ toc    = false  # Enable table of contents
 ## Content Structure
 
 ```
-docs/
+content/
 ├── _index.md              # Homepage
 ├── getting-started.md     # Page → /getting-started.html
 ├── configuration.md       # Page → /configuration.html

docs/content/_index.md

@@ -9,10 +9,13 @@ description: Minimal static site compiler — suckless, Rust, zero JS
 
 ## Why sukr?
 
-- **Fast builds** — Single Rust binary, parallel processing
+Most static site generators punt rich content to the browser. sukr doesn't.
-- **Zero JS** — Syntax highlighting at build time via Tree-sitter
+
-- **Flexible templates** — Runtime Tera templates, no recompilation
+- **Tree-sitter highlighting** — Proper parsing, not regex. Supports language injection (Nix→Bash, HTML→JS/CSS).
-- **Monorepo-ready** — Multiple sites via `-c` config flag
+- **Build-time math** — KaTeX renders LaTeX to static HTML. No 300KB JavaScript bundle.
+- **Build-time diagrams** — Mermaid compiles to inline SVG. Diagrams load instantly.
+- **Flexible templates** — Runtime Tera templates, no recompilation needed.
+- **Monorepo-ready** — Multiple sites via `-c` config flag.
 
 ## Quick Start
 

docs/static/style.css

@@ -268,6 +268,11 @@ a:hover {
   overflow-x: auto;
 }
 
+/* Hide katex-html (requires CDN fonts), use native MathML rendering instead */
+.katex-html {
+  display: none;
+}
+
 /* Fallback: constrain radical SVG when CDN blocked */
 .hide-tail svg {
   max-width: 100% !important;
@@ -419,6 +424,49 @@ pre code {
   color: #bd93f9;
 }
 
+/* Mermaid diagrams */
+.mermaid-diagram {
+  margin: 1.5rem 0;
+}
+
+.mermaid-diagram svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+/* Hide mermaid's baked-in white background rect */
+.mermaid-diagram svg > rect:first-child {
+  fill: transparent !important;
+}
+
+/* Override mermaid's default white backgrounds */
+.mermaid-diagram .cluster rect,
+.mermaid-diagram .node rect,
+.mermaid-diagram .node circle,
+.mermaid-diagram .node ellipse,
+.mermaid-diagram .node polygon {
+  fill: var(--bg-sidebar) !important;
+  stroke: var(--border) !important;
+}
+
+.mermaid-diagram .edgeLabel {
+  background-color: var(--bg) !important;
+  color: var(--fg) !important;
+}
+
+.mermaid-diagram .label {
+  color: var(--fg) !important;
+}
+
+.mermaid-diagram .edgePath path {
+  stroke: var(--fg-muted) !important;
+}
+
+.mermaid-diagram .arrowheadPath {
+  fill: var(--fg-muted) !important;
+}
+
 /* Section navigation */
 .section-nav {
   display: flex;