ui(404): improve 404 page styling

src/pages/404.tsx

@@ -1,4 +1,5 @@
 import React, { Fragment } from "react"
+import * as SC from "./styles"
 
 import { SEO } from "../components/SEO"
 
@@ -6,8 +7,10 @@ function NotFoundPage() {
   return (
     <Fragment>
       <SEO title="404: Not found" />
-      <h1>NOT FOUND</h1>
-      <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+      <SC.StyledDiv>
+          <SC.StyledH1>NOT FOUND</SC.StyledH1>
+          <SC.StyledPara>You just hit a route that doesn&#39;t exist... the sadness.</SC.StyledPara>
+      </SC.StyledDiv>
     </Fragment>
   )
 }

src/pages/archives/404.tsx

@@ -1,6 +1,7 @@
 import { Location } from "@reach/router"
 import { graphql } from "gatsby"
 import React, { Fragment } from "react"
+import * as SC from "../styles"
 
 import { FileConnection } from "../../../generated/graphql"
 import { ComponentQuery } from "../../../typings"
@@ -11,8 +12,10 @@ import { PossibleCorrections } from "../../components/404LinkCorrection"
 export default ({ data }: ComponentQuery<{ allFile: FileConnection }>) => (
   <Fragment>
     <SEO title="404: Archive Not found" />
-    <h1>RESOURCE NOT FOUND</h1>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+    <SC.StyledDiv>
+        <SC.StyledH1>RESOURCE NOT FOUND</SC.StyledH1>
+        <SC.StyledPara>You just hit a route that doesn&#39;t exist... the sadness.</SC.StyledPara>
+    </SC.StyledDiv>
     <Location>
       {({ location }) => (
         <PossibleCorrections

src/pages/resources/404.tsx

@@ -1,6 +1,7 @@
 import { Location } from "@reach/router"
 import { graphql } from "gatsby"
 import React, { Fragment } from "react"
+import * as SC from "../styles"
 
 import { FileConnection } from "../../../generated/graphql"
 import { ComponentQuery } from "../../../typings"
@@ -10,8 +11,10 @@ import { SEO } from "../../components/SEO"
 export default ({ data }: ComponentQuery<{ allFile: FileConnection }>) => (
   <Fragment>
     <SEO title="404: Resource Not found" />
-    <h1>RESOURCE NOT FOUND</h1>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+    <SC.StyledDiv>
+        <SC.StyledH1>RESOURCE NOT FOUND</SC.StyledH1>
+        <SC.StyledPara>You just hit a route that doesn&#39;t exist... the sadness.</SC.StyledPara>
+    </SC.StyledDiv>
     <Location>
       {({ location }) => (
         <PossibleCorrections

src/pages/styles.tsx

@@ -0,0 +1,21 @@
+import styled from "styled-components"
+
+export const StyledDiv = styled.div`
+    width: 100%;
+    padding: 20px;
+    padding-top: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+`
+export const StyledH1 = styled.h1`
+    margin: 0;
+    padding: 10px;
+    line-height: 2.5rem;
+`
+export const StyledPara = styled.p`
+    margin: 0;
+    padding: 10px;
+    line-height: 2rem;
+`