Adjust general styling

Author: mariana-caldas

components/Footer.js

@@ -1,13 +1,12 @@
 import Link from "next/link";
 import footerStyles from "../styles/Footer.module.css";
-import layoutStyles from "../styles/Layout.module.css";
 import { linksNav, linksSocial } from "../utils/links";
 
 export default function Footer() {
   return (
     <footer className={footerStyles.footer}>
       <div
-        className={`${layoutStyles.widthContainer} ${footerStyles.container}`}
+        className={footerStyles.container}
       >
         <div className={footerStyles.columnLeft}>
           <ul className={footerStyles.footerList}>
@@ -50,9 +49,11 @@ export default function Footer() {
           </div>
         </div>
       </div>
-      <p className={`${layoutStyles.widthContainer} ${footerStyles.copyright}`}>
-        Web Dev Path 2021. All rights reserved.
-      </p>
+      <div className={footerStyles.copyright}>
+        <p>
+          Web Dev Path 2021. All rights reserved.
+        </p>
+      </div>
     </footer>
   );
 }

components/Layout.js

@@ -6,7 +6,7 @@ export default function Layout({ children }) {
   return (
     <>
       <Nav />
-      <div className={`${styles.widthContainer} ${styles.container}`}>
+      <div className={styles.container}>
         <main className={styles.main}>{children}</main>
       </div>
       <Footer />

components/Nav.js

@@ -1,7 +1,6 @@
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import styles from "../styles/Nav.module.css";
-import layoutStyles from "../styles/Layout.module.css";
 import { linksNav } from "../utils/links";
 
 export default function Nav() {
@@ -24,7 +23,7 @@ export default function Nav() {
   return (
     <header className={styles.header}>
       <div
-        className={`${styles.navContainer} ${styles.row} ${layoutStyles.widthContainer}`}
+        className={`${styles.navContainer} ${styles.row}`}
       >
         <div className={styles.align}>
           <Link href="/">

styles/Footer.module.css

@@ -1,5 +1,6 @@
 .footer {
   width: 100%;
+  background-color: #eaeaea;
 }
 
 .footerList {
@@ -8,10 +9,10 @@
 }
 
 .container {
-  padding: 1rem 0;
-  margin: 1rem;
-  border-top: 1px solid #666;
-  border-bottom: 1px solid #666;
+  border-bottom: 1px solid #bebebe;
+  max-width: 80%;
+  margin: 0 auto;
+  padding: 2rem 0;
 }
 
 .columnLeft {
@@ -34,10 +35,6 @@
   height: 4.5em;
 }
 
-.subscribe {
-  text-align: center;
-}
-
 .subscribe h2 {
   margin-bottom: 0.8rem;
   font-size: 1.8rem;
@@ -53,6 +50,27 @@
   font-size: 1rem;
   color: #000;
 }
+.subscribe input {
+  height: 2.4rem;
+  width: 75%;
+  border-radius: 5px 0 0 5px;
+  text-indent: 5%;
+  border:1px solid #bebebe;
+}
+
+.subscribe button {
+  height: 2.4rem;
+  width: 25%;
+  border-radius: 0 5px 5px 0;
+  background-color: #696969;
+  color: #fff;
+  border: 1px solid #696969;
+  text-transform: uppercase;
+}
+
+.subscribe button:hover{
+  opacity: 0.6;
+}
 
 .socialMedia {
   margin: 1.8rem 0 1rem;
@@ -64,6 +82,10 @@
   margin-left: 1rem;
 }
 
+.socialMedia img {
+  height: 2rem;
+}
+
 .socialMedia img:hover {
   opacity: 65%;
 }
@@ -72,13 +94,14 @@
   font-size: 0.8rem;
   color: #696969;
   text-align: center;
+  margin: 0 auto;
+  width: 80%;
+  padding: 0.5rem 0;
 }
 
 @media (min-width: 578px) {
   .container {
-    margin: 0 auto;
     display: flex;
-    flex-direction: row;
     justify-content: space-between;
   }
 
@@ -93,35 +116,16 @@
     flex-direction: column;
   }
 
-  .subscribe {
-    text-align: left;
-  }
-
   .subscribe h2 {
     margin-top: 0.5rem;
   }
 
-  .subscribe input {
-    height: 1.8rem;
-    width: 65%;
-  }
-
-  .subscribe button {
-    height: 1.8rem;
-    width: 30%;
-  }
-
   .socialMedia {
     justify-content: flex-end;
     margin: 1rem 1rem 0.5rem 0;
   }
 
-  .socialMedia img {
-    height: 2.5rem;
-  }
-
   .copyright {
-    margin: 1rem auto;
     text-align: left;
   }
 }

styles/Home.module.css

@@ -1,8 +1,7 @@
-.divider {
-  color: #000;
-  background-color: #000;
-  height: 1px;
+hr.divider {
+  border-top: 1px solid #eaeaea;
   width: 100%;
+  margin: 4rem 0;
 }
 
 .title a {
@@ -19,18 +18,16 @@
 .title {
   margin: 0;
   line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title {
+  font-size: 2.5rem;
   text-align: center;
 }
 
 .description {
   line-height: 1.5;
   font-size: 1.5rem;
   text-align: center;
-  padding: 0 1rem;
+  max-width: 90%;
+  margin: 0 auto;
 }
 
 .grid {
@@ -72,6 +69,13 @@
   line-height: 1.5;
 }
 
+
+@media (min-width: 1024px) {
+  .title {
+    font-size: 4rem;
+  }
+}
+
 @media (max-width: 600px) {
   .grid {
     width: 100%;

styles/Layout.module.css

@@ -1,22 +1,16 @@
-.widthContainer {
-  max-width: 80%;
-  margin: 0 auto;
-}
-
 .container {
   min-height: 100vh;
   padding: 0 0.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
+  width: 100%;
+  margin: 0 auto;
 }
 
 .main {
   padding: 3rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
+}
+
+@media (min-width: 1024px){
+  .container {
+    width: 80%;
+  }
 }

styles/Nav.module.css

@@ -1,6 +1,7 @@
 .navContainer {
   width: 80%;
   position: relative;
+  margin: 0 auto;
 }
 
 .header {