From 268ffcdd278a3d9cff3bcd952a2010f74da0c624 Mon Sep 17 00:00:00 2001
From: luxick <git@luxick.de>
Date: Fri, 17 Apr 2026 10:54:06 +0200
Subject: [PATCH] WIP Redesign

---
 CLAUDE.md                     |  16 +-
 assets.go                     |  52 ++++
 assets/diary/diary-day.html   |  12 +-
 assets/diary/diary-month.html |  12 +-
 assets/diary/diary-year.html  |  12 +-
 assets/page.html              | 117 +++++----
 assets/sections.js            |   2 +-
 assets/style.css              | 433 +---------------------------------
 diary.go                      |  12 +-
 main.go                       |   9 +-
 render.go                     |   2 +-
 11 files changed, 174 insertions(+), 505 deletions(-)
 create mode 100644 assets.go

diff --git a/CLAUDE.md b/CLAUDE.md
index ba3e31c..efff3b1 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -54,8 +54,20 @@ Prefer separate, human-readable `.html` files over inlined HTML strings in Go. E
 - Do not inline JS in templates or merge unrelated features into one file
 - `ALT+SHIFT` is the modifier for all keyboard shortcuts — do not introduce others
 - Editor toolbar buttons use `data-action` + `data-key`; adding `data-key` auto-registers the shortcut
