From 8907eb6820445913459bb0951a2db18a3186680a Mon Sep 17 00:00:00 2001
From: Benjamin Jones <benjamin@tbnt.digital>
Date: Sun, 10 Nov 2019 12:42:37 +0100
Subject: [PATCH] added 404 page, configured jekyll a little more

---
 404.html               | 17 ++++++++---
 _config.yml            |  2 +-
 _sass/layouts/404.scss | 65 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 79 insertions(+), 5 deletions(-)
 create mode 100644 _sass/layouts/404.scss

diff --git a/404.html b/404.html
index 086a5c9..d11bede 100644
--- a/404.html
+++ b/404.html
@@ -17,9 +17,18 @@ layout: default
   }
 </style>
 
-<div class="container">
-  <h1>404</h1>
+<div class="container error-404">
+  <div class="fourohfour">
+    <h1>4</h1>
+    <h1>0</h1>
+    <h1>4</h1>
+  </div>
+  <p><strong>Page not found</strong></p>
+  <p>¯\_(ツ)_/¯</p>
+  <a href="/">return home</a>
+  <script>
+    const f404 = document.querySelectorAll('h1, strong, p')
+    f404.forEach(elem => elem.addEventListener('mouseover', () => elem.parentNode.removeChild(elem)))
 
-  <p><strong>Page not found :(</strong></p>
-  <p>The requested page could not be found.</p>
+</script>
 </div>
diff --git a/_config.yml b/_config.yml
index 60e14aa..802d480 100644
--- a/_config.yml
+++ b/_config.yml
@@ -18,7 +18,7 @@
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
 
-title: Your awesome title
+title: ReclaimFutures
 email: your-email@example.com
 description: >- # this means to ignore newlines until "baseurl:"
   Write an awesome description for your new site here. You can edit this
diff --git a/_sass/layouts/404.scss b/_sass/layouts/404.scss
new file mode 100644
index 0000000..9a318da
--- /dev/null
+++ b/_sass/layouts/404.scss
@@ -0,0 +1,65 @@
+.error-404 {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  .fourohfour {
+    display: flex;
+    flex-direction: row;
+    h1 {
+      animation: grain 1s steps(10) infinite;
+
+      &:first-of-type {
+        animation-duration: 2s;
+      }
+      &:last-of-type {
+        animation-duration: 3s;
+      }
+    }
+  }
+
+  a {
+    transition: transform 5s ease-in-out;
+
+    &:hover {
+      transform: scale(20) rotate(360deg);
+    }
+  }
+}
+
+@keyframes grain {
+  0%,
+  100% {
+    transform: translate(0, 0);
+  }
+  10% {
+    transform: translate(-5%, -10%);
+  }
+  20% {
+    transform: translate(-15%, 5%);
+  }
+  30% {
+    transform: translate(7%, -25%);
+  }
+  40% {
+    transform: translate(-5%, 25%);
+  }
+  50% {
+    transform: translate(-15%, 10%);
+  }
+  60% {
+    transform: translate(15%, 0%);
+  }
+  70% {
+    transform: translate(0%, 15%);
+  }
+  80% {
+    transform: translate(3%, 35%);
+  }
+  90% {
+    transform: translate(-10%, 10%);
+  }
+}