From 4faaabcf693037ac140750aacfc374887572ce7e Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlan@hackclub.com>
Date: Fri, 5 Jun 2020 04:20:40 +0000
Subject: [PATCH] Add 404 page

---
 components/footer.js |  42 +++++-----
 components/nav.js    |  13 ++-
 pages/404.js         | 192 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 217 insertions(+), 30 deletions(-)
 create mode 100644 pages/404.js

diff --git a/components/footer.js b/components/footer.js
index 5beaf0b7..f6958658 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -8,21 +8,15 @@ import Icon from './icon'
 const Base = styled(Box)`
   background: ${props =>
     props.dark
-      ? `${theme.colors.darker} radial-gradient(${hexa(
-          theme.colors.black,
-          0.5
-        )} 1px, transparent 1px)`
+      ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`
       : `${theme.colors.snow} url('https://hackclub.com/pattern.svg') repeat`};
   ${props =>
     props.dark &&
-    css`
+    `
       background-size: ${theme.space[4]}px ${theme.space[4]}px;
       h2 {
         color: ${theme.colors.muted};
       }
-      ${BottomLine} {
-        border-color: ${theme.colors.black};
-      }
     `} @media print {
     display: none;
   }
@@ -97,10 +91,6 @@ const Pages = styled(Box)`
   }
 `
 
-const BottomLine = styled(Box)`
-  border-top: 1px solid ${theme.colors.smoke};
-`
-
 const Footer = ({ dark = false, children, ...props }) => (
   <Base
     color={dark ? 'muted' : 'slate'}
@@ -184,17 +174,23 @@ const Footer = ({ dark = false, children, ...props }) => (
           </Text>
         </Box>
       </Columns>
-      <Box mt={[3, 4]}>
-        <Text fontSize={3} color="muted">
-          Mail: 8605 Santa Monica Blvd #86294, West Hollywood, CA 90069
-        </Text>
-      </Box>
-      <BottomLine mt={3}>
-        <Text fontSize={2} mt={2} color="muted">
-          © {new Date().getFullYear()} Hack Club. 501(c)(3) nonprofit (EIN:
-          81-2908499)
-        </Text>
-      </BottomLine>
+      <Text as="p" fontSize={3} color="muted" mt={[3, 4]}>
+        Mail: 8605 Santa Monica Blvd #86294, West Hollywood, CA 90069
+      </Text>
+      <Text
+        as="p"
+        sx={{
+          borderTop: '1px solid',
+          borderColor: dark ? 'black' : 'smoke',
+          mt: 3,
+          pt: 2
+        }}
+        fontSize={3}
+        color="muted"
+      >
+        © {new Date().getFullYear()} Hack Club. 501(c)(3) nonprofit (EIN:
+        81-2908499)
+      </Text>
     </Container>
   </Base>
 )
diff --git a/components/nav.js b/components/nav.js
index 8ff44c61..2b35be23 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -92,9 +92,8 @@ const layout = props =>
         overflow-y: auto;
         text-align: left;
         height: 100vh;
-        animation: ${slide} 0.25s ease-in;
-        @media (prefers-reduced-motion: reduce) {
-          animation: none;
+        @media (prefers-reduced-motion: no-preference) {
+          animation: ${slide} 0.25s ease-in;
         }
         a {
           color: ${theme.colors[props.dark ? 'white' : 'black']} !important;
@@ -220,13 +219,13 @@ class Header extends Component {
     const baseColor = dark
       ? color || 'white'
       : color === 'white' && scrolled
-        ? 'black'
-        : color
+      ? 'black'
+      : color
     const toggleColor = dark
       ? color || 'snow'
       : toggled || (color === 'white' && scrolled)
-        ? 'slate'
-        : color
+      ? 'slate'
+      : color
 
     return (
       <Root
diff --git a/pages/404.js b/pages/404.js
new file mode 100644
index 00000000..716bb468
--- /dev/null
+++ b/pages/404.js
@@ -0,0 +1,192 @@
+import React from 'react'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/core'
+import { Heading, Container, Button, Text } from 'theme-ui'
+import NextLink from 'next/link'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import theme from '../lib/theme'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Icon from '../components/icon'
+import Footer from '../components/footer'
+
+const animation1 = keyframes`
+  0% {
+    clip: rect(62px, 9999px, 68px, 0);
+  }
+  5% {
+    clip: rect(45px, 9999px, 9px, 0);
+  }
+  10% {
+    clip: rect(9px, 9999px, 76px, 0);
+  }
+  15% {
+    clip: rect(89px, 9999px, 83px, 0);
+  }
+  20% {
+    clip: rect(44px, 9999px, 8px, 0);
+  }
+  25% {
+    clip: rect(59px, 9999px, 24px, 0);
+  }
+  30% {
+    clip: rect(96px, 9999px, 51px, 0);
+  }
+  35% {
+    clip: rect(38px, 9999px, 28px, 0);
+  }
+  40% {
+    clip: rect(92px, 9999px, 1px, 0);
+  }
+  45% {
+    clip: rect(63px, 9999px, 80px, 0);
+  }
+  50% {
+    clip: rect(1px, 9999px, 49px, 0);
+  }
+  55% {
+    clip: rect(7px, 9999px, 49px, 0);
+  }
+  60% {
+    clip: rect(35px, 9999px, 16px, 0);
+  }
+  65% {
+    clip: rect(93px, 9999px, 72px, 0);
+  }
+  70% {
+    clip: rect(55px, 9999px, 52px, 0);
+  }
+  75% {
+    clip: rect(58px, 9999px, 68px, 0);
+  }
+  80% {
+    clip: rect(94px, 9999px, 95px, 0);
+  }
+  85% {
+    clip: rect(81px, 9999px, 24px, 0);
+  }
+  90% {
+    clip: rect(98px, 9999px, 12px, 0);
+  }
+  95% {
+    clip: rect(2px, 9999px, 96px, 0);
+  }
+  100% {
+    clip: rect(95px, 9999px, 47px, 0);
+  }
+`
+const animation2 = keyframes`
+  0% {
+    clip: rect(57px, 9999px, 7px, 0);
+  }
+  5% {
+    clip: rect(61px, 9999px, 22px, 0);
+  }
+  10% {
+    clip: rect(34px, 9999px, 47px, 0);
+  }
+  15% {
+    clip: rect(92px, 9999px, 40px, 0);
+  }
+  20% {
+    clip: rect(6px, 9999px, 40px, 0);
+  }
+  25% {
+    clip: rect(39px, 9999px, 46px, 0);
+  }
+  30% {
+    clip: rect(33px, 9999px, 17px, 0);
+  }
+  35% {
+    clip: rect(5px, 9999px, 17px, 0);
+  }
+  40% {
+    clip: rect(40px, 9999px, 70px, 0);
+  }
+  45% {
+    clip: rect(14px, 9999px, 34px, 0);
+  }
+  50% {
+    clip: rect(26px, 9999px, 30px, 0);
+  }
+  55% {
+    clip: rect(15px, 9999px, 100px, 0);
+  }
+  60% {
+    clip: rect(10px, 9999px, 32px, 0);
+  }
+  65% {
+    clip: rect(49px, 9999px, 61px, 0);
+  }
+  70% {
+    clip: rect(61px, 9999px, 22px, 0);
+  }
+  75% {
+    clip: rect(85px, 9999px, 36px, 0);
+  }
+  80% {
+    clip: rect(38px, 9999px, 59px, 0);
+  }
+  85% {
+    clip: rect(21px, 9999px, 88px, 0);
+  }
+  90% {
+    clip: rect(46px, 9999px, 16px, 0);
+  }
+  95% {
+    clip: rect(13px, 9999px, 35px, 0);
+  }
+  100% {
+    clip: rect(75px, 9999px, 13px, 0);
+  }
+`
+
+const Blinking = styled(Heading)`
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+  &:before,
+  &:after {
+    content: '${props => props.children}';
+    position: absolute;
+    top: 0;
+    color: ${theme.colors.smoke};
+    background: ${theme.colors.dark};
+    overflow: hidden;
+    clip: rect(0, 512px, 0, 0);
+  }
+  &:after {
+    left: 2px;
+    text-shadow: -2px 0 ${theme.colors.red};
+    animation: ${animation1} 2s infinite linear alternate-reverse;
+  }
+  &:before {
+    left: -2px;
+    text-shadow: -2px 0 ${theme.colors.cyan};
+    animation: ${animation2} 4s infinite linear alternate-reverse;
+  }
+`
+
+export default () => (
+  <>
+    <Meta as={Head} title="404" />
+    <ForceTheme theme="dark" />
+    <Nav color="primary" dark />
+    <Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
+      <Blinking as="h1" variant="title" sx={{ fontSize: [128, 256] }}>
+        404!
+      </Blinking>
+      <Text mt={2} mb={4} color="muted" variant="subtitle">
+        We couldn’t find that page.
+      </Text>
+      <NextLink href="/" passHref>
+        <Button as="a" variant="cta">
+          <Icon glyph="home" size={32} />
+          Go Home
+        </Button>
+      </NextLink>
+    </Container>
+    <Footer dark />
+  </>
+)