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

Ya know... stuff

Browse source
This commit is contained in:
Adam Iannazzone 2024-06-18 13:17:39 -04:00
parent ab89801b8a
commit 5046c1cb35
3 changed files with 31 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
css/style.css
View file

@ -65,8 +65,10 @@ footer {
/* Features Page Styles */ /* Features Page Styles */
#feature-jumbotron { #feature-section {
background: #333; background: #222;
border: 1px white solid;
} }
#feature-list { #feature-list {
@ -77,8 +79,9 @@ footer {
.feature-list-item { .feature-list-item {
padding: 0.5rem; padding: 0.5rem;
cursor: pointer; cursor: pointer;
background: #333; background: #222;
border: 1px transparent solid; border: 1px transparent solid;
text-align: right;
} }
#active-feature-item { #active-feature-item {
@ -88,6 +91,8 @@ footer {
.feature-detail-container { .feature-detail-container {
display: none; display: none;
transition: display 1s ease-in-out; transition: display 1s ease-in-out;
border: 1px white solid;
min-height: 100%;
} }
#active-feature-detail { #active-feature-detail {

58
index.html
View file

@ -43,7 +43,7 @@
<div class="collapse navbar-collapse" id="navbarNavDropdown"> <div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#feature-section">Features</a> <a class="nav-link" href="#feature-anchor">Features</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" target="_blank" rel="noopener noreferrer" <a class="nav-link" target="_blank" rel="noopener noreferrer"
@ -112,12 +112,7 @@
<!-- Lead Jumbotron --> <!-- Lead 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"> <div class="container-fluid py-3 py-md-5">
<!-- <div class="row">
<img class="img-fluid p-4" src="assets/logos/logo_unstacked.svg">
</div> -->
<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 fw-bold">Your all-in-one emulation package for the Steam Deck</h1> <h1 class="display-md-5 fw-bold">Your all-in-one emulation package for the Steam Deck</h1>
@ -130,9 +125,6 @@
</p> </p>
</div> </div>
<div class="col-md-4 text-center"> <div class="col-md-4 text-center">
<!-- <div class="m-1 bg-dark p-2 rounded-3" style="--bs-bg-opacity: .8;">
<img class="img-fluid" src="assets/logos/rd-esde-logo.svg">
</div> -->
<a type="button" class="btn btn-dark align-center" target="_blank" rel="noopener noreferrer" <a type="button" class="btn btn-dark align-center" target="_blank" rel="noopener noreferrer"
href="https://flathub.org/apps/details/net.retrodeck.retrodeck"> href="https://flathub.org/apps/details/net.retrodeck.retrodeck">
<img class="pe-2" src="assets/logos/flathub.svg" width="32" height="32">Download on Flathub <img class="pe-2" src="assets/logos/flathub.svg" width="32" height="32">Download on Flathub
@ -192,9 +184,10 @@
</div> </div>
<!-- End Carousel --> <!-- End Carousel -->
<!-- Feature Jumbotron --> <!-- Feature Section -->
<!-- <div id="feature-section" class="p-md-2 mb-md-4 mb-4 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin"> <div id="feature-anchor"></div>
<div class="container-fluid py-md-5 py-3"> <div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin">
<div class="container-fluid py-3 py-md-5">
<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 fw-bold">It's dangerous to go alone! Take these.</h1> <h1 class="display-md-5 fw-bold">It's dangerous to go alone! Take these.</h1>
@ -212,36 +205,13 @@
</div> </div>
</div> </div>
</div> </div>
</div> --> </div>
<!-- End Jumbotron -->
<div id="feature-section"></div> <div class="p-md-2 p-1 mb-4 rounded-3 jumbotron" id="feature-section">
<!-- Feature Section -->
<div class="p-md-2 p-1 mb-4 rounded-3 jumbotron" id="feature-jumbotron">
<div class="container-fluid"> <div class="container-fluid">
<!-- Theme based on https://github.com/anthonycaccese/art-book-next-es-de--> <!-- Theme based on https://github.com/anthonycaccese/art-book-next-es-de-->
<div class="row p-md-2 mb-2 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin">
<div class="container-fluid py-md-5 py-3">
<div class="row align-items-center">
<div class="col-md-8">
<h1 class="display-md-5 fw-bold">It's dangerous to go alone! Take these.</h1>
<p class="fs-md-4">
With more features than you can count, RetroDECK has you covered.
We're adding more with every release, so be sure to check out the Wiki for the latest
updates.
</p>
</div>
<div class="col-md-4 text-center">
<a class="btn btn-dark btn-lg align-center" type="button" target="_blank"
rel="noopener noreferrer" href="https://retrodeck.readthedocs.io/en/latest/">
<i class="bi bi-mortarboard pe-2"></i>Full Documentation
</a>
</div>
</div>
</div>
</div>
<!-- Features --> <!-- Features -->
<div class="row"> <div class="row">
@ -249,14 +219,14 @@
<div class="col-md-4" id="left-feature-column"> <div class="col-md-4" id="left-feature-column">
<!-- Logo Header --> <!-- Logo Header -->
<div class="row p-3 rounded-3 d-none d-md-block" id="feature-logo-container"> <!-- <div class="row p-3 rounded-3 d-none d-md-block" id="feature-logo-container">
<div class="col"> <div class="col">
<img class="img-fluid" src="assets/logos/logo_stacked_esde.png"> <img class="img-fluid" src="assets/logos/logo_stacked_esde.png">
</div> </div>
</div> </div> -->
<!-- Feature List --> <!-- Feature List -->
<div class="h5 row d-flex flex-md-column align-items-center overflow-x-scroll text-end flex-nowrap text-nowrap" id="feature-list"> <div class="h5 row d-flex flex-md-column align-items-center overflow-x-scroll text-end flex-nowrap" id="feature-list">
<!-- Feature 1 --> <!-- Feature 1 -->
<div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" <div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0"
id="active-feature-item"> id="active-feature-item">
@ -287,7 +257,7 @@
<!-- End Left Column --> <!-- End Left Column -->
<!-- Right Column --> <!-- Right Column -->
<div class="col-md-8 p-0 p-sm-2 ps-sm-3" id="feature-detail-column"> <div class="col-md-8 p-0 ps-md-3" id="feature-detail-column">
<div class="my-gradient gradient-spin rounded-3 h-100 pt-0 pt-sm-auto"> <div class="my-gradient gradient-spin rounded-3 h-100 pt-0 pt-sm-auto">
<!-- Feature 1 --> <!-- Feature 1 -->
<div class="feature-detail-container rounded-3 p-3" id="active-feature-detail"> <div class="feature-detail-container rounded-3 p-3" id="active-feature-detail">
@ -420,7 +390,7 @@
<!-- Donate Jumbotron --> <!-- Donate Jumbotron -->
<div class="p-2 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin"> <div class="p-2 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin">
<div class="container-fluid py-4"> <div class="container-fluid py-3 py-md-5">
<div class="row"> <div class="row">
</div> </div>

8
scripts/features.js
View file

@ -41,3 +41,11 @@ function updateActiveFeature(i) {
} }
} }
const widthOutput = document.querySelector("#width");
window.addEventListener('resize', function() {
const featureListElem = document.getElementById('feature-list');
if (widthOutput < 768) {
featureListElem.classList += "text-nowrap";
}
})