Add 404 page

fragments/not-found/all/all/body_body.html

@@ -0,0 +1,16 @@
+<div id='splash'>
+  <h1>Page not found</h1>
+  <img src='https://mnf.m17s.net/404-not-found.jpg'
+       alt='Sign for Exit 404 on an American highway.'>
+</div>
+
+<p>
+  That page doesn’t appear to exist. Sorry about that.
+  If you’ve found it by following a link in this site, you can shout at
+  <a href='https://twitter.com/cackhanded'>@cackhanded</a>.
+  It might make you feel better.
+</p>
+<p>
+  Otherwise, I guess use one of the main navigation links
+  at the start of the page to wander off.
+</p>

fragments/not-found/all/all/body_class

@@ -0,0 +1 @@
+not-found

fragments/not-found/all/all/head_title.html

@@ -0,0 +1 @@
+<title>Page not found</title>

sass/_page.scss

@@ -1,7 +1,9 @@
 // Page layout.
 
 $side_indent: 20px;
+$side_outdent: -20px;
 $side_indent_larger: 60px;
+$side_outdent_larger: -60px;
 
 @mixin larger_width {
     @media only screen and (min-width: 640px) {

sass/pages/_not_found.scss

@@ -0,0 +1,37 @@
+// The 404 page
+
+body.not-found #splash {
+    position: relative;
+
+    h1 {
+        text-align: right;
+        margin: 0;
+        position: absolute;
+        bottom: 0.1em;
+        right: 0;
+        font-size: 2em;
+        font-size: 10vw;
+        color: $desert_storm;
+        @include outline_text(2px);
+    }
+
+    img {
+        margin: 0 $side_outdent;
+        max-width: 100%;
+        max-width: unquote("calc(100% +") $side_indent + $side_indent unquote(")");
+    }
+
+    @include larger_width {
+        h1 {
+            font-size: 4em;
+            font-size: 10vw;
+            @include outline_text(5px);
+        }
+
+        img {
+            margin: -1em $side_outdent_larger 0;
+            max-width: 100%;
+            max-width: unquote("calc(100% +") $side_indent_larger + $side_indent_larger unquote(")");
+        }
+    }
+}

sass/site.scss

@@ -16,3 +16,4 @@
 @import "pages/tweet";
 @import "pages/foursquare";
 @import "pages/recipe";
+@import "pages/not_found";

source/_site.toml

@@ -3,3 +3,5 @@ title = 'Mark Norman Francis'
 base_url = 'https://marknormanfrancis.com'
 bucket = 'marknormanfrancis.com'
 cloudfront_id = 'E3KM80ZDXNHA6G'
+
+404_page = '/404'

source/generate.py

@@ -70,6 +70,10 @@ class Archives(base.IndexGenerator):
     template_name = 'archives.html'
 
 
+class NotFound(base.StaticGenerator):
+    template_name = 'base_template.html'
+
+
 def global_context(self):
     return {
         'publication_range': helpers.publication_range(self),
@@ -142,4 +146,8 @@ def global_context(self):
         path = '/drafts',
         name = 'drafts',
     ),
+    NotFound(
+        path = '/404',
+        name = 'not-found',
+    ),
 )