Fixes to Navbar (#10)

* Update Navbar.module.scss * Convert styles to global variables * Add more styles to globals
HackDavis · Nov 19, 2024 · b2296d9 · b2296d9
1 parent 4c105c9
commit b2296d9
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 35 deletions.
diff --git a/app/(pages)/_components/Navbar/Navbar.module.scss b/app/(pages)/_components/Navbar/Navbar.module.scss
@@ -4,27 +4,28 @@
 
   .content {
     position: fixed;
-    top: 28px;
+    top: var(--navbar-top-spacing);
     width: 100%;
-    padding-left: 40px;
-    padding-right: 97px;
-    height: 60px;
-    padding-top: 5px;
-    padding-bottom: 5px;
+    padding-left: var(--navbar-padding-left);
+    padding-right: var(--navbar-padding-right);
+    height: var(--navbar-height);
+
 
     display: flex;
     align-items: center;
     justify-content: space-between;
     background-color: transparent;
 
-    background-color: #2BC0F1; // Temporary background color until hero color comes in
+    background-color: var(--navbar-placeholder-background); // Temporary background color until hero color comes in
     transition: background-color 0.6s ease, box-shadow 0.6s ease, top 0.6s ease;
     z-index: 1000;
 
     &.scrolled {
-      background-color: rgba(4, 102, 101, 0.415); // Updated background color when scrolled
-      backdrop-filter: blur(10px);
+      background-color: var(--navbar-scrolled-background); // Updated background color when scrolled
+      backdrop-filter: var(--navbar-scrolled-blur);
       top: 0;
+      padding-top: var(--navbar-scrolled-padding);
+      padding-bottom: var(--navbar-scrolled-padding);
     }
 
     .hdIcon {
@@ -37,60 +38,61 @@
     .navLinks {
       display: flex;
       align-items: center;
-      gap: 48px;
+      gap: var(--navbar-item-spacing);
       align-self: stretch;
     }
 
     .navLink {
-      color: #FFF;
+      color: var(--text-light);
       text-align: center;
-      font-family: var(--font-family-Body);
+      font-family: var(--font-jakarta);
       font-size: var(--Med, 18px);
       font-style: normal;
-      font-weight: 400;
-      line-height: 100%; /* 18px */
-      letter-spacing: 0.36px;
-      position: relative; /* Required for the ::after pseudo-element */
+      font-weight: var(--navbar-text-weight-normal);
+      line-height: 100%;
+      letter-spacing: var(--navbar-text-letter-spacing);
+      position: relative; // Required for the ::after pseudo-element
       transition: color 0.3s;
 
       &:hover {
-        color: #9EE7E5;
+        color: var(--navbar-highlight);
       }
 
       &.active {
-        color: #9EE7E5; // Active section color
-        font-weight: 700;
-  
+        font-weight: var(--navbar-highlight-text-weight);
+        color: var(--navbar-highlight);
+
         // The underline effect
         &::after {
-          content: ''; 
+          content: '';
           position: absolute;
-          bottom: -4px; /* Space between text and the underline */
+          bottom: var(--navbar-highlight-underline-distance); // Space between text and the underline
           left: 0;
           width: 100%;
-          height: 2px;
-          background-color: #9EE7E5;
-          transform: scaleX(1); /* Extend the underline from left to right */
-          transform-origin: left center; /* Start the scale from the left */
-          transition: transform 0.3s ease-out; /* Smooth animation */
+          height: var(--navbar-highlight-underline-height);
+          background-color: var(--navbar-highlight);
+          transform: scaleX(1); // Extend the underline from left to right
+          transform-origin: left center;
+          transition: transform 0.3s ease-out;
         }
       }
 
       &::after {
         content: ''; 
         position: absolute;
-        bottom: -4px;
+        bottom: var(--navbar-highlight-underline-distance);
         left: 0;
-        width: 100%; /* Full width for underline */
-        height: 2px;
-        background-color: #9EE7E5;
-        transform: scaleX(0); /* Start with no width */
-        transform-origin: left center; /* Start the scale from the left */
-        transition: transform 0.3s ease-out; /* Smooth animation */
+        width: 100%;
+        height: var(--navbar-highlight-underline-height);
+        background-color: var(--navbar-highlight);
+        transform: scaleX(0);
+        transform-origin: left center;
+        transition: transform 0.3s ease-out;
       }
 
       &:not(.active)::after {
-        transform: scaleX(0); /* Make underline disappear with the same animation */
+        transform: scaleX(0);
+        background-color: var(--navbar-highlight);
       }
     }
   }

diff --git a/app/(pages)/_globals/styles/globals.scss b/app/(pages)/_globals/styles/globals.scss
@@ -57,6 +57,25 @@
   --text-light: #FFF;
 
   --edge-spacer: 175px;
+
+  /* Navbar Styles */
+  --navbar-top-spacing: 38px;
+  --navbar-padding-left: 40px;
+  --navbar-padding-right: 97px;
+  --navbar-height: 60px;
+  --navbar-text-weight-normal: 400;
+  --navbar-text-letter-spacing: 0.36px;
+  --navbar-item-spacing: 48px;
+  /* Navbar styles for when text is highlighted */
+  --navbar-highlight: #9EE7E5;
+  --navbar-highlight-text-weight: 700;
+  --navbar-highlight-underline-height: 2px;
+  --navbar-highlight-underline-distance: -4px;
+  /* Navbar styles for partial scroll */
+  --navbar-scrolled-background: rgba(4, 102, 101, 0.415);
+  --navbar-scrolled-padding: 5px;
+  --navbar-scrolled-blur: blur(10px);
+  --navbar-placeholder-background: #2BC0F1;
 }
 
 * {