Add a 404 page layout

oschwald · claude · oschwald · commit 40996b171122 · 2026-05-20T14:56:18.000Z
Hugo's built-in fallback renders an empty `&lt;main&gt;&lt;/main&gt;` for the
404 page. Provide a minimal "Page not found" body with a link back
to the site home, reusing the Charter/forest-green design tokens
from the main layout.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/docs/layouts/404.html b/docs/layouts/404.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Page not found | {{ .Site.Title }}</title>
+    <style>
+      :root {
+        --fg: #2d2d2d;
+        --bg: #faf9f7;
+        --accent: #1a6b50;
+        --heading: #1a1a1a;
+      }
+
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
+        font-size: 1.05rem;
+        line-height: 1.78;
+        color: var(--fg);
+        background: var(--bg);
+        max-width: 50rem;
+        margin: 0 auto;
+        padding: 3rem 1.5rem 5rem;
+      }
+
+      h1 {
+        font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial,
+          sans-serif;
+        font-size: 1.75rem;
+        font-weight: 800;
+        line-height: 1.35;
+        color: var(--heading);
+        margin: 0 0 1.5rem;
+        padding-bottom: 0.75rem;
+        border-bottom: 3px solid var(--accent);
+      }
+
+      a {
+        color: var(--accent);
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Page not found</h1>
+      <p>
+        The page you're looking for doesn't exist. Return to
+        <a href="{{ .Site.Home.RelPermalink }}">{{ .Site.Title }}</a>.
+      </p>
+    </main>
+  </body>
+</html>
