Redesign the dashboard: paper & ink

Flat colours, 2px rules, hard offset shadows and square corners; mono
headings and labels; the blog nav is a tab strip that scrolls sideways on
phones instead of stacking; list pages get a page header with the primary
action on the right; the Markdown cheat-sheet collapses into a details
element so forms stay calm. Plain CSS only, no variables or flex, so it
still renders on old browsers.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A

1 files changed, 5 insertions, 5 deletions

diff --git a/internal/web/templates/partials/mdhelp.html b/internal/web/templates/partials/mdhelp.html
index 878130e..4623c07 100644
--- a/internal/web/templates/partials/mdhelp.html
+++ b/internal/web/templates/partials/mdhelp.html
@@ -1,9 +1,9 @@
-{{define "mdhelp"}}<div class="card help">
-  <h3>Formatting cheat-sheet</h3>
+{{define "mdhelp"}}<details class="help">
+  <summary>Formatting cheat-sheet</summary>
   <table class="cheat">
     <tr><td><code># Heading</code>, <code>## Smaller heading</code></td><td><code>**bold**</code>, <code>*italic*</code></td></tr>
-    <tr><td><code>[link text](https://example.org)</code></td><td><code>![description](/media/…)</code> — copy the address from <em>Images</em></td></tr>
+    <tr><td><code>[link text](https://example.org)</code></td><td><code>![description](/media/…)</code> — or use <em>Insert image</em></td></tr>
     <tr><td><code>- list item</code> / <code>1. numbered</code></td><td><code>&gt; quote</code>, <code>`code`</code>, <code>---</code> for a line</td></tr>
   </table>
-  <p class="muted">Blank line = new paragraph. Press Enter once for a line break.</p>
-</div>{{end}}
+  <p class="muted small">Blank line = new paragraph. Press Enter once for a line break.</p>
+</details>{{end}}