From 4fc6639fbd46242c59ac88bb452148237ddf4bef Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 9 Sep 2018 18:16:13 +0200
Subject: [PATCH] restore 404 page

---
 _src/_assets/styl/_page-404.styl  | 68 ----------------------------
 src/components/Layout.module.scss |  1 +
 src/pages/404.jsx                 | 14 +++---
 src/pages/404.module.scss         | 75 +++++++++++++++++++++++++++++++
 4 files changed, 84 insertions(+), 74 deletions(-)
 delete mode 100644 _src/_assets/styl/_page-404.styl
 create mode 100644 src/pages/404.module.scss

diff --git a/_src/_assets/styl/_page-404.styl b/_src/_assets/styl/_page-404.styl
deleted file mode 100644
index 53a98593..00000000
--- a/_src/_assets/styl/_page-404.styl
+++ /dev/null
@@ -1,68 +0,0 @@
-//
-// kremalicious3
-// --------------
-// Page - 404
-//
-
-.page-404
-    @extend .textcenter
-
-    .entry-title
-        @extend .hide
-
-.srverror-title
-    font-size: 2em
-    margin-bottom: ($spacer/4)
-    color: $text-color-light
-
-.srverror-text
-    @extend .text-dimmed
-    font-size: 1.2em
-    letter-spacing: .01em
-
-// HAL needs a size
-$hal-size = 72px
-
-.hal-9000
-    @extend .textcenter, .aligncenter
-    width: $hal-size
-    height: $hal-size
-    border-radius: $hal-size
-    background: #444
-    padding: 1.5em
-    margin-top: $spacer
-    margin-bottom: $spacer
-    position: relative
-    border: 4px solid #ccc
-    box-shadow: inset 0 0 10px #000
-
-    // eye
-    &:before
-        content: ""
-        width: 100%
-        height: 100%
-        border-radius: 100%
-        display: block
-        background: red
-        box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red, 0 0 20px red, 0 0 25px red, 0 0 30px red, 0 0 40px red
-        animation: halpulse 7s infinite
-
-    // gloss
-    &:after
-        content: ""
-        position: absolute
-        width: $hal-size
-        height: $hal-size
-        border-radius: $hal-size
-        position: absolute
-        left: 0
-        top: 0
-        background-image: linear-gradient(135deg, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.07) 40%,rgba(255,255,255,0) 41%)
-
-@keyframes halpulse
-    0%
-        opacity: 1
-    50%
-        opacity: .6
-    100%
-        opacity: 1
diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
index 3dd567cd..425df431 100644
--- a/src/components/Layout.module.scss
+++ b/src/components/Layout.module.scss
@@ -29,6 +29,7 @@
     background-color: $page-background-color;
     border-top: 1px solid rgba(255, 255, 255, .7);
     border-bottom: 1px solid rgba(255, 255, 255, .7);
+    padding-bottom: $spacer * 2;
     box-shadow: 0 1px 4px rgba($brand-main, .1),
         0 -1px 4px rgba($brand-main, .2);
     transform: translate3d(0, 0, 0);
diff --git a/src/pages/404.jsx b/src/pages/404.jsx
index 81e096d8..04eb5d97 100644
--- a/src/pages/404.jsx
+++ b/src/pages/404.jsx
@@ -1,17 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Link } from 'gatsby'
 import Layout from '../components/Layout'
+import styles from './404.module.scss'
 
 const NotFound = ({ location }) => (
   <Layout location={location}>
-    <div className="hal-9000" />
+    <div className={styles.hal9000} />
 
-    <p className="srverror-title">I am sorry Dave,</p>
-    <p className="srverror-text">I am afraid I can not do that.</p>
+    <div className={styles.wrapper}>
+      <h1 className={styles.title}>I am sorry Dave,</h1>
+      <p className={styles.text}>I am afraid I can not do that.</p>
 
-    <a href="#" className="js-search-init">
-      How about a nice search?
-    </a>
+      <Link to={'/'}>Back to homepage</Link>
+    </div>
   </Layout>
 )
 
diff --git a/src/pages/404.module.scss b/src/pages/404.module.scss
new file mode 100644
index 00000000..2de7984d
--- /dev/null
+++ b/src/pages/404.module.scss
@@ -0,0 +1,75 @@
+@import 'variables';
+
+.wrapper {
+    text-align: center;
+}
+
+.title {
+    font-size: $font-size-h3;
+    margin-top: 0;
+    margin-bottom: $spacer / 4;
+}
+
+.text {
+    font-size: $font-size-base;
+    color: $brand-grey-light;
+}
+
+// HAL needs a size
+$hal-size: 72px;
+
+.hal9000 {
+    width: $hal-size;
+    height: $hal-size;
+    border-radius: $hal-size;
+    background: #444;
+    padding: 1.5em;
+    margin: $spacer auto;
+    position: relative;
+    border: 4px solid #ccc;
+    box-shadow: inset 0 0 10px #000;
+
+    // eye
+    &::before {
+        content: '';
+        width: 100%;
+        height: 100%;
+        border-radius: 100%;
+        display: block;
+        background: red;
+        box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red, 0 0 20px red,
+            0 0 25px red, 0 0 30px red, 0 0 40px red;
+        animation: halpulse 7s infinite;
+    }
+
+    // gloss
+    &::after {
+        content: '';
+        position: absolute;
+        width: $hal-size;
+        height: $hal-size;
+        border-radius: $hal-size;
+        left: 0;
+        top: 0;
+        background-image: linear-gradient(
+            135deg,
+            rgba(255, 255, 255, .07) 0%,
+            rgba(255, 255, 255, .07) 40%,
+            rgba(255, 255, 255, 0) 41%
+        );
+    }
+}
+
+@keyframes halpulse {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: .6;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}