404: add custom page with scoped path handling

ritorhymes · ritorhymes · commit 01227f14fdec · 2026-02-25T07:40:55.000-05:00
404s are served at unknown, often nested URLs, where relative asset
paths can resolve against missing paths instead of site root.

This keeps 404 assets and navigation resolving from the homepage
context without changing URL behavior on normal pages.

The default banner is omitted on 404 so the error state and recovery
action are immediately clear.
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
@@ -123,3 +123,36 @@ footer nav ul li a {
     margin: auto 0px;
   }
 }
+.not-found {
+  text-align: center;
+  margin: 3rem auto;
+}
+
+.not-found-logo {
+  width: 200px;
+  margin: 0 auto 1.5rem;
+  display: block;
+}
+
+.not-found h1 {
+  margin: 0 0 1rem;
+  font-size: 3rem;
+  font-weight: 700;
+}
+
+.not-found p {
+  margin: 0 0 1rem;
+}
+
+body.page-404 {
+  min-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+body.page-404 .not-found {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
diff --git a/layouts/404.html b/layouts/404.html
@@ -0,0 +1,9 @@
+{{ define "main" }}
+<div class="not-found">
+  <img class="not-found-logo" src="{{ relURL "images/gitgitgadget-logo.png" }}" alt="GitGitGadget logo" width="200">
+  <h1>404 Not Found</h1>
+  <p>The page you are looking for doesn't exist</p>
+  <p><a href="{{ relURL "/" }}">Return home</a></p>
+</div>
+{{ partial "footer.html" . }}
+{{ end }}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -6,13 +6,20 @@
     <title>{{ .Title }}</title>
     {{- $canonical := .Permalink | replaceRE "\\.html$" "" -}}
     <link rel="canonical" href="{{ $canonical }}">
-    <link rel="icon" href="{{ relURL "favicon.ico" }}">
+    {{- if eq .Kind "404" }}
+    <script>
+      document.write('<base href="{{ .Site.Home.Permalink }}">');
+    </script>
+    {{- end }}
     {{- $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "main.scss" . | css.Sass }}
+    <link rel="icon" href="{{ relURL "favicon.ico" }}">
     <link rel="stylesheet" href="{{ $style.RelPermalink }}">
     {{- partial "breadcrumbs.html" . -}}
   </head>
-  <body>
+  <body{{ if eq .Kind "404" }} class="page-404"{{ end }}>
+    {{- if ne .Kind "404" }}
     {{ partial "banner.html" . -}}
+    {{- end }}
 
     {{ block "main" . }}
     {{ .Content }}
diff --git a/static/images/gitgitgadget-logo.png b/static/images/gitgitgadget-logo.png
