- Rearrange icons/screenshots

- Add flathub button
This commit is contained in:
Adam Iannazzone 2024-04-18 10:08:06 -04:00
parent 82d66183f0
commit b87269ccde
14 changed files with 55 additions and 41 deletions

1
assets/icons/flathub.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
assets/icons/flathub.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 KiB

View file

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

View file

Before

Width:  |  Height:  |  Size: 9 KiB

After

Width:  |  Height:  |  Size: 9 KiB

View file

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

View file

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 82 KiB

View file

Before

Width:  |  Height:  |  Size: 112 KiB

After

Width:  |  Height:  |  Size: 112 KiB

View file

Before

Width:  |  Height:  |  Size: 110 KiB

After

Width:  |  Height:  |  Size: 110 KiB

View file

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 90 KiB

View file

Before

Width:  |  Height:  |  Size: 129 KiB

After

Width:  |  Height:  |  Size: 129 KiB

View file

Before

Width:  |  Height:  |  Size: 122 KiB

After

Width:  |  Height:  |  Size: 122 KiB

View file

@ -15,11 +15,11 @@
<meta name="description" <meta name="description"
content="RetroDECK is a polished and beginner-friendly environment for playing your retro games on Steam Deck, available with just one click from the Discover app."> content="RetroDECK is a polished and beginner-friendly environment for playing your retro games on Steam Deck, available with just one click from the Discover app.">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="assets/img/icon_circle_2_180x180.png"> <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="assets/img/icon_circle_2_180x180.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/icon_circle_16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="assets/icons/icon_circle_16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/icon_circle_1_32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="assets/icons/icon_circle_1_32x32.png">
<link rel="icon" type="image/png" sizes="180x180" href="assets/img/icon_circle_2_180x180.png"> <link rel="icon" type="image/png" sizes="180x180" href="assets/icons/icon_circle_2_180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/img/icon_circle_3_192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="assets/icons/icon_circle_3_192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="assets/img/icon_circle_4_512x512.png"> <link rel="icon" type="image/png" sizes="512x512" href="assets/icons/icon_circle_4_512x512.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&amp;display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700">
@ -93,60 +93,73 @@
</nav> </nav>
<div class="container-fluid"> <div class="container-fluid">
<main class="container pt-3"> <main class="container">
<!-- Lead Jumbotron --> <!-- Lead Jumbotron -->
<div class="p-5 mb-4 bg-body-tertiary rounded-3" id="lead-jumbotron"> <div class="p-2 mb-4 mt-4 bg-body-tertiary rounded-3" id="lead-jumbotron">
<div class="container-fluid py-5"> <div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Your all-in-one emulation package for the Steam Deck</h1> <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 finibus nulla imperdiet mattis id id augue. Donec maximus molestie tempor. Nulla efficitur ex erat, nec vehicula arcu dapibus sed.</p> <p class="col-md-8 fs-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed ante
<a class="btn btn-dark btn-lg" type="button" target="_blank" rel="noopener noreferrer" href="https://flathub.org/apps/details/net.retrodeck.retrodeck"> finibus nulla imperdiet mattis id id augue. Donec maximus molestie tempor. Nulla efficitur ex
<i class="bi bi-download"></i> Get RetroDECK 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">
</a> </a>
</div> </div>
</div> </div>
<!-- End Jumbotron --> <!-- End Jumbotron -->
<!-- Screenshot Carousel --> <!-- Screenshot Carousel -->
<div id="screenshotCarousel" class="carousel slide" data-bs-ride="carousel"> <div id="screenshotCarousel" class="carousel slide mb-4" data-bs-ride="carousel">
<div class="carousel-inner"> <div class="carousel-inner">
<div class="carousel-item active"> <div class="carousel-item active">
<img src="/assets/img/screen01.jpeg" class="d-block w-100 rounded-3" alt="The RetroDECK logo displayed on a Steam Deck"> <img src="/assets/img/screens/screen01.jpeg" class="d-block w-100 rounded-3"
</div> alt="The RetroDECK logo displayed on a Steam Deck">
<div class="carousel-item"> </div>
<img src="/assets/img/screen02.jpeg" class="d-block w-100 rounded-3" alt="The RetroDECK icon visible in a Steam Library"> <div class="carousel-item">
</div> <img src="/assets/img/screens/screen02.jpeg" class="d-block w-100 rounded-3"
<div class="carousel-item"> alt="The RetroDECK icon visible in a Steam Library">
<img src="/assets/img/screen03.jpeg" class="d-block w-100 rounded-3" alt="Steam Deck quick settings in the foreground with the RetroDECK interface behind it"> </div>
</div> <div class="carousel-item">
<div class="carousel-item"> <img src="/assets/img/screens/screen03.jpeg" class="d-block w-100 rounded-3"
<img src="/assets/img/screen04.jpeg" class="d-block w-100 rounded-3" alt="One of the ES-DE Themes with SEGA Genesis visible"> alt="Steam Deck quick settings in the foreground with the RetroDECK interface behind it">
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img src="/assets/img/screen05.jpeg" class="d-block w-100 rounded-3" alt="Sonic the Hedgehog 2 (SEGA Genesis) on the Steam Deck"> <img src="/assets/img/screens/screen04.jpeg" class="d-block w-100 rounded-3"
</div> alt="One of the ES-DE Themes with SEGA Genesis visible">
<div class="carousel-item"> </div>
<img src="/assets/img/screen06.jpeg" class="d-block w-100 rounded-3" alt="A list of TurboGrafx games in the ES-DE frontend"> <div class="carousel-item">
</div> <img src="/assets/img/screens/screen05.jpeg" class="d-block w-100 rounded-3"
alt="Sonic the Hedgehog 2 (SEGA Genesis) on the Steam Deck">
</div>
<div class="carousel-item">
<img src="/assets/img/screens/screen06.jpeg" class="d-block w-100 rounded-3"
alt="A list of TurboGrafx games in the ES-DE frontend">
</div>
</div> </div>
<button class="carousel-control-prev" type="button" data-bs-target="#screenshotCarousel" data-bs-slide="prev"> <button class="carousel-control-prev" type="button" data-bs-target="#screenshotCarousel"
<span class="carousel-control-prev-icon" aria-hidden="true"></span> data-bs-slide="prev">
<span class="visually-hidden">Previous</span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button> </button>
<button class="carousel-control-next" type="button" data-bs-target="#screenshotCarousel" data-bs-slide="next"> <button class="carousel-control-next" type="button" data-bs-target="#screenshotCarousel"
<span class="carousel-control-next-icon" aria-hidden="true"></span> data-bs-slide="next">
<span class="visually-hidden">Next</span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button> </button>
</div> </div>
<!-- End Carousel --> <!-- End Carousel -->
<!-- Donate Jumbotron --> <!-- Donate Jumbotron -->
<div class="p-5 mb-4 bg-body-tertiary rounded-3" id="lead-jumbotron"> <div class="p-2 mb-4 bg-body-tertiary rounded-3" id="lead-jumbotron">
<div class="container-fluid py-4"> <div class="container-fluid py-4">
<h1 class="display-5 fw-bold">We can't do this alone</h1> <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 donating to us or our sibling projects.</p> <p class="col-md-8 fs-4">RetroDECK is run by volunteers. If you appreciate our work, please consider
<a class="btn btn-dark btn-lg" type="button" target="_blank" rel="noopener noreferrer" href="https://flathub.org/apps/details/net.retrodeck.retrodeck"> donating to us or our sibling projects.</p>
<i class="bi bi-balloon-heart"></i> Learn how to donate <a class="btn btn-dark btn-lg" type="button" target="_blank" rel="noopener noreferrer"
href="https://flathub.org/apps/details/net.retrodeck.retrodeck">
<i class="bi bi-balloon-heart"></i> Learn More
</a> </a>
</div> </div>
</div> </div>