Reformat default 404 page

4 files changed, 37 insertions, 6 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 37d2fe4..6f7ab6a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Amend documentation
 - Do not show "Latest Publications" section at the homepage if there are no publications
 - Add fallback if main sections are not configured
+- Reformat default 404 page
 
 ## v0.1.0 - 2022-05-27
 
diff --git a/assets/sass/_customize.scss b/assets/sass/_customize.scss
index 60f463e..bc64b27 100644
--- a/assets/sass/_customize.scss
+++ b/assets/sass/_customize.scss
@@ -34,6 +34,17 @@
   text-align: center;
 }
 
+.introduction h1.accent {
+  margin: 30px 0;
+  font-size: 4em;
+  line-height: 1;
+  letter-spacing: -1px;
+}
+
+.post-meta time {
+  padding-right: 1rem;
+}
+
 .blog-post {
   margin-top: 40px;
 
diff --git a/layouts/404.html b/layouts/404.html
index 071f43e..dfe2090 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,7 +1,17 @@
 {{ define "main" }}
-<article class="page">
-    <h1 class="page-title">404: Page not found</h1>
-    Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.
-    <a href="{{ "/" | relURL }}">Head back home to try finding it again</a>.
-</article>
-{{ end }}
+
+<section class="introduction">
+    <div class="container">
+        <h1 class="accent">404</h1>
+        <p><strong>Page not found</strong></p>
+    </div>
+
+    <p>
+        Sorry, we've misplaced that URL or it's pointing to something
+        that doesn't exist.
+    </p>
+
+    <p>
+        <a href="{{ "/" | relURL }}">Head back home to try finding it again</a>.
+    </p>
+</section>
diff --git a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
index 1b04769..aa1364f 100644
--- a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -887,6 +887,15 @@ form input:-moz-ui-invalid {
   max-width: 600px;
   text-align: center; }
 
+.introduction h1.accent {
+  margin: 30px 0;
+  font-size: 4em;
+  line-height: 1;
+  letter-spacing: -1px; }
+
+.post-meta time {
+  padding-right: 1rem; }
+
 .blog-post {
   margin-top: 40px; }
   @media only screen and (min-width: 768px) {