Buncha stuff

assets/logos/flathub.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Created with Vectornator (http://vectornator.io/) -->
+<svg height="100%" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" version="1.1" viewBox="0 0 61.5484 59.106" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs/>
+<clipPath id="ArtboardFrame">
+<rect height="59.106" width="61.5484" x="0" y="0"/>
+</clipPath>
+<g clip-path="url(#ArtboardFrame)" id="Untitled">
+<g opacity="1">
+<path d="M0.0411747 14.209C0.0411747 6.36411 6.40069 0.00458896 14.2456 0.00458896C22.0904 0.00458896 28.4499 6.36411 28.4499 14.209C28.4499 22.0538 22.0904 28.4133 14.2456 28.4133C6.40069 28.4133 0.0411747 22.0538 0.0411747 14.209Z" fill="#FFFFFF" fill-rule="nonzero" opacity="1" stroke="none"/>
+<path d="M8.4263 34.1203L20.0569 34.1203C23.7274 34.1203 26.7029 37.0958 26.7029 40.7663L26.7029 52.397C26.7029 56.0674 23.7274 59.0429 20.0569 59.0429L8.4263 59.0429C4.75584 59.0429 1.78034 56.0674 1.78034 52.397L1.78034 40.7663C1.78034 37.0958 4.75584 34.1203 8.4263 34.1203Z" fill="#FFFFFF" fill-rule="nonzero" opacity="1" stroke="none"/>
+<path d="M59.5293 10.8212L56.9817 9.35042L42.3213 0.886223C41.072 0.164892 39.5328 0.164866 38.2835 0.886155C37.0342 1.60744 36.2646 2.94046 36.2646 4.38304L36.2649 24.2529C36.2649 25.6954 37.0345 27.0284 38.2838 27.7496C39.5331 28.4709 41.0722 28.4709 42.3215 27.7496L59.5294 17.815C60.7788 17.0937 61.5484 15.7607 61.5484 14.3181C61.5484 12.8756 60.7787 11.5426 59.5294 10.8213L59.5293 10.8212Z" fill="#FFFFFF" fill-rule="nonzero" opacity="1" stroke="none"/>
+<path d="M58.6745 46.6484C58.6745 48.0291 57.5629 49.1406 56.1822 49.1406L36.2441 49.1406C34.8634 49.1406 33.7519 48.0291 33.7519 46.6484C33.7519 45.2676 34.8634 44.1561 36.2441 44.1561L56.1822 44.1561C57.5629 44.1561 58.6745 45.2676 58.6745 46.6484ZM46.2132 34.1871C47.5939 34.1871 48.7054 35.2986 48.7054 36.6793L48.7054 56.6174C48.7054 57.9981 47.5939 59.1097 46.2132 59.1097C44.8325 59.1097 43.7209 57.9981 43.7209 56.6174L43.7209 36.6793C43.7209 35.2986 44.8324 34.1871 46.2132 34.1871Z" fill="#FFFFFF" fill-rule="nonzero" opacity="1" stroke="none"/>
+</g>
+</g>
+</svg>

css/style.css

@@ -19,19 +19,23 @@ footer {
     background-color: #222;
 }
 
-/* .btn-dark {
-    background-color: #111;
-} */
-
 .btn {
     font-family: "Source Sans 3", sans-serif; 
+}
+
+/* #flathub-button {
+    background: url('https://flathub.org/api/badge?locale=en');
+    background-size: cover;
+} */
+
+/* .btn-dark {
     background-color: #111;
 }
 
 .btn:hover, button {
     background-color: #222;
     border: 1px white solid;
-}
+} */
 
 .jumbotron, .card-header {
     color: white;

index.html

@@ -120,8 +120,8 @@
 
                 <div class="row align-items-center">
                     <div class="col-md-8">
-                        <h1 class="display-5 fw-bold">Your all-in-one emulation package for the Steam Deck</h1>
+                        <h1 class="display-md-5 fw-bold">Your all-in-one emulation package for the Steam Deck</h1>
-                        <p class="fs-4">
+                        <p class="fs-md-4">
                             Powered by <a target="_blank" rel="noopener noreferrer" href="https://es-de.org/">ES-DE</a>,
                             RetroDECK combines all of the best open-source emulators into a single application.
                             Pair that with a best-in-class Steam Deck controller configuration, and you'll be in retro
@@ -130,10 +130,14 @@
                         </p>
                     </div>
                     <div class="col-md-4 text-center">
-                        <a type="button" class="align-center" target="_blank" rel="noopener noreferrer"
+                        <a type="button" id="flathub-button" class="align-center btn btn-dark btn-lg" target="_blank"
-                            href="https://flathub.org/apps/details/net.retrodeck.retrodeck">
+                            rel="noopener noreferrer" href="https://flathub.org/apps/details/net.retrodeck.retrodeck">
-                            <img width='200' alt='Download on Flathub' src='https://flathub.org/api/badge?locale=en' />
+                            <i class="bi"><img class="img-fluid" alt='Download on Flathub'
+                                    src='assets/logos/flathub.svg' /></i>
+                            <div>Get it on</div>
+                            <div>Flathub</div>
                         </a>
+
                     </div>
                 </div>
             </div>
@@ -143,7 +147,8 @@
         <!-- Screenshot Carousel -->
         <div class="row">
             <div class="col">
-                <div id="screenshotCarousel" class="carousel carousel-fade slide mb-4 position-relative" data-bs-ride="carousel">
+                <div id="screenshotCarousel" class="carousel carousel-fade slide mb-4 position-relative"
+                    data-bs-ride="carousel">
                     <div class="carousel-inner" id="deck-carousel">
                         <div class="carousel-item active">
                             <img src="assets/screens_old/screen01.jpeg" class="d-block w-100 rounded-3"
@@ -196,8 +201,8 @@
                 </div>
                 <div class="row align-items-center">
                     <div class="col-md-8">
-                        <h1 class="display-5 fw-bold">We can't do this alone</h1>
+                        <h1 class="display-md-5 fw-bold">We can't do this alone</h1>
-                        <p class="fs-4">
+                        <p class="fs-md-4">
                             RetroDECK is run by volunteers.
                             If you appreciate our work, please consider code contribution or donating to us or our
                             sibling
@@ -205,7 +210,8 @@
                         </p>
                     </div>
                     <div class="col-md-4 text-center">
-                        <a class="btn btn-dark btn-lg" type="button" target="_blank" rel="noopener noreferrer"
+                        <a class="btn btn-dark btn-lg align-center" type="button" target="_blank"
+                            rel="noopener noreferrer"
                             href="https://retrodeck.readthedocs.io/en/latest/wiki_about/donations-licenses/">
                             <i class="bi bi-balloon-heart"></i> Learn More
                         </a>
@@ -221,11 +227,11 @@
     <!-- Footer -->
     <footer class="container-fluid pt-2 pb-2 sticky-bottom">
         <div class="row justify-content-betweetn">
-            <div class="col-md">
+            <div class="col-sm small">
                 Created by <a target="_blank" rel="noopener noreferrer" href="https://github.com/jiannazzone">Adam
                     Iannazzone</a> and the RetroDECK team.
             </div>
-            <div class="col-md">
+            <div class="col-sm small">
                 <div class="form-check form-switch float-end">
                     <input class="form-check-input" id="reduce-motion-switch" type="checkbox" role="switch"
                         id="reduceMotionSwitch" onchange="reduceMotion()">

scripts/gradient.js

@@ -15,7 +15,9 @@ function reduceMotion() {
     let reduceMotionState = document.getElementById('reduce-motion-switch').checked;
     if (reduceMotionState) {
         clearInterval(gradientInterval);
+        // document.getElementById('screenshotCarousel').classList.remove('ride');
     } else {
+        // document.getElementById('screenshotCarousel').classList.add('ride');
         gradientInterval = setInterval(function () {
             updateGradientAngle();
         }, 100);