Create ShapesBackground component
This commit is contained in:
parent
6f24b266eb
commit
0bbfaa59c4
|
@ -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;
|
||||||
|
}
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -3,10 +3,3 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 100vh;
|
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;
|
|
||||||
}
|
|
||||||
|
|
|
@ -7,6 +7,7 @@ import { DefaultLayout } from "@/components/DefaultLayout";
|
||||||
import { Footer } from "@/components/Footer";
|
import { Footer } from "@/components/Footer";
|
||||||
import { Link } from "@/components/Link";
|
import { Link } from "@/components/Link";
|
||||||
import { Navbar } from "@/components/Navbar";
|
import { Navbar } from "@/components/Navbar";
|
||||||
|
import { ShapesBackground } from "@/components/ShapesBackground";
|
||||||
import { ThemeProvider } from "@/components/Theme";
|
import { ThemeProvider } from "@/components/Theme";
|
||||||
|
|
||||||
import styles from "./_app.module.css";
|
import styles from "./_app.module.css";
|
||||||
|
@ -22,12 +23,12 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
|
||||||
<MDXProvider components={{ a: Link }}>
|
<MDXProvider components={{ a: Link }}>
|
||||||
<div className={styles.appContainer}>
|
<div className={styles.appContainer}>
|
||||||
<Navbar />
|
<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>
|
<Layout>
|
||||||
<Component {...pageProps} />
|
<Component {...pageProps} />
|
||||||
</Layout>
|
</Layout>
|
||||||
</div>
|
</ShapesBackground>
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
</MDXProvider>
|
</MDXProvider>
|
||||||
|
|
Loading…
Reference in New Issue