ui issue (#105)

overrides/assets/landing/home.js

@@ -6,20 +6,20 @@ document.addEventListener('scroll', function(event) {
     let newOpacity = (scrollTop / maxScroll);
     newOpacity = Math.max(0.25, Math.min(newOpacity, 1));
     gradient[0].style.opacity = newOpacity;
-    animateSection('.fade-in');
-    animateSection('.fade-in-2');
-    animateSection('.fade-in-3');
+    animateSection('.fade-in', 0.1); // Why use GTFS?
+    animateSection('.fade-in-2', 0.1); // Two Formats in One Standard
+    animateSection('.fade-in-3'); // Help develop the future of GTFS
 });
 
-function animateSection(querySelectorAll) {
+function animateSection(querySelectorAll, delayIncrement = 0.2) {
     const fadeInElements = document.querySelectorAll(querySelectorAll);
     const baseDelay = 0.5; // Base delay in seconds
     fadeInElements.forEach(function(element, index) {
         const position = element.getBoundingClientRect().top;
         const windowHeight = window.innerHeight;
 
         // Calculate delay based on index
-        const delay = baseDelay * (index * 0.2);
+        const delay = baseDelay * (index * delayIncrement);
 
         // Apply the delay to the transition
         element.style.transitionDelay = `${delay}s`;

overrides/assets/stylesheets/extra.css

@@ -17,7 +17,6 @@
   --md-primary-fg-color: #ffff00;
   --md-primary-fg-color--dark: #cccc00;
   --md-secondary-fg-color: #1d64f2;
-  --md-accent-fg-color: red;
   --md-highlight-color: #c6def4;
   --md-secondary-fg-color-white: #ffffff;
   --md-secondary-fg-color-gray: #f8f8f8;
@@ -106,10 +105,6 @@
 
 /** global header end **/
 
-.md-top:hover {
-  background-color: var(--md-primary-fg-color);
-}
-
 /* h1 style */
 .md-typeset h1 {
   font-size: 180%;