-- Prefer generic, descriptive CSS classes (`btn`, `btn-small`, `muted`, `danger`) over element-specific names (`save-button`, `cancel-button`, `form-name-input`). Use a modifier + base class pattern (`btn btn-small`) rather than one-off classes that duplicate shared styles.
-- Where possible, re-use existing CSS classes
+
+### CSS / HTML — Pico CSS
+
+[Pico CSS](https://picocss.com) is the styling framework. Strictly stay within it.
+
+- Do not add other CSS frameworks, utility libraries, or icon fonts.
+- Prefer pico's **class-less semantic HTML**: `<button>`, `<section>`, `<hgroup>`, `<header>`, `<nav><ul></ul></nav>`, `<details>`, etc. — let the element itself carry the styling.
+- Use `<section>` for thematic blocks. Do **not** use `<article>` (project convention — always reach for `<section>` instead).
+- Buttons: native `<button>` or `<a role="button">`. For variants use pico's modifiers (`.secondary`, `.contrast`, `.outline`) — do not invent new button classes. For button groups use `role="group"`.
+- Layout: wrap top-level blocks in `.container` for the centered viewport. Use pico's `.grid` when a simple responsive grid is needed.
+- Forms: rely on pico's default `<input>`/`<textarea>`/`<select>` styling; use `aria-invalid` for validation states.
+- Custom CSS belongs in `style.css` and must only cover what pico does not provide. Reference pico's CSS custom properties (`var(--pico-border-color)`, `var(--pico-muted-color)`, `var(--pico-spacing)`, `var(--pico-card-background-color)`, etc.) — never hardcode colors or spacing.
+- Prefer generic descriptive class names (`muted`, `danger`, `listing`, `diary-section`) over element-specific ones. Re-use existing classes before creating new ones.
+- `pico.min.css` is the served stylesheet; keep `pico.css` around only as the unminified reference.
 
 ## Development Priorities
 
diff --git a/assets.go b/assets.go
new file mode 100644
index 0000000..cb125da
--- /dev/null
+++ b/assets.go
@@ -0,0 +1,52 @@
+package main
+
+import (
+	"html/template"
+	"io/fs"
+	"os"
+	"sync"
+)
+
+var devMode bool
+
+// assetFS defaults to the embedded FS so package-level initializers (e.g. icon
+// vars in render.go) can read assets before main() runs. initAssets() swaps it
+// for os.DirFS when -dev is set.
+var assetFS fs.FS = assets
+
+func initAssets(dev bool) {
+	devMode = dev
+	if dev {
+		assetFS = os.DirFS(".")
+	}
+}
+
+// readAsset reads a file from the asset FS (embedded in prod, live disk in dev).
+func readAsset(path string) ([]byte, error) {
+	return fs.ReadFile(assetFS, path)
+}
+
+// tmplLoader holds a lazily-parsed template. In dev mode it re-parses on every
+// get() call so HTML changes are visible without recompiling.
+type tmplLoader struct {
+	name     string
+	patterns []string
+	once     sync.Once
+	t        *template.Template
+}
+
+// newTemplate creates a tmplLoader. name is the root template name passed to
+// template.New; patterns are the glob/path arguments forwarded to ParseFS.
+func newTemplate(name string, patterns ...string) *tmplLoader {
+	return &tmplLoader{name: name, patterns: patterns}
+}
+
+func (l *tmplLoader) get() *template.Template {
+	if devMode {
+		return template.Must(template.New(l.name).ParseFS(assetFS, l.patterns...))
+	}
+	l.once.Do(func() {
+		l.t = template.Must(template.New(l.name).ParseFS(assetFS, l.patterns...))
+	})
+	return l.t
+}
diff --git a/assets/diary/diary-day.html b/assets/diary/diary-day.html
index 834e260..d720ea4 100644
--- a/assets/diary/diary-day.html
+++ b/assets/diary/diary-day.html
@@ -1,7 +1,9 @@
 {{if .Photos}}
-<div class="diary-photo-grid">
-  {{range .Photos}}
-  <a href="{{.URL}}" target="_blank"><img src="{{.URL}}" alt="{{.Name}}" loading="lazy"></a>
-  {{end}}
-</div>
+<section class="diary-section">
+  <div class="diary-photo-grid">
+    {{range .Photos}}
+    <a href="{{.URL}}" target="_blank"><img src="{{.URL}}" alt="{{.Name}}" loading="lazy"></a>
+    {{end}}
+  </div>
+</section>
 {{end}}
diff --git a/assets/diary/diary-month.html b/assets/diary/diary-month.html
index 526d325..3fd8005 100644
--- a/assets/diary/diary-month.html
+++ b/assets/diary/diary-month.html
@@ -1,9 +1,9 @@
 {{range .Days}}
-<div class="diary-section">
-  <h2>
-    {{if .URL}}<a href="{{.URL}}">{{.Heading}}</a>{{else}}{{.Heading}}{{end}}
-    {{if .EditURL}}<a href="{{.EditURL}}" class="btn btn-small">edit</a>{{end}}
-  </h2>
+<section class="diary-section">
+  <header class="diary-section-header">
+    <h2>{{if .URL}}<a href="{{.URL}}">{{.Heading}}</a>{{else}}{{.Heading}}{{end}}</h2>
+    {{if .EditURL}}<a href="{{.EditURL}}" role="button" class="secondary outline section-edit">edit</a>{{end}}
+  </header>
   {{if .Content}}<div class="content">{{.Content}}</div>{{end}}
   {{if .Photos}}
   <div class="diary-photo-grid">
@@ -12,5 +12,5 @@
     {{end}}
   </div>
   {{end}}
-</div>
+</section>
 {{end}}
diff --git a/assets/diary/diary-year.html b/assets/diary/diary-year.html
index 8e0cc17..55e857b 100644
--- a/assets/diary/diary-year.html
+++ b/assets/diary/diary-year.html
@@ -1,8 +1,8 @@
 {{range .Months}}
-<div class="diary-section">
-  <h2 class="diary-heading">
-    <a href="{{.URL}}">{{.Name}}</a>
-    {{if .PhotoCount}}<span class="diary-photo-count">({{.PhotoCount}} photos)</span>{{end}}
-  </h2>
-</div>
+<section class="diary-section">
+  <hgroup>
+    <h2><a href="{{.URL}}">{{.Name}}</a></h2>
+    {{if .PhotoCount}}<p>{{.PhotoCount}} photos</p>{{end}}
+  </hgroup>
+</section>
 {{end}}
diff --git a/assets/page.html b/assets/page.html
index 0da172f..17a6999 100644
--- a/assets/page.html
+++ b/assets/page.html
@@ -5,47 +5,67 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>{{.Title}}</title>
         <link rel="icon" href="/_/favicon.ico" />
+        <link rel="stylesheet" href="/_/pico.min.css" />
         <link rel="stylesheet" href="/_/style.css" />
         <script src="/_/global-shortcuts.js"></script>
     </head>
     <body>
         <header>
-            <nav class="breadcrumb">
-                <a href="/"><svg class="logo" viewBox="0 0 26.052269 26.052269" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-linejoin="miter" transform="matrix(0.05463483,8.1519706e-6,-8.1519706e-6,0.05463483,-64.560546,-24.6949)"><rect x="1188.537" y="457.92056" width="461.87488" height="462.15189" stroke-width="20.2288"/><path d="m1348.9955 456.59572.046 309.36839" stroke-width="19.6849"/><path d="m1200.3996 765.80237 441.8362-.0659" stroke-width="19.6849"/><path d="m1648.2897 620.244-299.2012.0446" stroke-width="20.5676"/><path d="m1491.6148 909.24806-.021-136.93117" stroke-width="19.6849"/><rect x="1191.6504" y="461.66092" width="457.09634" height="457.09634" stroke-width="19.6761"/></g></svg></a>
-                {{range .Crumbs}}<span class="sep">/</span
-                ><a href="{{.URL}}">{{.Name}}</a>{{end}}
-            </nav>
-            {{if .EditMode}}
-            <a class="btn" href="{{.PostURL}}">CANCEL</a>
-            <button class="btn" type="submit" form="edit-form" data-action="save" data-key="S" title="Save (S)">SAVE</button>
-            {{else if .CanEdit}}
-            <button class="btn" onclick="newPage()" title="New page (N)">NEW</button>
-            <a class="btn" href="?edit" title="Edit page (E)">EDIT</a>
-            {{end}}
+            <div class="container-fluid">
+                <nav>
+                    <nav aria-label="breadcrumb">
+                        <ul>
+                            <li>
+                                <a href="/"><svg style="height: 1rem; width: 1rem; vertical-align: center;" viewBox="0 0 26.052269 26.052269" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-linejoin="miter" transform="matrix(0.05463483,8.1519706e-6,-8.1519706e-6,0.05463483,-64.560546,-24.6949)"><rect x="1188.537" y="457.92056" width="461.87488" height="462.15189" stroke-width="20.2288"/><path d="m1348.9955 456.59572.046 309.36839" stroke-width="19.6849"/><path d="m1200.3996 765.80237 441.8362-.0659" stroke-width="19.6849"/><path d="m1648.2897 620.244-299.2012.0446" stroke-width="20.5676"/><path d="m1491.6148 909.24806-.021-136.93117" stroke-width="19.6849"/><rect x="1191.6504" y="461.66092" width="457.09634" height="457.09634" stroke-width="19.6761"/></g></svg></a>
+                            </li>
+                            {{range .Crumbs}}
+                            <li><a href="{{.URL}}">{{.Name}}</a></li>
+                            {{end}}
+                        </ul>
+                    </nav>
+
+                    <ul>
+                        {{if .EditMode}}
+                        <li><a href="{{.PostURL}}" class="secondary">Cancel</a></li>
+                        <li><a href="#" onclick="document.getElementById('edit-form').submit()" data-action="save" data-key="S" title="Save (S)">Save</a></li>
+                        {{else if .CanEdit}}
+                        <li><a href="#" onclick="newPage()" class="secondary" title="New page (N)">New</a></li>
+                        <li><a href="?edit" title="Edit page (E)">Edit</a></li>
+                        {{end}}
+                    </ul>
+                </nav>
+
+            </div>
         </header>
-        <main>
+        <main class="container">
             {{if .EditMode}}
             <form id="edit-form" class="edit-form" method="POST" action="{{.PostURL}}">
                 {{if ge .SectionIndex 0}}<input type="hidden" name="section" value="{{.SectionIndex}}">{{end}}
                 <div class="editor-toolbar">
-                    <button type="button" class="btn btn-tool" data-action="bold"      data-key="B" title="Bold (B)">**</button>
-                    <button type="button" class="btn btn-tool" data-action="italic"    data-key="I" title="Italic (I)">*</button>
-                    <span class="toolbar-sep"></span>
-                    <button type="button" class="btn btn-tool" data-action="h1"        data-key="1" title="Heading 1 (1)">#</button>
-                    <button type="button" class="btn btn-tool" data-action="h2"        data-key="2" title="Heading 2 (2)">##</button>
-                    <button type="button" class="btn btn-tool" data-action="h3"        data-key="3" title="Heading 3 (3)">###</button>
-                    <span class="toolbar-sep"></span>
-                    <button type="button" class="btn btn-tool" data-action="code"      data-key="C" title="Inline code (C)">`</button>
-                    <button type="button" class="btn btn-tool" data-action="codeblock" data-key="K" title="Code block (K)">```</button>
-                    <span class="toolbar-sep"></span>
-                    <button type="button" class="btn btn-tool" data-action="link"      data-key="L" title="Link (L)">[]</button>
-                    <button type="button" class="btn btn-tool" data-action="quote"     data-key="Q" title="Blockquote (Q)">&gt;</button>
-                    <button type="button" class="btn btn-tool" data-action="ul"        data-key="U" title="Unordered list (U)">-</button>
-                    <button type="button" class="btn btn-tool" data-action="ol"        data-key="O" title="Ordered list (O)">1.</button>
-                    <button type="button" class="btn btn-tool" data-action="hr"        data-key="R" title="Horizontal rule (R)">---</button>
-                    <span class="toolbar-sep"></span>
-                    <button type="button" class="btn btn-tool toolbar-dropdown" data-action="tbldrop" title="Table (T)">T▾</button>
-                    <button type="button" class="btn btn-tool toolbar-dropdown" data-action="datedrop" title="Insert date (D/W)">D▾</button>
+                    <div role="group">
+                        <button type="button" data-action="bold"      data-key="B" title="Bold (B)">B</button>
+                        <button type="button" data-action="italic"    data-key="I" title="Italic (I)"><i>I</i></button>
+                    </div>
+                    <div role="group">
+                        <button type="button" data-action="h1"        data-key="1" title="Heading 1 (1)">H1</button>
+                        <button type="button" data-action="h2"        data-key="2" title="Heading 2 (2)">H2</button>
+                        <button type="button" data-action="h3"        data-key="3" title="Heading 3 (3)">H3</button>
+                    </div>
+                    <div role="group">
+                        <button type="button" data-action="code"      data-key="C" title="Inline code (C)">`</button>
+                        <button type="button" data-action="codeblock" data-key="K" title="Code block (K)">```</button>
+                    </div>
+                    <div role="group">
+                        <button type="button" data-action="link"      data-key="L" title="Link (L)">[ ]</button>
+                        <button type="button" data-action="quote"     data-key="Q" title="Blockquote (Q)">&gt;</button>
+                        <button type="button" data-action="ul"        data-key="U" title="Unordered list (U)">&bull;</button>
+                        <button type="button" data-action="ol"        data-key="O" title="Ordered list (O)">1.</button>
+                        <button type="button" data-action="hr"        data-key="R" title="Horizontal rule (R)">―</button>
+                    </div>
+                    <div role="group">
+                        <button type="button" class="toolbar-dropdown" data-action="tbldrop" title="Table (T)">T&#9662;</button>
+                        <button type="button" class="toolbar-dropdown" data-action="datedrop" title="Insert date (D/W)">D&#9662;</button>
+                    </div>
                 </div>
                 <textarea name="content" id="editor" autofocus>{{.RawContent}}</textarea>
             </form>
@@ -55,7 +75,7 @@
             <script src="/_/editor.js"></script>
             {{else}}
             {{if .Content}}
-            <div class="content">{{.Content}}</div>
+            <section class="content">{{.Content}}</section>
             {{end}}
             {{if .SpecialContent}}
             <div class="diary">{{.SpecialContent}}</div>
@@ -67,19 +87,30 @@
             <script src="/_/sections.js"></script>
             {{end}}
             {{if .Entries}}
-            <div class="listing">
-                <div class="listing-header">Contents</div>
-                {{range .Entries}}
-                <div class="listing-item">
-                    <span class="icon">{{.Icon}}</span>
-                    <a href="{{.URL}}">{{.Name}}</a>
-                    <span class="meta">{{.Meta}}</span>
-                </div>
-                {{end}}
-            </div>
+            <section class="listing">
+                <header>Contents</header>
+                <table>
+                    <thead>
+                        <tr>
+                          <th scope="col"></th>
+                          <th scope="col">Name</th>
+                          <th scope="col"></th>
+                        </tr>
+                      </thead>
+                    <tbody>
+                        {{range .Entries}}
+                        <tr>
+                            <td>{{.Icon}}</td>
+                            <td><a href="{{.URL}}">{{.Name}}</a></td>
+                            <td>{{.Meta}}</td>
+                        </tr>
+                        {{end}}
+                    </tbody>
+                </table>
+            </section>
             {{else if not .Content}}
             {{if not .SpecialContent}}
-            <p class="empty">Empty folder — <a href="?edit">[CREATE]</a></p>
+            <p class="empty">Empty folder — <a href="?edit">create</a></p>
             {{end}}
             {{end}}
             {{end}}
diff --git a/assets/sections.js b/assets/sections.js
index 10382e2..3a5b34d 100644
--- a/assets/sections.js
+++ b/assets/sections.js
@@ -9,7 +9,7 @@
     headings.forEach(function (h, i) {
         var a = document.createElement('a');
         a.href = '?edit&section=' + (i + 1);
-        a.className = 'btn btn-small section-edit';
+        a.className = 'secondary';
         a.textContent = 'edit';
         h.appendChild(a);
     });
diff --git a/assets/style.css b/assets/style.css
index f673aa4..b723fc3 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,432 +1 @@
-/* === CRT Base === */
-body {
-    background-color: black;
-    background-image: radial-gradient(rgba(0, 150, 0, 0.75), black 120%);
-    background-attachment: fixed;
-    background-size: cover;
-    background-repeat: no-repeat;
-    min-height: 100vh;
-    margin: 0;
-    overflow: auto;
-    padding: 0;
-    color: white;
-    font:
-        1rem Inconsolata,
-        monospace;
-    text-shadow: 0 0 5px #c8c8c8;
-}
-
-body::after {
-    content: "";
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: repeating-linear-gradient(
-        0deg,
-        rgba(0, 0, 0, 0.15),
-        rgba(0, 0, 0, 0.15) 1px,
-        transparent 1px,
-        transparent 2px
-    );
-    pointer-events: none;
-    z-index: 9999;
-}
-
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-
-::selection {
-    background: #0080ff;
-    text-shadow: none;
-}
-
-/* === Links === */
-a {
-    color: #ffb300;
-    text-decoration: none;
-}
-a:hover {
-    color: #ffd54f;
-}
-
-/* === Header === */
-header {
-    padding: 0.75rem 1rem;
-    border-bottom: 1px dashed #0a0;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-}
-
-.breadcrumb {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    flex-wrap: wrap;
-    flex: 1;
-}
-
-.logo {
-    width: 1.1em;
-    height: 1.1em;
-    vertical-align: center;
-}
-
-.sep {
-    color: #060;
-}
-
-.btn {
-    background: none;
-    border: none;
-    color: #ffb300;
-    font: inherit;
-    cursor: pointer;
-    padding: 0;
-    text-decoration: none;
-    display: inline-block;
-    white-space: nowrap;
-    text-shadow: inherit;
-}
-.btn::before {
-    content: "[";
-}
-.btn::after {
-    content: "]";
-}
-.btn:hover {
-    color: #ffd54f;
-}
-
-/* === Button modifiers === */
-.btn-small {
-    font-size: 0.65rem;
-    font-weight: normal;
-    vertical-align: middle;
-}
-
-/* === Main === */
-main {
-    max-width: 860px;
-    margin: 0 auto;
-    padding: 1.5rem 1rem;
-}
-
-/* === Markdown content === */
-.content {
-    margin-bottom: 2rem;
-}
-
-.content h1,
-.content h2,
-.content h3,
-.content h4,
-.content h5,
-.content h6 {
-    color: white;
-    margin: 1.25rem 0 0.5rem;
-    line-height: 1.3;
-}
-.content h1 {
-    font-size: 1.75rem;
-    border-bottom: 1px dashed #0a0;
-    padding-bottom: 0.25rem;
-}
-.content h2 {
-    font-size: 1.4rem;
-}
-.content h3 {
-    font-size: 1.15rem;
-}
-.content p {
-    margin: 0.75rem 0;
-}
-.content ul,
-.content ol {
-    margin: 0.75rem 0 0.75rem 1.5rem;
-}
-.content li {
-    margin: 0.25rem 0;
-}
-.content blockquote {
-    border-left: 3px solid #0a0;
-    padding: 0.25rem 1rem;
-    color: #888;
-    margin: 0.75rem 0;
-}
-.content code {
-    font-family: Inconsolata, monospace;
-    font-size: 0.875em;
-    background: #001a00;
-    padding: 0.1em 0.35em;
-}
-.content pre {
-    background: #001a00;
-    border: 1px solid #0a0;
-    padding: 1rem;
-    overflow-x: auto;
-    margin: 0.75rem 0;
-}
-.content pre code {
-    background: none;
-    padding: 0;
-}
-.content table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 0.75rem 0;
-    font-size: 0.9rem;
-}
-.content th,
-.content td {
-    border: 1px solid #0a0;
-    padding: 0.4rem 0.75rem;
-    text-align: left;
-}
-.content th {
-    background: #001a00;
-    color: white;
-}
-.content hr {
-    border: none;
-    border-top: 1px dashed #0a0;
-    margin: 1.5rem 0;
-}
-.content img {
-    max-width: 100%;
-}
-
-/* === File listing === */
-.listing {
-    border: 1px solid #0a0;
-}
-.listing-header {
-    padding: 0.5rem 1rem;
-    font-size: 0.8rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: white;
-    border-bottom: 1px solid #0a0;
-}
-.listing-item {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.6rem 1rem;
-    border-top: 1px solid #060;
-    font-size: 0.95rem;
-}
-.listing-item:hover {
-    background: #001a00;
-}
-.listing-item .icon {
-    width: 1.25rem;
-    text-align: center;
-    flex-shrink: 0;
-    filter: drop-shadow(0 0 4px #c8c8c8);
-}
-.listing-item a {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: inherit;
-    text-shadow: inherit;
-}
-.listing-item .meta {
-    color: #888;
-    font-size: 0.8rem;
-    white-space: nowrap;
-    text-shadow: none;
-}
-
-/* === Editor toolbar === */
-.editor-toolbar {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.25rem;
-    border: 1px solid #0a0;
-    border-bottom: none;
-    padding: 0.4rem 0.6rem;
-    background: #001a00;
-}
-
-.btn-tool {
-    color: #0f0;
-    font-size: 0.85rem;
-    padding: 0 0.15rem;
-    text-shadow: 0 0 4px #0a0;
-}
-.btn-tool::before {
-    color: #060;
-}
-.btn-tool::after {
-    color: #060;
-}
-.btn-tool:hover {
-    color: #fff;
-    text-shadow: 0 0 6px #0f0;
-}
-
-.toolbar-sep {
-    width: 1px;
-    background: #060;
-    margin: 0 0.2rem;
-    align-self: stretch;
-}
-
-/* === Toolbar dropdowns === */
-.toolbar-dropdown {
-    position: relative;
-}
-
-.toolbar-dropdown-menu {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    display: none;
-    z-index: 100;
-    background: #001a00;
-    border: 1px solid #0a0;
-    min-width: 9rem;
-}
-
-.toolbar-dropdown-menu.is-open {
-    display: block;
-}
-
-.toolbar-dropdown-item {
-    display: block;
-    width: 100%;
-    text-align: left;
-    border: none;
-    border-radius: 0;
-    padding: 0.2rem 0.5rem;
-}
-
-/* === Edit form === */
-.edit-form {
-    display: flex;
-    flex-direction: column;
-}
-
-textarea {
-    width: 100%;
-    min-height: 60vh;
-    background: #000;
-    border: 1px solid #0a0;
-    border-top: none;
-    color: #0f0;
-    caret-color: #0f0;
-    text-shadow: 0 0 4px #0a0;
-    font: inherit;
-    font-size: 0.9rem;
-    line-height: 1.6;
-    padding: 1rem;
-    resize: vertical;
-    outline: none;
-    box-sizing: border-box;
-}
-textarea:focus {
-    border-color: #0f0;
-    box-shadow: 0 0 5px #0a0;
-}
-
-/* === Diary views === */
-.diary-section {
-    margin: 2rem 0;
-    padding-top: 1.5rem;
-    border-top: 1px dashed #0a0;
-}
-
-.diary-section:first-child {
-    border-top: none;
-    padding-top: 0;
-    margin-top: 0;
-}
-
-.diary-section h2 {
-    font-size: 1.2rem;
-    color: white;
-    margin-bottom: 0.75rem;
-    font-weight: normal;
-}
-
-.diary-photo-count {
-    color: #888;
-    font-size: 0.85rem;
-}
-
-.diary-photo-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-    gap: 0.4rem;
-    margin-top: 0.75rem;
-}
-
-.diary-photo-grid a {
-    display: block;
-    line-height: 0;
-}
-
-.diary-photo-grid img {
-    width: 100%;
-    height: 140px;
-    object-fit: cover;
-    display: block;
-}
-
-.diary-section .content {
-    margin-bottom: 0.75rem;
-}
-
-/* === Section edit links === */
-.section-edit {
-    margin-left: 0.75rem;
-}
-
-/* === Empty state === */
-.empty {
-    padding: 1rem;
-    text-align: center;
-}
-
-/* === hr === */
-hr {
-    border: none;
-    border-top: 1px dashed #0a0;
-    margin: 1rem 0;
-}
-
-/* === Scrollbars === */
-::-webkit-scrollbar {
-    width: 6px;
-}
-::-webkit-scrollbar-track {
-    background: #111;
-}
-::-webkit-scrollbar-thumb {
-    background: #0a0;
-}
-::-webkit-scrollbar-thumb:hover {
-    background: #0f0;
-}
-
-/* === Responsive === */
-@media (max-width: 600px) {
-    header {
-        padding: 0.5rem 0.75rem;
-    }
-    main {
-        padding: 1rem 0.75rem;
-    }
-    textarea {
-        min-height: 50vh;
-    }
-}
+/* === Pico customizations === */
diff --git a/diary.go b/diary.go
index 9b22306..f643290 100644
--- a/diary.go
+++ b/diary.go
@@ -86,9 +86,9 @@ type diaryYearData struct{ Months []diaryMonthSummary }
 type diaryMonthData struct{ Days []diaryDaySection }
 type diaryDayData struct{ Photos []diaryPhoto }
 
-var diaryYearTmpl = template.Must(template.ParseFS(assets, "assets/diary/diary-year.html"))
-var diaryMonthTmpl = template.Must(template.ParseFS(assets, "assets/diary/diary-month.html"))
-var diaryDayTmpl = template.Must(template.ParseFS(assets, "assets/diary/diary-day.html"))
+var diaryYearTmpl = newTemplate("diary-year.html", "assets/diary/diary-year.html")
+var diaryMonthTmpl = newTemplate("diary-month.html", "assets/diary/diary-month.html")
+var diaryDayTmpl = newTemplate("diary-day.html", "assets/diary/diary-day.html")
 
 var germanWeekdays = map[time.Weekday]string{
 	time.Sunday:    "Sonntag",
@@ -198,7 +198,7 @@ func renderDiaryYear(fsPath, urlPath string) template.HTML {
 	}
 
 	var buf bytes.Buffer
-	if err := diaryYearTmpl.Execute(&buf, diaryYearData{Months: months}); err != nil {
+	if err := diaryYearTmpl.get().Execute(&buf, diaryYearData{Months: months}); err != nil {
 		log.Printf("diary year template: %v", err)
 		return ""
 	}
@@ -289,7 +289,7 @@ func renderDiaryMonth(fsPath, urlPath string) template.HTML {
 	}
 
 	var buf bytes.Buffer
-	if err := diaryMonthTmpl.Execute(&buf, diaryMonthData{Days: sections}); err != nil {
+	if err := diaryMonthTmpl.get().Execute(&buf, diaryMonthData{Days: sections}); err != nil {
 		log.Printf("diary month template: %v", err)
 		return ""
 	}
@@ -329,7 +329,7 @@ func renderDiaryDay(fsPath, urlPath string) template.HTML {
 	}
 
 	var buf bytes.Buffer
-	if err := diaryDayTmpl.Execute(&buf, diaryDayData{Photos: photos}); err != nil {
+	if err := diaryDayTmpl.get().Execute(&buf, diaryDayData{Photos: photos}); err != nil {
 		log.Printf("diary day template: %v", err)
 		return ""
 	}
diff --git a/main.go b/main.go
index 50c624f..6455796 100644
--- a/main.go
+++ b/main.go
@@ -17,7 +17,7 @@ import (
 //go:embed assets
 var assets embed.FS
 
-var tmpl = template.Must(template.New("page.html").ParseFS(assets, "assets/page.html"))
+var tmpl = newTemplate("page.html", "assets/page.html")
 
 // specialPage is the result returned by a pageTypeHandler.
 // Content is injected into the page after the standard markdown content.
@@ -41,8 +41,11 @@ func main() {
 	wikiDir := flag.String("dir", "./wiki", "wiki root directory")
 	user := flag.String("user", "", "basic auth username (empty = no auth)")
 	pass := flag.String("pass", "", "basic auth password")
+	dev := flag.Bool("dev", false, "serve assets from disk (no recompile needed for HTML/CSS changes)")
 	flag.Parse()
 
+	initAssets(*dev)
+
 	root, err := filepath.Abs(*wikiDir)
 	if err != nil {
 		log.Fatal(err)
@@ -53,7 +56,7 @@ func main() {
 
 	h := &handler{root: root, user: *user, pass: *pass}
 
-	staticFS, _ := fs.Sub(assets, "assets")
+	staticFS, _ := fs.Sub(assetFS, "assets")
 	http.Handle("/_/", http.StripPrefix("/_/", http.FileServer(http.FS(staticFS))))
 	http.Handle("/", h)
 
@@ -185,7 +188,7 @@ func (h *handler) serveDir(w http.ResponseWriter, r *http.Request, urlPath, fsPa
 	}
 
 	w.Header().Set("Content-Type", "text/html; charset=utf-8")
-	if err := tmpl.Execute(w, data); err != nil {
+	if err := tmpl.get().Execute(w, data); err != nil {
 		log.Printf("template error: %v", err)
 	}
 }
diff --git a/render.go b/render.go
index 52aeea8..589a88e 100644
--- a/render.go
+++ b/render.go
@@ -145,7 +145,7 @@ func listEntries(fsPath, urlPath string) []entry {
 }
 
 func readIcon(name string) template.HTML {
-	b, _ := assets.ReadFile("assets/icons/" + name + ".svg")
+	b, _ := readAsset("assets/icons/" + name + ".svg")
 	return template.HTML(strings.TrimSpace(string(b)))
 }