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;
|
||||
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 { 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 */}
|
||||
<div className={styles.contentContainer}>
|
||||
{/* Wrapping content with a ShapesBackground to allow for shapes in the background and a display: block parent */}
|
||||
<ShapesBackground>
|
||||
<Layout>
|
||||
<Component {...pageProps} />
|
||||
</Layout>
|
||||
</div>
|
||||
</ShapesBackground>
|
||||
<Footer />
|
||||
</div>
|
||||
</MDXProvider>
|
||||
|
|
Loading…
Reference in New Issue