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 {
|
.shapesContainer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
|
@ -4,9 +4,9 @@ import styles from "./ShapesBackground.module.css";
|
||||||
|
|
||||||
export function ShapesBackground(props: { children: React.ReactNode }) {
|
export function ShapesBackground(props: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
<div className={styles.contentContainer}>
|
<>
|
||||||
<div className={styles.shapesContainer}></div>
|
<div className={styles.shapesContainer}></div>
|
||||||
{props.children}
|
{props.children}
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,3 +3,10 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 100vh;
|
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 }}>
|
<MDXProvider components={{ a: Link }}>
|
||||||
<div className={styles.appContainer}>
|
<div className={styles.appContainer}>
|
||||||
<Navbar />
|
<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 */}
|
||||||
<ShapesBackground>
|
<div className={styles.contentContainer}>
|
||||||
<Layout>
|
<ShapesBackground>
|
||||||
<Component {...pageProps} />
|
<Layout>
|
||||||
</Layout>
|
<Component {...pageProps} />
|
||||||
</ShapesBackground>
|
</Layout>
|
||||||
|
</ShapesBackground>
|
||||||
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
</MDXProvider>
|
</MDXProvider>
|
||||||
|
|
Loading…
Reference in New Issue