fix(navbar): Scroll animation

src/components/navbar.js

@@ -19,8 +19,6 @@ function getNavBar() {
         position: sticky;
         top: 0;
         z-index: 1001;
-        
-        transition: transform calc(2* var(--animation-duration)) ease;
     }
  
     .menu-toggle {
@@ -36,7 +34,7 @@ function getNavBar() {
     .menu-toggle.hidden {
         display: none;
     }
-
+    
     /* Collapsed menu */
     .bar {
         display: flex;
@@ -45,6 +43,14 @@ function getNavBar() {
         background-color: var(--background-color);
     }
 
+    @media (prefers-reduced-motion: no-preference) {
+        .bar {
+            transform: translateY(0);
+            transition: transform var(--animation-duration) ease;
+            will-change: transform;
+        }
+    }
+
     .bar.hidden {
         transform: translateY(-100%);
     }
@@ -62,8 +68,6 @@ function getNavBar() {
         background-color: var(--background-color);
 
         text-transform: uppercase;
-
-        transition: opacity var(--animation-duration);
     }
 
     .menu.open {

style.css

@@ -175,7 +175,7 @@ button:hover .icon {
 footer {
     width: 100%;
     bottom: 2vh;
-    padding: 10% 0;
+    padding: var(--gap) 0;
 
     font-size: small;