Move contentContainer back to _app.tsx

This commit is contained in:
Amy 2021-08-19 22:46:34 -04:00
parent 0bbfaa59c4
commit 04ecb67feb
4 changed files with 17 additions and 15 deletions

View File

@ -1,10 +1,3 @@
.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;

View File

@ -4,9 +4,9 @@ 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>
</>
);
}

View File

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

View File

@ -23,12 +23,14 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
<MDXProvider components={{ a: Link }}>
<div className={styles.appContainer}>
<Navbar />
{/* Wrapping content with a ShapesBackground to allow for shapes in the background and a display: block parent */}
{/* Wrapping content with a div to allow for a display: block parent */}
<div className={styles.contentContainer}>
<ShapesBackground>
<Layout>
<Component {...pageProps} />
</Layout>
</ShapesBackground>
</div>
<Footer />
</div>
</MDXProvider>