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

Implement carousel with standard Bootstrap for better responsiveness

Browse source
This commit is contained in:
Adam Iannazzone 2024-09-26 13:04:58 -04:00
parent 95a80fb3ba
commit 755e161eaa
2 changed files with 168 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
css/style.css
View file

@ -99,25 +99,25 @@ footer {
border-bottom: var(--rd-purple) 5px solid; border-bottom: var(--rd-purple) 5px solid;
} }
#feature-row { /* #feature-row {
flex-wrap: nowrap; flex-wrap: nowrap;
scrollbar-width: none; scrollbar-width: none;
scroll-behavior: smooth; scroll-behavior: smooth;
} } */
.feature-container { /* .feature-container {
transition: 0.5s; transition: 0.5s;
cursor: pointer; cursor: pointer;
scale: 80%; scale: 80%;
scroll-margin-top: 20px; scroll-margin-top: 20px;
max-height: fit-content; max-height: fit-content;
} } */
.feature-container#active-feature { /* .feature-container#active-feature {
transition: 0.5s; transition: 0.5s;
scale: 100%; scale: 100%;
cursor:auto; cursor:auto;
} } */
.empty-feature-container { .empty-feature-container {
visibility: hidden; visibility: hidden;

254
index.html
View file

@ -151,79 +151,81 @@
<!-- Main Content --> <!-- Main Content -->
<main class="container-fluid px-0 mt-4"> <main class="container-fluid px-0 mt-4">
<!-- Jumbotron --> <!-- Jumbotron -->
<div class="container p-2 mb-4 bg-body-tertiary rounded-3 jumbotron"> <div class="container px-2">
<div class="container-fluid align-items-center"> <div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron">
<!-- First section --> <div class="container-fluid align-items-center">
<div class="row align-items-center"> <!-- First section -->
<div class="col-md-8"> <div class="row align-items-center">
<h1 class="display-md-5 jumbo-header">Your all-in-one emulation package for the Steam Deck</h1> <div class="col-md-8">
<p class="fs-md-4"> <h1 class="display-md-5 jumbo-header">Your all-in-one emulation package for the Steam Deck</h1>
Powered by <a target="_blank" rel="noopener noreferrer" href="https://es-de.org/">ES-DE</a>, <p class="fs-md-4">
RetroDECK combines all of the best open-source emulators into a single application. Powered by <a target="_blank" rel="noopener noreferrer" href="https://es-de.org/">ES-DE</a>,
Pair that with a best-in-class Steam Deck controller configuration, and you'll be in retro RetroDECK combines all of the best open-source emulators into a single application.
gaming Pair that with a best-in-class Steam Deck controller configuration, and you'll be in retro
paradise. gaming
</p> paradise.
</div> </p>
</div>
<!-- Flathub Link --> <!-- Flathub Link -->
<div class="col-md-4 text-center"> <div class="col-md-4 text-center">
<a type="button" class="btn btn-dark align-center p-2" target="_blank" rel="noopener noreferrer" <a type="button" class="btn btn-dark align-center p-2" target="_blank" rel="noopener noreferrer"
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">
<svg fill="#946beb" role="img" height="2rem" class="px-2" viewBox="0 0 24 24" <svg fill="#946beb" role="img" height="2rem" class="px-2" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<title>Flathub</title> <title>Flathub</title>
<path <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" /> 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> </svg>
</div>
<div class="col-8 text-start">
<div class="row">
<div class="col">Get it on</div>
</div> </div>
<div class="row"> <div class="col-8 text-start">
<div class="col">Flathub</div> <div class="row">
<div class="col">Get it on</div>
</div>
<div class="row">
<div class="col">Flathub</div>
</div>
</div> </div>
</div> </div>
</div> </a>
</a> </div>
</div> <!-- End Flathub Link -->
<!-- End Flathub Link -->
</div>
<!-- End First Section -->
<hr />
<!-- Second Section -->
<div class="row align-items-center">
<div class="col">
<h2 class="display-md-5 jumbo-header">No need to configure emulators</h2>
<h2 class="display-md-5 jumbo-header">(But you can if you want)</h2>
</div>
</div>
<div class="row"></div>
<p class="fs-md-4">
With RetroDECK, everything has been pre-configured for optimal performance and quality on the Steam
Deck.
If you want to dig deeper, you tinker with common emulator settings in the RetroDECK Configurator.
And don’t worry – you can always reset with a single click.
</p>
</div> </div>
<!-- End First Section --> <!-- End Second Section -->
<hr />
<!-- Second Section -->
<div class="row align-items-center">
<div class="col">
<h2 class="display-md-5 jumbo-header">No need to configure emulators</h2>
<h2 class="display-md-5 jumbo-header">(But you can if you want)</h2>
</div>
</div>
<div class="row"></div>
<p class="fs-md-4">
With RetroDECK, everything has been pre-configured for optimal performance and quality on the Steam
Deck.
If you want to dig deeper, you tinker with common emulator settings in the RetroDECK Configurator.
And don’t worry – you can always reset with a single click.
</p>
</div> </div>
<!-- End Second Section -->
</div> </div>
<!-- End Jumbotron --> <!-- End Jumbotron -->
<!-- Screenshot/Feature Section --> <!-- Screenshot/Feature Section -->
<div class="container-fluid mb-4 pt-2" id="features"> <!-- <div class="container-fluid mb-4 pt-2" id="features">
<div class="row mb-2 overflow-x-scroll" id="feature-row"> <div class="row mb-2 overflow-x-scroll" id="feature-row">
<div class="col-8 col-sm-6 feature-container empty-feature-container" id=""></div> <div class="col-8 col-sm-6 feature-container empty-feature-container" id=""></div>
<div class="col-8 col-sm-6 feature-container" id="active-feature"> <div class="col-8 col-sm-6 feature-container" id="active-feature">
@ -282,45 +284,113 @@
</div> </div>
<div class="col-8 col-sm-6 feature-container empty-feature-container" id=""></div> <div class="col-8 col-sm-6 feature-container empty-feature-container" id=""></div>
</div> </div>
</div> </div> -->
<!-- End Screenshot/Feature Section --> <!-- End Screenshot/Feature Section -->
<!-- Donate Appeal --> <!-- Screenshots and Features as Bootstrap Carousel -->
<div class="container p-2 mb-4 bg-body-tertiary rounded-3 jumbotron"> <div class="container-fluid mb-4" id="features">
<div class="container-fluid py-2 align-items-center"> <div class="carousel slide py-2" id="features-carousel">
<!-- First section --> <div class="carousel-inner">
<div class="row align-items-center"> <div class="carousel-item active feature-container">
<div class="col-md-8"> <img src="assets/screens/large/screen01.png" class="d-block w-75 screenshot" alt="" />
<h2 class="display-md-5 jumbo-header">We can't do this alone!</h2> <div class="feature-card px-5 mt-2 mx-auto">
<p class="fs-md-4"> <h3>Feature 1</h3>
RetroDECK is run by volunteers. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
If you appreciate our work, please consider code contribution or donating to us or our sodales
sibling projects. mattis. Praesent eget lacinia risus, ut bibendum est.</p>
</p> </div>
</div> </div>
<!-- Donate/Help Link --> <div class="carousel-item feature-container">
<div class="col-md-4 text-center"> <img src="assets/screens/large/screen02.png" class="d-block w-75 screenshot" alt="" />
<a type="button" class="btn btn-dark align-center p-2" target="_blank" rel="noopener noreferrer" <div class="feature-card px-5 mt-2 mx-auto">
href="https://retrodeck.readthedocs.io/en/latest/wiki_about/donations-licenses/"> <h3>Feature 2</h3>
<div class="row align-items-center"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
<div class="col-4"> sodales
<svg xmlns="http://www.w3.org/2000/svg" height="2rem" fill="#946beb" mattis. Praesent eget lacinia risus, ut bibendum est.</p>
class="bi bi-balloon-heart-fill px-2" viewBox="0 0 16 16"> </div>
<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> </div>
<!-- End Donate/Help Link -->
<div class="carousel-item feature-container">
<img src="assets/screens/large/screen03.png" class="d-block w-75 screenshot" alt="" />
<div class="feature-card px-5 mt-2 mx-auto">
<h3>Feature 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
sodales
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
</div>
</div>
<div class="carousel-item feature-container">
<img src="assets/screens/large/screen04.png" class="d-block w-75 screenshot" alt="" />
<div class="feature-card px-5 mt-2 mx-auto">
<h3>Feature 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
sodales
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
</div>
</div>
<div class="carousel-item feature-container">
<img src="assets/screens/large/screen05.png" class="d-block w-75 screenshot" alt="" />
<div class="feature-card px-5 mt-2 mx-auto">
<h3>Feature 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
sodales
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#features-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#features-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- Screenshots and Features as Bootstrap Carousel -->
<!-- Donate Appeal -->
<div class="container px-2">
<div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron">
<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>
<!-- 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 -->
</div> </div>
<!-- End First Section -->
</div> </div>
</div> </div>
<!-- End Donate Appeal --> <!-- End Donate Appeal -->
@ -350,7 +420,7 @@
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<!-- <script src="scripts/gradient.js"></script> --> <!-- <script src="scripts/gradient.js"></script> -->
<script src="scripts/features.js"></script> <!-- <script src="scripts/features.js"></script> -->
<script src="scripts/accessibility.js"></script> <script src="scripts/accessibility.js"></script>
</body> </body>