fix: Use own layout for 404 pages

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;

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;
 }