From c09f6c337d07c0fb381e942bff8d8587cdc7181f Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Tue, 16 Jun 2020 21:00:49 -0700
Subject: [PATCH] fix: Use own layout for 404 pages

---
 src/pages/404.js          | 29 +++++++++++++++++------------
 src/pages/404.module.scss | 24 ++++++++++++++++++------
 2 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/pages/404.js b/src/pages/404.js
index 5139f3efa..a99d125bf 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -1,23 +1,28 @@
 import React from 'react';
 import { Link } from 'gatsby';
-import Layout from '../components/Layout';
 import SEO from '../components/Seo';
-import Section from '../components/Section';
+import SkewedContainer from '../components/SkewedContainer';
+import Header from '../components/Header';
+import Footer from '../components/Footer';
 import styles from './404.module.scss';
 
 const NotFoundPage = () => (
-  <Layout>
+  <>
     <SEO title="404: Not found" />
-    <Section backgroundBanner className={styles.backgroundBanner}>
-      <div className={styles.messageContainer}>
-        <h1 className={styles.header}>404</h1>
-        <p>
-          This page does not exist. Check the URL and try again, or{' '}
-          <Link to="/">go home</Link>.
-        </p>
+    <div className={styles.layout}>
+      <Header />
+      <div className={styles.contentContainer}>
+        <SkewedContainer className={styles.content}>
+          <h1 className={styles.header}>404</h1>
+          <p>
+            This page does not exist. Check the URL and try again, or{' '}
+            <Link to="/">go home</Link>.
+          </p>
+        </SkewedContainer>
       </div>
-    </Section>
-  </Layout>
+      <Footer />
+    </div>
+  </>
 );
 
 export default NotFoundPage;
diff --git a/src/pages/404.module.scss b/src/pages/404.module.scss
index 825382b07..145fae691 100644
--- a/src/pages/404.module.scss
+++ b/src/pages/404.module.scss
@@ -1,13 +1,25 @@
-.messageContainer {
-  margin-top: 5rem;
+.layout {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+}
+
+.contentContainer {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  justify-content: center;
+  text-align: center;
 }
+
 .header {
+  font-family: var(--secondary-font-family);
   font-size: 9rem;
+  font-weight: normal;
+  line-height: 1;
 }
-.backgroundBanner {
-  height: 130%;
-  top: 5.5rem;
+
+.content {
+  font-size: 1.125rem;
+  padding: 8rem 0;
+  z-index: -1;
 }