adds styling to nav

components/Hero.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import styles from '../styles/Hero.module.css';
+
+function Hero() {
+ return (
+ <div className={styles.hero}>
+ <h1>GQLevated</h1>
+ </div>
+ );
+}
+
+export default Hero;

components/Layout.js

@@ -5,11 +5,11 @@ import React from 'react';
 
 function Layout({ children }) {
  return (
- <div className={styles.container}>
- <Nav className={styles.navbar} styles={styles.list} />
+ <>
+ <Nav />
  <main className={styles.main}>{children}</main>
- <Footer styles={styles.list} />
- </div>
+ <Footer />
+ </>
  );
 }
 

components/Nav.js

@@ -1,12 +1,13 @@
 import Link from 'next/link';
 import React from 'react';
+import styles from '../styles/Nav.module.css';
 
-function Nav({ className, styles }) {
+function Nav() {
  return (
- <div className={className}>
+ <div className={styles.navbar}>
  <nav>
- <ul className={styles}>
- <li>
+ <ul className={styles.ul}>
+ <li className={styles.navitem}>
  <Link href='/'>Home</Link>
  </li>
  <li>

pages/index.js

@@ -2,11 +2,12 @@ import Head from 'next/head';
 import Image from 'next/image';
 import Nav from '../components/Nav';
 import styles from '../styles/Layout.module.css';
+import Hero from '../components/Hero';
 
 export default function Home() {
  return (
  <>
- <h1>Hello World</h1>
+ <Hero />
  </>
  );
 }

styles/Hero.module.css

@@ -0,0 +1,5 @@
+.hero {
+ display: flex;
+ align-content: flex-start;
+ justify-content: flex-start;
+}

styles/Layout.module.css

@@ -1,15 +1,16 @@
 .container {
- padding: 0 0;
+ /* padding: 0; */
+ padding: 0 1rem;
 }
 
 .main {
- min-height: 100vh;
- padding: 4rem 0;
+ min-height: 80vh;
+ padding: 2rem 2.5rem;
  flex: 1;
  display: flex;
- flex-direction: column;
+ /* flex-direction: column;
  justify-content: center;
- align-items: center;
+ align-items: center; */
 }
 
 .footer {
@@ -113,15 +114,3 @@
  flex-direction: column;
  }
 }
-
-.navbar {
- display: flex;
- justify-content: center;
- padding: 2rem 4rem;
- background-color: blue;
- list-style-type: none;
-}
-
-.list {
- list-style: none;
-}

styles/Nav.module.css

@@ -0,0 +1,22 @@
+.navbar {
+ display: flex;
+ padding: 0 2rem;
+ background-color: var(--primary-color);
+ box-shadow: rgba(0, 0, 0, 0.5);
+ list-style-type: none;
+ height: 3rem;
+ align-items: center;
+}
+
+.ul {
+ display: flex;
+ /* flex-direction: row; */
+ /* flex-wrap: wrap; */
+ /* width: 100%; */
+ color: var(--primary-text);
+}
+
+.navitem {
+ display: block;
+ border-bottom: 3px solid var(--secondary-color);
+}

styles/globals.css

@@ -1,9 +1,15 @@
+:root {
+ --primary-color: #2f3c48;
+ --secondary-color: #5c8f94;
+ --primary-text: #fff;
+}
+
 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;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+ box-sizing: border-box;
 }
 
 a {
@@ -12,5 +18,22 @@ a {
 }
 
 * {
- box-sizing: border-box;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+h1 {
+ font-size: 3rem;
+ padding: 0;
+ margin: 0;
+}
+
+ul {
+ padding: 0;
+ margin: 0;
+}
+
+li {
+ margin: 0 1rem;
 }