Xargon/RetroDECK-Website
1
0
Fork 0
mirror of https://github.com/RetroDECK/RetroDECK-Website.git synced 2024-11-25 08:05:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Style adjustments to features

Browse source
This commit is contained in:
Adam Iannazzone 2024-09-24 19:16:37 -04:00
parent 97e54f8355
commit 687b9d035c
3 changed files with 103 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
css/style.css
View file

@ -44,10 +44,6 @@ nav i.bi {
} }
nav .nav-link:hover, nav .nav-link.show { nav .nav-link:hover, nav .nav-link.show {
/* background: var(--rd-purple);
border: white solid 1px;
border-radius: 5px;
margin: -1px; */
color: white; color: white;
} }
@ -103,32 +99,44 @@ footer {
border-bottom: var(--rd-purple) 5px solid; border-bottom: var(--rd-purple) 5px solid;
} }
#feature-card-row, #screenshot-row { #feature-row {
flex-wrap: nowrap; flex-wrap: nowrap;
scrollbar-width: none; scrollbar-width: none;
scroll-behavior: smooth; scroll-behavior: smooth;
} }
.screenshot { .feature-container {
transition: 0.5s;
cursor: pointer;
scale: 80%; scale: 80%;
scroll-margin-top: 20px;
max-height: fit-content;
}
.feature-container#active-feature {
transition: 0.5s;
scale: 100%;
}
.empty-feature-container {
visibility: hidden;
}
img.screenshot {
border: white 2px solid;
border-radius: 5px;
margin: auto;
width: 150%;
} }
.feature-card { .feature-card {
background: var(--rd-blue); background: var(--rd-blue);
border: white 2px solid; border: white 2px solid;
border-radius: 5px; border-radius: 5px;
cursor: pointer; transition: 0.5s;
scale: 80%; width: 75%;
} }
.feature-card#active-feature-card, .screenshot#active-screenshot {
scale: 100%;
transition: 0.25s;
}
.feature-card#empty-feature, .screenshot#empty-screenshot {
visibility: hidden;
}
.feature-card h3 { .feature-card h3 {
color: white; color: white;
font-family: var(--pixel-font); font-family: var(--pixel-font);

164
index.html
View file

@ -223,121 +223,65 @@
<!-- End Jumbotron --> <!-- End Jumbotron -->
<!-- Screenshot/Feature Section --> <!-- Screenshot/Feature Section -->
<div class="container-fluid mb-4" id="features" height="100px"> <div class="container-fluid mb-4 pt-2" id="features">
<div class="row mb-2 overflow-x-scroll" id="feature-row">
<!-- Screenshot Images --> <div class="col-8 col-sm-6 feature-container empty-feature-container" id=""></div>
<!-- <div class="container mb-2"> <div class="col-8 col-sm-6 feature-container" id="active-feature">
<div class="row"> <img src="assets/screens/large/screen01.png" class="img-fluid screenshot mx-auto" alt="" />
<div class="col"> <div class="feature-card px-2 mt-2 mx-auto">
<div id="screenshotCarousel" class="carousel carousel-fade slide mb-4 position-relative"> <h3>Feature 1</h3>
<div class="carousel-inner" id="deck-carousel"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
<div class="carousel-item active"> sodales
<img src="assets/screens/large/screen01.png" class="d-block w-100 rounded-3" mattis. Praesent eget lacinia risus, ut bibendum est.</p>
alt="The RetroDECK logo displayed on a Steam Deck">
</div>
<div class="carousel-item">
<img src="assets/screens/large/screen02.png" class="d-block w-100 rounded-3"
alt="The RetroDECK icon visible in a Steam Library">
</div>
<div class="carousel-item">
<img src="assets/screens/large/screen03.png" class="d-block w-100 rounded-3"
alt="Steam Deck quick settings in the foreground with the RetroDECK interface behind it">
</div>
<div class="carousel-item">
<img src="assets/screens/large/screen04.png" class="d-block w-100 rounded-3"
alt="One of the ES-DE Themes with SEGA Genesis visible">
</div>
<div class="carousel-item">
<img src="assets/screens/large/screen05.png" 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/screens/large/screen06.png" class="d-block w-100 rounded-3"
alt="A list of TurboGrafx games in the ES-DE frontend">
</div>
</div>
<button class="carousel-control-prev z-2" type="button" data-bs-target="#screenshotCarousel"
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 z-2" type="button" data-bs-target="#screenshotCarousel"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div> </div>
</div> </div>
</div> --> <div class="col-8 col-sm-6 feature-container" id="">
<img src="assets/screens/large/screen02.png" class="img-fluid screenshot" alt="" />
<!-- Screenshots v2 --> <div class="feature-card px-2 mt-2 mx-auto">
<div class="row mb-2 overflow-x-scroll" id="screenshot-row"> <h3>Feature 1</h3>
<div class="col-4 screenshot" id="empty-screenshot"></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
<div class="col-4 screenshot" id="active-screenshot"> sodales
<img src="assets/screens/large/screen01.png" class="d-block w-100 rounded-3" mattis. Praesent eget lacinia risus, ut bibendum est.</p>
alt=""/> </div>
</div> </div>
<div class="col-4 screenshot" id=""> <div class="col-8 col-sm-6 feature-container" id="">
<img src="assets/screens/large/screen02.png" class="d-block w-100 rounded-3" <img src="assets/screens/large/screen03.png" class="img-fluid screenshot" alt="" />
alt=""/> <div class="feature-card px-2 mt-2 mx-auto">
<h3>Feature 1</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>
<div class="col-4 screenshot" id=""> <div class="col-8 col-sm-6 feature-container" id="">
<img src="assets/screens/large/screen03.png" class="d-block w-100 rounded-3" <img src="assets/screens/large/screen04.png" class="img-fluid screenshot" alt="" />
alt=""/> <div class="feature-card px-2 mt-2 mx-auto">
<h3>Feature 1</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>
<div class="col-4 screenshot" id=""> <div class="col-8 col-sm-6 feature-container" id="">
<img src="assets/screens/large/screen04.png" class="d-block w-100 rounded-3" <img src="assets/screens/large/screen05.png" class="img-fluid screenshot" alt="" />
alt=""/> <div class="feature-card px-2 mt-2 mx-auto">
<h3>Feature 1</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>
<div class="col-4 screenshot" id=""> <div class="col-8 col-sm-6 feature-container" id="">
<img src="assets/screens/large/screen05.png" class="d-block w-100 rounded-3" <img src="assets/screens/large/screen06.png" class="img-fluid screenshot" alt="" />
alt=""/> <div class="feature-card px-2 mt-2 mx-auto">
<h3>Feature 1</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>
<div class="col-4 screenshot" id=""> <div class="col-8 col-sm-6 feature-container empty-feature-container" id=""></div>
<img src="assets/screens/large/screen06.png" class="d-block w-100 rounded-3"
alt=""/>
</div>
<div class="col-4 screenshot" id="empty-screenshot"></div>
</div> </div>
<!-- Feature List -->
<div class="row mb-2 overflow-x-scroll" id="feature-card-row">
<div class="col-4 feature-card" id="empty-feature"></div>
<div class="col-4 feature-card" id="active-feature-card">
<h3>Feature 1</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 class="col-4 feature-card" id="">
<h3>Feature 2</h3>
<p class="">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 class="col-4 feature-card" id="">
<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 class="col-4 feature-card" id="">
<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 class="col-4 feature-card" id="">
<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 class="col-4 feature-card" id="">
<h3>Feature 6</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 class="col-4 feature-card" id="empty-feature"></div>
</div>
</div> </div>
<!-- End Screenshot/Feature Section --> <!-- End Screenshot/Feature Section -->
@ -387,12 +331,12 @@
<!-- Footer --> <!-- Footer -->
<footer class="container-fluid pt-2 pb-2"> <footer class="container-fluid pt-2 pb-2">
<div class="row justify-content-between"> <div class="row justify-content-between">
<div class="col float-start"> <div class="col-12 col-sm-6">
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-12 col-sm-6">
<div class="form-check form-switch float-end"> <div class="form-check form-switch">
<input class="form-check-input" id="pixel-font-switch" type="checkbox" role="switch" <input class="form-check-input" id="pixel-font-switch" type="checkbox" role="switch"
id="reduceMotionSwitch" checked onchange="pixelFontToggle()"> id="reduceMotionSwitch" checked onchange="pixelFontToggle()">
<label class="form-check-label" for="reduceMotionSwitch">Retro Fonts</label> <label class="form-check-label" for="reduceMotionSwitch">Retro Fonts</label>

41
scripts/features.js
View file

@ -1,31 +1,38 @@
const screenshotElems = document.getElementsByClassName('screenshot'); const featureContainerElems = document.getElementsByClassName('feature-container');
const featureCardElems = document.getElementsByClassName('feature-card');
let currentFeature = 1 let currentFeature = 1
for (let i = 0; i < featureCardElems.length; i++) { for (let i = 0; i < featureContainerElems.length; i++) {
screenshotElems[i].addEventListener('click', function() { featureContainerElems[i].addEventListener('click', function() {
if (i != currentFeature) { if (i != currentFeature) {
updateActiveFeature(i); updateActiveFeature(i);
} }
}) })
featureCardElems[i].addEventListener('click', function() { }
if (i != currentFeature) {
updateActiveFeature(i); document.addEventListener('keyup', keyControl);
function keyControl(e) {
if (e.code == 'ArrowRight') {
if (currentFeature < featureContainerElems.length-2) {
updateActiveFeature(currentFeature + 1);
} else {
updateActiveFeature(1);
} }
}) }
if (e.code == 'ArrowLeft') {
if (currentFeature > 1) {
updateActiveFeature(currentFeature - 1);
} else {
updateActiveFeature(featureContainerElems.length-2);
}
}
} }
function updateActiveFeature(i) { function updateActiveFeature(i) {
const lastCurrentFeature = currentFeature; const lastCurrentFeature = currentFeature;
currentFeature = i; currentFeature = i;
screenshotElems[i].id = 'active-screenshot'; featureContainerElems[i].id = 'active-feature';
screenshotElems[lastCurrentFeature].id = ""; featureContainerElems[i].scrollIntoView({block: 'start', inline: 'center'});
featureContainerElems[lastCurrentFeature].id = ''
featureCardElems[i].id = 'active-feature-card';
featureCardElems[lastCurrentFeature].id = "";
featureCardElems[i].scrollIntoView({inline: 'center'});
screenshotElems[i].scrollIntoView({inline: 'center'});
} }