landing navbar

eduversa · Nov 11, 2023 · 7e0cdf4 · 7e0cdf4
1 parent c7cff65
commit 7e0cdf4
Showing 1 changed file with 5 additions and 42 deletions.
diff --git a/styles/containers/landing_navbar.scss b/styles/containers/landing_navbar.scss
@@ -10,28 +10,24 @@
   justify-content: space-between;
   align-items: center;
   padding: 1rem;
-
   .logo {
     font-size: 1.5rem;
     font-weight: bold;
     margin-right: 1rem;
     position: relative;
-
     a {
       text-decoration: none;
       color: #fff;
       display: flex;
       align-items: center;
       transition: color 0.3s ease, text-shadow 0.3s ease,
         background-color 0.3s ease, transform 0.3s ease;
-
       &:hover {
         color: #ffd700;
         text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
         background-color: rgba(255, 215, 0, 0.2);
         transform: rotate(5deg);
       }
-
       &::before,
       &::after {
         content: "";
@@ -50,22 +46,19 @@
       &::after {
         bottom: -4px;
       }
-
       &:hover::before,
       &:hover::after {
         opacity: 1;
         transform: scaleX(1.5);
       }
     }
   }
-
   .nav-section {
     ul {
       list-style: none;
       display: flex;
       gap: 1rem;
     }
-
     .nav-item {
       font-size: 1.2rem;
       position: relative;
@@ -101,11 +94,9 @@
           transform: scaleX(0);
           transition: transform 0.3s ease;
         }
-
         &:hover::after {
           transform: scaleX(1);
         }
-
         &::before {
           content: "";
           position: absolute;
@@ -120,7 +111,6 @@
           opacity: 0;
           transition: opacity 0.3s ease, transform 0.3s ease;
         }
-
         &:hover::before {
           opacity: 1;
           transform: scaleX(1.5);
@@ -158,7 +148,6 @@
         border-color: #ffd700;
         animation: pulse 1s infinite;
       }
-
       @keyframes pulse {
         0% {
           transform: scale(1);
@@ -175,7 +164,6 @@
         text-decoration: none;
         color: inherit;
       }
-
       &::before {
         content: "";
         position: absolute;
@@ -223,38 +211,14 @@
       }
     }
   }
-
   &:hover {
     background: linear-gradient(
       -90deg,
       hsl(303, 100%, 20%),
       hsl(240, 100%, 28%)
     );
   }
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: linear-gradient(
-      -90deg,
-      hsl(303, 100%, 14%),
-      hsl(240, 100%, 22%)
-    );
-    z-index: -1;
-    transform: scaleX(0);
-    transform-origin: right;
-    transition: transform 0.3s ease;
-  }
-
-  &:hover::before {
-    transform: scaleX(1);
-    transform-origin: left;
-  }
-
+  &::before,
   &::after {
     content: "";
     position: absolute;
@@ -268,13 +232,12 @@
       hsl(240, 100%, 22%)
     );
     z-index: -1;
-    transform: scaleY(0);
-    transform-origin: top;
+    transform: scaleX(0);
+    transform-origin: center;
     transition: transform 0.3s ease;
   }
-
+  &:hover::before,
   &:hover::after {
-    transform: scaleY(1);
-    transform-origin: bottom;
+    transform: scaleX(1);
   }
 }