Move contentContainer back to _app.tsx
This commit is contained in:
parent
0bbfaa59c4
commit
04ecb67feb
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue