Add color variables, adjust general styling

Author: mariana-caldas

components/Layout.js

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

pages/index.js

@@ -42,14 +42,11 @@ export default function Home() {
         </div>
       </div>
 
-      <div>
-        <h3 className={styles.centerText}>
+      <div className = {`${styles.learn_more} ${styles.centerText}`}>
+        <h3>
           If so, you are probably in the right place and should learn more about
           us
         </h3>
-      </div>
-
-      <div className={styles.centerText}>
         <button className={styles.button}>
           <Link href="/about-us">Learn More</Link>
         </button>

styles/Footer.module.scss

@@ -1,8 +1,9 @@
 @import "mixins";
+@import "variables";
 
 .footer {
 	width: 100%;
-	background-color: #eaeaea;
+	background-color: $primary-bg-color;
 }
 
 .footerList {
@@ -11,7 +12,7 @@
 }
 
 .container {
-	border-bottom: 1px solid #bebebe;
+	border-bottom: 1px solid $primary-bg-color;
 	max-width: 80%;
 	margin: 0 auto;
 	padding: 2rem 0;
@@ -30,7 +31,7 @@
 
 	&:hover,
 	&:focus {
-		color: #666;
+		color: $accent-color;
 	}
 }
 
@@ -53,30 +54,30 @@
 	p {
 		margin-top: 0.2rem;
 		font-size: 0.8rem;
-		color: #696969;
+		color: $accent-color;
 	}
 
 	.text {
 		font-size: 1rem;
-		color: #000;
+		color: $primary-content-color;
 	}
 
 	input {
 		height: 2.4rem;
 		width: 65%;
 		border-radius: 5px 0 0 5px;
 		text-indent: 5%;
-		border: 1px solid #bebebe;
+		border: 1px solid $primary-bg-color;
 	}
 
 	button {
 		height: 2.4rem;
 		width: 35%;
 		border-radius: 0 5px 5px 0;
-		background-color: #696969;
-		color: #fff;
+		background-color: $accent-color;
+		color: $white;
 		font-size: 0.7rem;
-		border: 1px solid #696969;
+		border: 1px solid $accent-color;
 		text-transform: uppercase;
 		@include transition(opacity 0.3s ease);
 
@@ -107,14 +108,14 @@
 
 .copyright {
 	font-size: 0.8rem;
-	color: #696969;
+	color: $accent-color;
 	text-align: center;
 	margin: 0 auto;
 	width: 80%;
 	padding: 0.5rem 0;
 }
 
-@media (min-width: 578px) {
+@media (min-width: $tablet-breakpoint) {
 	.container {
 		display: flex;
 		justify-content: space-between;
@@ -154,4 +155,4 @@
 	.copyright {
 		text-align: left;
 	}
-}
+}

styles/Home.module.scss

@@ -1,8 +1,9 @@
+@import "mixins";
 @import "variables";
 
 hr {
 	&.divider {
-		border-top: 1px solid #eaeaea;
+		border-top: 1px solid $primary-bg-color;
 		width: 100%;
 		margin: 4rem 0;
 	}
@@ -15,7 +16,6 @@ hr {
 	text-align: center;
 
 	a {
-		color: #0070f3;
 		text-decoration: none;
 
 		&:hover,
@@ -32,6 +32,7 @@ hr {
 	text-align: center;
 	max-width: 90%;
 	margin: 0 auto;
+  padding: 2rem 0 4rem;
 }
 
 .centerText {
@@ -59,14 +60,14 @@ hr {
 	align-items: center;
 	justify-content: center;
 	text-decoration: none;
-	border: 2px solid #666;
-	transition: color 0.15s ease, border-color 0.15s ease;
+  @include transition(color .3s ease);
+  box-shadow: inset 0px 0px 0px 1px rgb( 0 0 0 / 15%), 0px 3px 4px 2px rgb(0 0 0 / 10%);
 
 	&:hover,
 	&:focus,
 	&:active {
-		color: #666;
-		border-color: #eaeaea;
+		color: $accent-color;
+		border-color: $primary-bg-color;
 	}
 
 	p {
@@ -78,19 +79,23 @@ hr {
 	}
 }
 
+.learn_more {
+  padding: 4rem 0;
+}
+
 .button {
 	height: 2.4rem;
 	width: 8rem;
 	border-radius: 5px;
-	background-color: #696969;
-	color: #fff;
+	background-color: $accent-color;
+	color: $white;
 	font-size: 0.875rem;
 	border: none;
 	text-transform: uppercase;
 	transition: opacity 0.3s ease;
 
 	&:hover {
-		opacity: 65%;
+		opacity: 0.6;
 		cursor: pointer;
 	}
 }
@@ -114,4 +119,4 @@ hr {
 		width: 90%;
 		min-height: 7rem;
 	}
-}
+}

styles/Nav.module.scss

@@ -31,15 +31,15 @@
 	width: 3em;
 	height: 3em;
 	padding: 0;
-	background-color: transparent;
-	color: black;
+	background-color: $transparent;
+	color: $black;
 	transition: opacity 250ms ease;
 	position: absolute;
 	right: 0;
 
 	&:hover,
 	&:focus {
-		opacity: 0.75;
+		opacity: 0.6;
 	}
 }
 
@@ -53,7 +53,7 @@
 		display: block;
 		margin: 0 auto;
 		height: 3px;
-		background: black;
+		background-color: $primary-content-color;
 	}
 
 	&::before,
@@ -91,11 +91,11 @@
 
 .navLink {
 	text-decoration: none;
-	color: black;
+	color: $primary-content-color;
 
 	&:focus,
 	&:hover {
-		opacity: 0.65;
+		opacity: 0.6;
 	}
 }
 
@@ -135,4 +135,4 @@
 		display: flex;
 		justify-content: space-between;
 	}
-}
+}

styles/_variables.scss

@@ -1,6 +1,15 @@
 // Media Query Breakpoints
 $mobile-breakpoint: 320px;
+$lg-mobile-breakpoint: 578px;
 $tablet-breakpoint: 768px;
 $desktop-breakpoint: 1024px;
 $large-desktop-breakpoint: 1440px;
-$extra-large-breakpoint: 2560px;
+$extra-large-breakpoint: 2560px;
+
+//Colors
+$primary-content-color: #212121;
+$primary-bg-color: #eaeaea;
+$accent-color: #666666;
+$black: #000000;
+$white: #ffffff;
+$transparent: transparent;

styles/globals.scss

@@ -1,11 +1,13 @@
 @import "mixins";
+@import "variables";
 
 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;
+    color: $primary-content-color;
 }
 
 a {