Xargon/RetroDECK-Website
1
0
Fork 0
mirror of https://github.com/RetroDECK/RetroDECK-Website.git synced 2024-11-21 22:45:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix layout of buttons

Browse source
This commit is contained in:
Adam Iannazzone 2024-09-23 18:14:08 -04:00
parent 4d03b47d97
commit 17b10c6172
2 changed files with 49 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
css/style.css
View file

@ -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);

66
index.html
View file

@ -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 -->