mirror of
https://github.com/RetroDECK/RetroDECK-Website.git
synced 2024-11-22 06:55:37 +00:00
Fix layout of buttons
This commit is contained in:
Adam Iannazzone
parent
4d03b47d97
commit
17b10c6172
|
|
@ -40,10 +40,6 @@ nav i.bi {
|
||||||
font-size: small;
|
font-size: small;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
|
||||||
border-top: var(--rd-purple) solid 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link:hover, .nav-link.show {
|
.nav-link:hover, .nav-link.show {
|
||||||
background: var(--rd-purple);
|
background: var(--rd-purple);
|
||||||
border: white solid 1px;
|
border: white solid 1px;
|
||||||
|
|
@ -62,6 +58,18 @@ a.dropdown-item:hover {
|
||||||
background: var(--rd-blue);
|
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 Styles */
|
||||||
.jumbotron {
|
.jumbotron {
|
||||||
background: linear-gradient(45deg, var(--rd-purple) 30%, var(--rd-blue));
|
background: linear-gradient(45deg, var(--rd-purple) 30%, var(--rd-blue));
|
||||||
|
|
@ -79,6 +87,10 @@ a.dropdown-item:hover {
|
||||||
font-size: larger;
|
font-size: larger;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.jumbotron .btn:hover svg {
|
||||||
|
fill: white;
|
||||||
|
}
|
||||||
|
|
||||||
/* Link Styles */
|
/* Link Styles */
|
||||||
.jumbotron p a, footer a, a.btn {
|
.jumbotron p a, footer a, a.btn {
|
||||||
color: var(--rd-purple);
|
color: var(--rd-purple);
|
||||||
|
|
|
||||||
74
index.html
74
index.html
|
|
@ -124,11 +124,18 @@
|
||||||
|
|
||||||
<!-- Jumbotron -->
|
<!-- Jumbotron -->
|
||||||
<div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin">
|
<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 -->
|
<!-- First section -->
|
||||||
<div class="row align-items-center">
|
<div class="row align-items-center">
|
||||||
<div class="col-md-8">
|
<div class="col-md-8">
|
||||||
<h1 class="display-md-5 jumbo-header">Your all-in-one emulation package for the Steam Deck</h1>
|
<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>
|
</div>
|
||||||
|
|
||||||
<!-- Flathub Link -->
|
<!-- Flathub Link -->
|
||||||
|
|
@ -137,10 +144,11 @@
|
||||||
href="https://flathub.org/apps/details/net.retrodeck.retrodeck">
|
href="https://flathub.org/apps/details/net.retrodeck.retrodeck">
|
||||||
<div class="row align-items-center">
|
<div class="row align-items-center">
|
||||||
<div class="col-4">
|
<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>
|
||||||
<div class="col-8 text-start">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -149,17 +157,6 @@
|
||||||
|
|
||||||
</div>
|
</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 -->
|
<!-- End First Section -->
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
@ -191,32 +188,35 @@
|
||||||
|
|
||||||
<!-- Donate Appeal -->
|
<!-- Donate Appeal -->
|
||||||
<div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin">
|
<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 -->
|
<!-- First section -->
|
||||||
<div class="row align-items-center">
|
<div class="row align-items-center">
|
||||||
<div class="col-md-8">
|
<div class="col-md-8">
|
||||||
<h2 class="display-md-5 jumbo-header">We can't do this alone!</h2>
|
<h2 class="display-md-5 jumbo-header">We can't do this alone!</h2>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Flathub 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
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<!-- End Flathub Link -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Content -->
|
|
||||||
<div class="row">
|
|
||||||
<p class="fs-md-4">
|
<p class="fs-md-4">
|
||||||
RetroDECK is run by volunteers.
|
RetroDECK is run by volunteers.
|
||||||
If you appreciate our work, please consider code contribution or donating to us or our sibling projects.
|
If you appreciate our work, please consider code contribution or donating to us or our sibling projects.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 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/">
|
||||||
|
<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 Donate/Help Link -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- End First Section -->
|
<!-- End First Section -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -228,18 +228,18 @@
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
<footer class="container-fluid pt-2 pb-2">
|
<footer class="container-fluid pt-2 pb-2">
|
||||||
<div class="row">
|
<div class="row justify-content-between">
|
||||||
<div class="col text-center">
|
<div class="col float-start">
|
||||||
Created by <a target="_blank" rel="noopener noreferrer" href="https://github.com/jiannazzone">Adam
|
Created by <a target="_blank" rel="noopener noreferrer" href="https://github.com/jiannazzone">Adam
|
||||||
Iannazzone</a> and the RetroDECK team.
|
Iannazzone</a> and the RetroDECK team.
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="col align-content-end">
|
<div class="col align-content-end">
|
||||||
<div class="form-check form-switch float-end">
|
<div class="form-check form-switch float-end">
|
||||||
<input class="form-check-input" id="reduce-motion-switch" type="checkbox" role="switch"
|
<input class="form-check-input" id="pixel-font-switch" type="checkbox" role="switch"
|
||||||
id="reduceMotionSwitch" onchange="reduceMotion()">
|
id="reduceMotionSwitch" checked onchange="pixelFontToggle()">
|
||||||
<label class="form-check-label" for="reduceMotionSwitch">Reduce motion</label>
|
<label class="form-check-label" for="reduceMotionSwitch">Retro Fonts</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<!-- End Footer -->
|
<!-- End Footer -->
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue