From 17b10c61728e2654eae81d6a00c34b24449fd556 Mon Sep 17 00:00:00 2001
From: Adam Iannazzone <46025473+jiannazzone@users.noreply.github.com>
Date: Mon, 23 Sep 2024 18:14:08 -0400
Subject: [PATCH] Fix layout of buttons

---
 css/style.css | 20 ++++++++++++----
 index.html    | 66 +++++++++++++++++++++++++--------------------------
 2 files changed, 49 insertions(+), 37 deletions(-)

diff --git a/css/style.css b/css/style.css
index 15ad16e..ba8687a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -40,10 +40,6 @@ nav i.bi {
     font-size: small;
 }
 
-footer {
-    border-top: var(--rd-purple) solid 5px;
-}
-
 .nav-link:hover, .nav-link.show {
     background: var(--rd-purple);
     border: white solid 1px;
@@ -62,6 +58,18 @@ a.dropdown-item:hover {
     background: var(--rd-blue);
 }
 
+footer {
+    border-top: var(--rd-purple) solid 5px;
+}
+
+#pixel-font-switch:checked {
+    background-color: #946beb;
+    border-color: white;
+}
+#pixel-font-switch {
+    border-color: #946beb;
+}
+
 /* Jumbotron Styles */
 .jumbotron {
     background: linear-gradient(45deg, var(--rd-purple) 30%, var(--rd-blue));
@@ -79,6 +87,10 @@ a.dropdown-item:hover {
     font-size: larger;
 }
 
+.jumbotron .btn:hover svg {
+    fill: white;
+}
+
 /* Link Styles */
 .jumbotron p a, footer a, a.btn {
     color: var(--rd-purple);
diff --git a/index.html b/index.html
index 706f8e7..27d37e7 100644
--- a/index.html
+++ b/index.html
@@ -124,11 +124,18 @@
 
         <!-- Jumbotron -->
         <div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin">
-            <div class="container-fluid py-5 align-items-center">
+            <div class="container-fluid align-items-center">
                 <!-- First section -->
                 <div class="row align-items-center">
                     <div class="col-md-8">
                         <h1 class="display-md-5 jumbo-header">Your all-in-one emulation package for the Steam Deck</h1>
+                        <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
+                            gaming
+                            paradise.
+                        </p>
                     </div>
 
                     <!-- Flathub Link -->
@@ -137,10 +144,11 @@
                                 href="https://flathub.org/apps/details/net.retrodeck.retrodeck">
                                 <div class="row align-items-center">
                                     <div class="col-4">
-                                        <!-- <img class="bi" src="assets/logos/flathub.svg"/> -->
+                                        <svg fill="#946beb" role="img" height="2rem" class="px-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Flathub</title><path d="M6.068 0a6 6 0 0 0-6 6 6 6 0 0 0 6 6 6 6 0 0 0 5.998-6 6 6 0 0 0-5.998-6Zm9.15.08a1.656 1.656 0 0 0-1.654 1.656v8.15a1.656 1.656 0 0 0 2.483 1.434l7.058-4.074a1.656 1.656 0 0 0 0-2.869l-1.044-.604-6.014-3.47a1.656 1.656 0 0 0-.828-.223Zm3.575 13.135a.815.815 0 0 0-.816.818v2.453h-2.454a.817.817 0 1 0 0 1.635h2.454v2.453a.817.817 0 1 0 1.635 0v-2.453h2.452a.817.817 0 1 0 0-1.635h-2.453v-2.453a.817.817 0 0 0-.818-.818zM2.865 13.5a2.794 2.794 0 0 0-2.799 2.8v4.9c0 1.55 1.248 2.8 2.8 2.8h4.9c1.55 0 2.8-1.25 2.8-2.8v-4.9c0-1.55-1.25-2.8-2.8-2.8Z"/></svg>
                                     </div>
                                     <div class="col-8 text-start">
-                                        Download on Flathub
+                                        <div class="row"><div class="col">Get it on</div></div>
+                                        <div class="row"><div class="col">Flathub</div></div>
                                     </div>
                                 </div>
                             </a>
@@ -149,17 +157,6 @@
 
                 </div>
 
-                <!-- Content -->
-                <div class="row">
-                    <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
-                        gaming
-                        paradise.
-                    </p>
-                </div>
-
                 <!-- End First Section -->
 
                 <hr />
@@ -191,32 +188,35 @@
 
         <!-- Donate Appeal -->
         <div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin">
-            <div class="container-fluid py-5 align-items-center">
+            <div class="container-fluid py-2 align-items-center">
                 <!-- First section -->
                 <div class="row align-items-center">
                     <div class="col-md-8">
                         <h2 class="display-md-5 jumbo-header">We can't do this alone!</h2>
+                        <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 projects.
+                        </p>
                     </div>
 
-                    <!-- Flathub Link -->
+                    <!-- Donate/Help Link -->
                     <div class="col-md-4 text-center">
                         <a type="button" class="btn btn-dark align-center p-2" target="_blank" rel="noopener noreferrer"
                             href="https://retrodeck.readthedocs.io/en/latest/wiki_about/donations-licenses/">
-                            <i class="bi bi-balloon-heart pe-2"></i>Learn More
+                            <div class="row align-items-center">
+                                <div class="col-4">
+                                    <svg xmlns="http://www.w3.org/2000/svg" height="2rem" fill="#946beb" class="bi bi-balloon-heart-fill px-2" viewBox="0 0 16 16">
+                                        <path fill-rule="evenodd" d="M8.49 10.92C19.412 3.382 11.28-2.387 8 .986 4.719-2.387-3.413 3.382 7.51 10.92l-.234.468a.25.25 0 1 0 .448.224l.04-.08c.009.17.024.315.051.45.068.344.208.622.448 1.102l.013.028c.212.422.182.85.05 1.246-.135.402-.366.751-.534 1.003a.25.25 0 0 0 .416.278l.004-.007c.166-.248.431-.646.588-1.115.16-.479.212-1.051-.076-1.629-.258-.515-.365-.732-.419-1.004a2 2 0 0 1-.037-.289l.008.017a.25.25 0 1 0 .448-.224l-.235-.468ZM6.726 1.269c-1.167-.61-2.8-.142-3.454 1.135-.237.463-.36 1.08-.202 1.85.055.27.467.197.527-.071.285-1.256 1.177-2.462 2.989-2.528.234-.008.348-.278.14-.386"/>
+                                    </svg>
+                                </div>
+                                <div class="col-8 text-start">Learn More</div>
+                            </div>
                         </a>
                     </div>
-                    <!-- End Flathub Link -->
+                    <!-- End Donate/Help Link -->
 
                 </div>
 
-                <!-- Content -->
-                <div class="row">
-                    <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 projects.
-                    </p>
-                </div>
-
                 <!-- End First Section -->
 
             </div>
@@ -228,18 +228,18 @@
 
     <!-- Footer -->
     <footer class="container-fluid pt-2 pb-2">
-        <div class="row">
-            <div class="col text-center">
+        <div class="row justify-content-between">
+            <div class="col float-start">
                 Created by <a target="_blank" rel="noopener noreferrer" href="https://github.com/jiannazzone">Adam
                     Iannazzone</a> and the RetroDECK team.
             </div>
-            <!-- <div class="col align-content-end">
+            <div class="col align-content-end">
                 <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()">
-                    <label class="form-check-label" for="reduceMotionSwitch">Reduce motion</label>
+                    <input class="form-check-input" id="pixel-font-switch" type="checkbox" role="switch"
+                        id="reduceMotionSwitch" checked onchange="pixelFontToggle()">
+                    <label class="form-check-label" for="reduceMotionSwitch">Retro Fonts</label>
                 </div>
-            </div> -->
+            </div>
         </div>
     </footer>
     <!-- End Footer -->