Add a 404 page (which doesn't work yet)

404.html

@@ -0,0 +1,4 @@
+---
+layout: 2017/not_found
+---
+This cheatsheet doesn't exist.

_includes/2017/top-nav.html

@@ -8,18 +8,20 @@
       Rico's cheatsheets
     </a>
 
-    <div class='actions'>
+    {% unless include.noshare %}
-      {% include social-list.html class="social page-actions" page=include.page %}
+      <div class='actions'>
+        {% include social-list.html class="social page-actions" page=include.page %}
 
-      {% if include.page.type != 'website' %}
+        {% if include.page.type != 'website' %}
-        <ul class='page-actions'>
+          <ul class='page-actions'>
-          <li class='link github -button hint--bottom' data-hint='Edit this page on GitHub'>
+            <li class='link github -button hint--bottom' data-hint='Edit this page on GitHub'>
-            <a href='{{ site.github.repository_url }}/blob/gh-pages/{{ page.path | remove: '.html' }}'>
+              <a href='{{ site.github.repository_url }}/blob/gh-pages/{{ page.path | remove: '.html' }}'>
-              <span class='text -visible'>Edit</span>
+                <span class='text -visible'>Edit</span>
-            </a>
+              </a>
-          </li>
+            </li>
-        </ul>
+          </ul>
-      {% endif %}
+        {% endif %}
-    </div>
+      </div>
+    {% endunless %}
   </div>
 </nav>

_layouts/2017/not_found.html

@@ -0,0 +1,31 @@
+---
+type: website
+permalink: /404.html
+---
+{% include 2017/head.html %}
+{% include 2017/top-nav.html page=page noshare=true %}
+
+<div class='body-area -slim'>
+  <div class='site-header'>
+    <h1>
+      Not found
+    </h1>
+    <p>
+      Sorry, we don't have a cheatsheet for this yet. Try searching!
+    </p>
+
+    <form class='search' action='.' method='get'>
+      <label class='search-box'>
+        <!-- <span class='prefix'>devhints.io</span> -->
+        <!-- <span class='sep'>/</span> -->
+        <input name='q' type='text' placeholder='Search...' autofocus data-js-search-input>
+      </label>
+    </form>
+
+    <p class='action'>
+      <a class='push-button' href='./'>Back to home</a>
+    </p>
+  </div>
+</div>
+
+{% include 2017/foot.html %}

_sass/2017/components/site-header.scss

@@ -24,4 +24,8 @@
   & > .search {
     margin-top: 32px;
   }
+
+  & > .action {
+    margin-top: 32px;
+  }
 }