Massive Refactor

1 files changed, 82 insertions, 57 deletions

diff --git a/styles.scss b/styles.scss
index 3aea8fe..de1b44e 100644
--- a/styles.scss
+++ b/styles.scss
@@ -1,13 +1,13 @@
-$primary-color: #353535;  /* Grey */
-$secondary-color: #DDD1C7;  /* Tan */
-$accent-color-1: #AD5D4E;  /* Rust */
-$accent-color-2: #18A999;  /* Teal */
-$accent-color-3: #6A9170;  /* Muted Green */
+//Colors
+$foreground-color: #27327b;
+$background-color: #e6e6e6;
+$primary-color: #3eadad;
+$secondary-color: #487143;
+$accent-color: #cfab28;
 
-$dark-grey: #1c1b20;
-
-
-$sans-serif-font: 'Helvetica';
+// Fonts
+$sans-serif-font: 'Josefin Sans';
+$serif-font: 'Josefin Slab';
 
 
 //GLOBAL STYLES
@@ -18,11 +18,36 @@ $sans-serif-font: 'Helvetica';
 
 	background-size: cover;
 	background-repeat: no-repeat;
-	background-color: $secondary-color;
+	background-color: $background-color;
+}
+
+
+body {
+  font-family: $serif-font;
+  font-weight: 400;
+  color: $foreground-color;
+}
 
-	font-family: sans-serif;
+a {
+	font-family: $sans-serif-font;
+	font-weight: 400;
+	color: $foreground-color;
 }
 
+h1, h2, h3, h4, h5 {
+  font-family: $sans-serif-font;
+  font-weight: 700;
+  color: $foreground-color;
+}
+
+html {font-size: 100%;} /* 16px */
+h1 {font-size: 4.210rem; /* 67.36px */}
+h2 {font-size: 3.158rem; /* 50.56px */}
+h3 {font-size: 2.369rem; /* 37.92px */}
+h4 {font-size: 1.777rem; /* 28.48px */}
+h5 {font-size: 1.333rem; /* 21.28px */}
+small {font-size: 0.750rem; /* 12px */}
+
 //MIXIN
 @mixin flexcenter {
 	display: flex;
@@ -30,57 +55,57 @@ $sans-serif-font: 'Helvetica';
 	align-items: center;
 }
 
+// Animation
+@keyframes reveal {
+	0% {
+	  transform: translateY(100%);
+	  opacity: 0;
+	}
+	100% {
+	  transform: translateY(0);
+	  opacity: 1;
+	}
+}
+
 //MAIN CSS
-.landing-page {
-	//overflow-x: hidden;
+.menu-container {
+	position: fixed;
+	top: 0;
+	left: 0;
 	height: 100vh;
 	width: 100%;
-	background-color: $secondary-color;
-
-	.menu-container {
-		position: fixed;
-		top: 0;
-		left: 0;
-		height: 100vh;
-		width: 100%;
-		z-index: 5;
-		opacity: 1;
-		transition: opacity 1500ms;
-		@include flexcenter();
-
-		.menu-wrapper {
-			list-style: none;
-
-			li {
-				margin: 0.5vmin 0;
-				display: flex;
-				justify-content: left;
-
-				a {
-					text-decoration: none;
-					font-weight: 700;
-					font-size: 15vmin;
-					color: rgba(255, 255, 255, 0);
-					-webkit-text-stroke: 0.12vmin $primary-color;
-					transition-duration: 200ms;
-
-					&:hover {
-						color: $primary-color;
-						-webkit-text-stroke: 0px $primary-color;
-					}
-				}
-				
-				span {
-					position: absolute;
-					top: 50%;
-					left: 50%;
-					transform: translate(-50%, -50%);
+	@include flexcenter();
 
-					font-size: 68vmin;
-					font-weight: 900;
-					color: rgba(0, 0, 0, 0.2);
-				}
+	.menu-wrapper {
+		list-style: none;
+	
+		li {
+			margin: 0.5vmin 0;
+			display: flex;
+			justify-content: left;
+			opacity: 0; // Start items as invisible
+			animation: reveal 1s ease-out forwards;
+			
+			&:nth-child(1) {
+			animation-delay: 0.15s; // Delay for the first item
+			}
+			&:nth-child(2) {
+			animation-delay: 0.3s; // Delay for the second item
+			}
+			&:nth-child(3) {
+			animation-delay: 0.45s; // Delay for the third item
+			}
+			&:nth-child(4) {
+			animation-delay: 0.6s; // Delay for the fourth item
+			}
+	
+			a {
+			text-decoration: none;
+			font-weight: 700;
+			font-size: 15vmin;
+			color: $foreground-color; // Assuming you want to use your color variable
 			}
 		}
 	}
 }
+