- Spent too long adding a rotating gradient

css/style.css

@@ -1,23 +1,41 @@
 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
+@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
+
 
 body {
-    background-color: #111;
+    background-color: #222;
 }
 
 .navbar {
     background: linear-gradient(-95deg, #1a9fff, #946beb);
+    font-family: "Source Sans 3";
 }
 
 .navbar .dropdown-menu {
+    background-color: #222;
+}
+
+/* .btn-dark {
+    background-color: #111;
+} */
+
+.btn {
+    font-family: "Source Sans 3", sans-serif; 
     background-color: #111;
 }
 
-.btn-dark {
-    background-color: #111;
+.btn:hover, button {
+    background-color: #222;
+    border: 1px white solid;
 }
 
-#lead-jumbotron {
+.jumbotron {
     background: linear-gradient(45deg, #1a9fff, #946beb);
     color: white;
     border: 1px white solid;
+    font-family: "Source Sans 3", sans-serif;
+}
+
+.jumbotron h1 {
+    font-family: "Nunito Sans", sans-serif;
 }

index.html

@@ -96,7 +96,7 @@
         <main class="container">
 
             <!-- Lead Jumbotron -->
-            <div class="p-2 mb-4 mt-4 bg-body-tertiary rounded-3" id="lead-jumbotron">
+            <div class="p-2 mb-4 mt-4 bg-body-tertiary rounded-3 jumbotron">
                 <div class="container-fluid py-5">
                     <h1 class="display-5 fw-bold">Your all-in-one emulation package for the Steam Deck</h1>
                     <p class="col-md-8 fs-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed ante
@@ -104,7 +104,7 @@
                         erat, nec vehicula arcu dapibus sed.</p>
                     <a type="button" class="align-center" target="_blank" rel="noopener noreferrer"
                         href="https://flathub.org/apps/details/net.retrodeck.retrodeck">
-                        <img src="assets/icons/flathub.webp">
+                        <img width='200' alt='Download on Flathub' src='https://flathub.org/api/badge?locale=en'/>
                     </a>
                 </div>
             </div>
@@ -152,7 +152,7 @@
             <!-- End Carousel -->
 
             <!-- Donate Jumbotron -->
-            <div class="p-2 mb-4 bg-body-tertiary rounded-3" id="lead-jumbotron">
+            <div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron">
                 <div class="container-fluid py-4">
                     <h1 class="display-5 fw-bold">We can't do this alone</h1>
                     <p class="col-md-8 fs-4">RetroDECK is run by volunteers. If you appreciate our work, please consider
@@ -169,6 +169,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
         crossorigin="anonymous"></script>
+    <script src="scripts/gradient.js" type="module"></script>
 </body>
 
 </html>

scripts/gradient.js

@@ -0,0 +1,17 @@
+let gradientAngle = 45;
+
+let jumbotronElems = document.getElementsByClassName('jumbotron');
+const gradientInterval = setInterval(function() {
+    updateGradientAngle();
+}, 50);
+console.log(jumbotronElems.length)
+
+function updateGradientAngle() {
+    gradientAngle += 1
+    if (gradientAngle > 360) {
+        gradientAngle = 0;
+    }
+    for (let i=0; i<jumbotronElems.length; i++) {
+        jumbotronElems[i].style.background = `linear-gradient(${gradientAngle}deg, #1a9fff, #946beb)`;
+    }
+}