diff --git a/components/ShapesBackground.module.css b/components/ShapesBackground.module.css index 535a0a0f..a2ffd00c 100644 --- a/components/ShapesBackground.module.css +++ b/components/ShapesBackground.module.css @@ -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; diff --git a/components/ShapesBackground.tsx b/components/ShapesBackground.tsx index 70c6c58f..a3fa7812 100644 --- a/components/ShapesBackground.tsx +++ b/components/ShapesBackground.tsx @@ -4,9 +4,9 @@ import styles from "./ShapesBackground.module.css"; export function ShapesBackground(props: { children: React.ReactNode }) { return ( -
+ <>
{props.children} -
+ ); } diff --git a/pages/_app.module.css b/pages/_app.module.css index 1fd1df46..81ee01b5 100644 --- a/pages/_app.module.css +++ b/pages/_app.module.css @@ -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; +} diff --git a/pages/_app.tsx b/pages/_app.tsx index 0ec7d753..c023a528 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -23,12 +23,14 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
- {/* 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 */} +
+ + + + + +