Update header.css

ProjectEvergreen · May 14, 2024 · 883a5b8 · 883a5b8
1 parent 4c2a37e
commit 883a5b8
Showing 1 changed file with 32 additions and 32 deletions.
diff --git a/src/components/header/header.css b/src/components/header/header.css
@@ -1,25 +1,25 @@
 header {
   box-sizing: border-box;
-  height: 5.5rem;
+  height: var(--size-10);
   width: auto;
-  border: 1px dotted #989898ca;
+  border: var(--border-size-1) dotted #989898ca;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-left: 11rem;
-  padding-right: 11rem;
+  padding-left: var(--size-12);
+  padding-right: var(--size-12);
   margin: 0;
 }
 
 .nav-bar {
   display: flex;
   align-items: center;
-  gap: 1.5rem;
+  gap: var(--size-5);
 }
 
 .nav-bar-menu {
   display: flex;
-  gap: 1.5rem;
+  gap: var(--size-5);
   list-style-type: none;
 }
 
@@ -33,15 +33,15 @@ header {
 
 .social-tray {
   display: flex;
-  gap: 1rem;
+  gap: var(--size-3);
   list-style-type: none;
   background-color: var(--color-gray);
   width: fit-content;
-  border: 1px solid #4d4d4d45;
-  border-radius: 7.5rem;
-  padding: 0.4rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  border: var(--border-size-1) solid #4d4d4d45;
+  border-radius: var(--radius-6);
+  padding: var(--size-2);
+  padding-left: var(--size-3);
+  padding-right: var(--size-3);
   align-items: center;
   justify-content: center;
   cursor: pointer;
@@ -58,20 +58,20 @@ header {
 /* ---MOBILE SCREENS---*/
 @media (max-width: 600px) {
   header {
-    height: 4rem;
+    height: var(--size-9);
     width: 100vw;
-    border: 1px dotted #989898ca;
+    border: var(--border-size-1) dotted #989898ca;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
+    padding-left: var(--size-5);
+    padding-right: var(--size-5);
   }
 
   .nav-bar {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--size-2);
   }
 
   .nav-bar-menu {
@@ -91,15 +91,15 @@ header {
   }
   .mobile-menu-items.active {
     position: fixed;
-    top: 6rem;
-    left: 1.5rem;
+    top: var(--size-10);
+    left: var(--size-5);
     width: 100%;
     height: 100%;
-    z-index: 999;
+    z-index: var(--layer-important);
     display: flex;
     flex-direction: column;
     list-style-type: none;
-    gap: 1rem;
+    gap: var(--size-3);
   }
   .overlay {
     position: fixed;
@@ -112,11 +112,11 @@ header {
   }
   .close-button {
     position: absolute;
-    top: 1.2rem;
-    right: 2.5rem;
+    top: var(--size-4);
+    right: var(--size-7);
     background: none;
     border: none;
-    font-size: 1.5rem;
+    font-size: var(--font-size-4);
     cursor: pointer;
     color: var(--color-secondary);
   }
@@ -125,28 +125,28 @@ header {
 /*-----TABLET SCREENS-----------*/
 @media screen and (min-width: 768px) and (max-width: 960px) {
   header {
-    height: 5.5rem;
+    height: var(--size-10);
     width: auto;
-    border: 1px dotted #989898ca;
+    border: var(--border-size-1) dotted #989898ca;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
+    padding-left: var(--size-5);
+    padding-right: var(--size-5);
     margin: 0;
   }
 }
 /*-----FOLD SCREENS-----------*/
 @media (max-width: 280px) {
   header {
-    height: 5.5rem;
+    height: var(--size-10);
     width: fit-content;
-    border: 1px dotted #989898ca;
+    border: var(--border-size-1) dotted #989898ca;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
+    padding-left: var(--size-2);
+    padding-right: var(--size-2);
     margin: 0;
   }
   .greenwood-logo {