Create ShapesBackground component

components/ShapesBackground.module.css

@@ -0,0 +1,15 @@
+.contentContainer {
+  position: relative;
+
+  /* This makes the footer stay at the bottom, even if there's not much content on the screen.*/
+  flex-grow: 1;
+}
+
+.shapesContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -10;
+}

components/ShapesBackground.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+import styles from "./ShapesBackground.module.css";
+
+export function ShapesBackground(props: { children: React.ReactNode }) {
+  return (
+    <div className={styles.contentContainer}>
+      <div className={styles.shapesContainer}></div>
+      {props.children}
+    </div>
+  );
+}

pages/_app.module.css

@@ -3,10 +3,3 @@
   flex-direction: column;
   min-height: 100vh;
 }
-
-/* This makes the footer stay at the bottom, even if there's not much content
- * on the screen.
- */
-.contentContainer {
-  flex-grow: 1;
-}

pages/_app.tsx

@@ -7,6 +7,7 @@ import { DefaultLayout } from "@/components/DefaultLayout";
 import { Footer } from "@/components/Footer";
 import { Link } from "@/components/Link";
 import { Navbar } from "@/components/Navbar";
+import { ShapesBackground } from "@/components/ShapesBackground";
 import { ThemeProvider } from "@/components/Theme";
 
 import styles from "./_app.module.css";
@@ -22,12 +23,12 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
       <MDXProvider components={{ a: Link }}>
         <div className={styles.appContainer}>
           <Navbar />
-          {/* Wrapping content with a div to allow for a display: block parent */}
+          {/* Wrapping content with a ShapesBackground to allow for shapes in the background and a display: block parent */}
-          <div className={styles.contentContainer}>
+          <ShapesBackground>
             <Layout>
               <Component {...pageProps} />
             </Layout>
-          </div>
+          </ShapesBackground>
           <Footer />
         </div>
       </MDXProvider>