Add: Layout component

Author: rebecatschiedel

components/Layout.js

@@ -0,0 +1,13 @@
+import Nav from "./Nav";
+import styles from "../styles/Layout.module.css";
+
+export default function Layout({ children }) {
+  return (
+    <>
+      <Nav />
+      <div className={styles.container}>
+        <main className={styles.main}>{children}</main>
+      </div>
+    </>
+  );
+}

pages/_app.js

@@ -1,8 +1,13 @@
 // import App from 'next/app'
+import Layout from "../components/Layout";
 import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />;
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  );
 }
 
 // Only uncomment this method if you have blocking data requirements for

pages/index.js

@@ -1,5 +1,4 @@
 import Head from "next/head";
-import Nav from "../components/Nav";
 
 export default function Home() {
   return (
@@ -8,7 +7,6 @@ export default function Home() {
         <title>Web Dev Path</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Nav />
       <main>
         <h1 className="title">&lt; Web Dev wannabe? /&gt;</h1>
         <div className="description">
@@ -63,24 +61,6 @@ export default function Home() {
       </footer>
 
       <style jsx>{`
-        .container {
-          min-height: 100vh;
-          padding: 0 0.5rem;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-        }
-
-        main {
-          padding: 5rem 0;
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-        }
-
         .divider {
           color: #000;
           background-color: #000;
@@ -200,21 +180,6 @@ export default function Home() {
           }
         }
       `}</style>
-
-      <style jsx global>{`
-        html,
-        body {
-          padding: 0;
-          margin: 0;
-          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
-            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
-            sans-serif;
-        }
-
-        * {
-          box-sizing: border-box;
-        }
-      `}</style>
     </div>
   );
 }

styles/Layout.module.css

@@ -0,0 +1,17 @@
+.container {
+  min-height: 100vh;
+  padding: 0 0.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.main {
+  padding: 3rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}