From a329072d9f90453c460f63c8c6d5a8a98331ca37 Mon Sep 17 00:00:00 2001
From: Campbell Alden <campbell.alden@bibo.com.ph>
Date: Sat, 27 Aug 2022 12:46:01 +0900
Subject: [PATCH] Add custom 404 page

---
 layouts/404.html |  8 ++++++++
 static/style.css | 22 ++++++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/layouts/404.html b/layouts/404.html
index e69de29..a904c6c 100644
--- a/layouts/404.html
+++ b/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 }}
diff --git a/static/style.css b/static/style.css
index eb8b5a2..e80308e 100644
--- a/static/style.css
+++ b/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;
+}