Add custom 404 page

layouts/404.html

@@ -0,0 +1,8 @@
+{{ define "main" }}
+  <section class="http-page">
+    <header class="http-header">
+      <h1 title="404" class="http-status">4📀4</h1>
+    </header>
+    <p>The page you were looking for could not be found</p>
+  </section>
+{{ end }}

static/style.css

@@ -226,3 +226,25 @@ a:hover {
   margin-top: 30px;
   margin-bottom: 10px;
 }
+
+.http-status {
+  font-size: calc(10ch + 10vw);
+  font-family: var(--numbers-font-family);
+  letter-spacing: 5px;
+}
+
+.http-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding: 0 20px;
+}
+
+.http-page p {
+  text-align: center;
+}
+
+.http-header {
+  margin-top: 10vh;
+}