mirror of
https://github.com/RetroDECK/RetroDECK-Website.git
synced 2024-11-21 14:35:38 +00:00
Style adjustments to features
This commit is contained in:
Adam Iannazzone
parent
97e54f8355
commit
687b9d035c
|
|
@ -44,10 +44,6 @@ nav i.bi {
|
|||
}
|
||||
|
||||
nav .nav-link:hover, nav .nav-link.show {
|
||||
/* background: var(--rd-purple);
|
||||
border: white solid 1px;
|
||||
border-radius: 5px;
|
||||
margin: -1px; */
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -103,32 +99,44 @@ footer {
|
|||
border-bottom: var(--rd-purple) 5px solid;
|
||||
}
|
||||
|
||||
#feature-card-row, #screenshot-row {
|
||||
#feature-row {
|
||||
flex-wrap: nowrap;
|
||||
scrollbar-width: none;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
.feature-container {
|
||||
transition: 0.5s;
|
||||
cursor: pointer;
|
||||
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 {
|
||||
background: var(--rd-blue);
|
||||
border: white 2px solid;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
scale: 80%;
|
||||
transition: 0.5s;
|
||||
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 {
|
||||
color: white;
|
||||
font-family: var(--pixel-font);
|
||||
|
|
|
|||
164
index.html
164
index.html
|
|
@ -223,121 +223,65 @@
|
|||
<!-- End Jumbotron -->
|
||||
|
||||
<!-- Screenshot/Feature Section -->
|
||||
<div class="container-fluid mb-4" id="features" height="100px">
|
||||
|
||||
<!-- Screenshot Images -->
|
||||
<!-- <div class="container mb-2">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div id="screenshotCarousel" class="carousel carousel-fade slide mb-4 position-relative">
|
||||
<div class="carousel-inner" id="deck-carousel">
|
||||
<div class="carousel-item active">
|
||||
<img src="assets/screens/large/screen01.png" class="d-block w-100 rounded-3"
|
||||
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 class="container-fluid mb-4 pt-2" id="features">
|
||||
<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" id="active-feature">
|
||||
<img src="assets/screens/large/screen01.png" class="img-fluid screenshot mx-auto" 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> -->
|
||||
|
||||
<!-- Screenshots v2 -->
|
||||
<div class="row mb-2 overflow-x-scroll" id="screenshot-row">
|
||||
<div class="col-4 screenshot" id="empty-screenshot"></div>
|
||||
<div class="col-4 screenshot" id="active-screenshot">
|
||||
<img src="assets/screens/large/screen01.png" class="d-block w-100 rounded-3"
|
||||
alt=""/>
|
||||
<div class="col-8 col-sm-6 feature-container" id="">
|
||||
<img src="assets/screens/large/screen02.png" class="img-fluid screenshot" 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 class="col-4 screenshot" id="">
|
||||
<img src="assets/screens/large/screen02.png" class="d-block w-100 rounded-3"
|
||||
alt=""/>
|
||||
<div class="col-8 col-sm-6 feature-container" id="">
|
||||
<img src="assets/screens/large/screen03.png" class="img-fluid screenshot" 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 class="col-4 screenshot" id="">
|
||||
<img src="assets/screens/large/screen03.png" class="d-block w-100 rounded-3"
|
||||
alt=""/>
|
||||
<div class="col-8 col-sm-6 feature-container" id="">
|
||||
<img src="assets/screens/large/screen04.png" class="img-fluid screenshot" 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 class="col-4 screenshot" id="">
|
||||
<img src="assets/screens/large/screen04.png" class="d-block w-100 rounded-3"
|
||||
alt=""/>
|
||||
<div class="col-8 col-sm-6 feature-container" id="">
|
||||
<img src="assets/screens/large/screen05.png" class="img-fluid screenshot" 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 class="col-4 screenshot" id="">
|
||||
<img src="assets/screens/large/screen05.png" class="d-block w-100 rounded-3"
|
||||
alt=""/>
|
||||
<div class="col-8 col-sm-6 feature-container" id="">
|
||||
<img src="assets/screens/large/screen06.png" class="img-fluid screenshot" 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 class="col-4 screenshot" id="">
|
||||
<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 class="col-8 col-sm-6 feature-container empty-feature-container" id=""></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>
|
||||
<!-- End Screenshot/Feature Section -->
|
||||
|
||||
|
|
@ -387,12 +331,12 @@
|
|||
<!-- Footer -->
|
||||
<footer class="container-fluid pt-2 pb-2">
|
||||
<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
|
||||
Iannazzone</a> and the RetroDECK team.
|
||||
</div>
|
||||
<div class="col align-content-end">
|
||||
<div class="form-check form-switch float-end">
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" id="pixel-font-switch" type="checkbox" role="switch"
|
||||
id="reduceMotionSwitch" checked onchange="pixelFontToggle()">
|
||||
<label class="form-check-label" for="reduceMotionSwitch">Retro Fonts</label>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,38 @@
|
|||
const screenshotElems = document.getElementsByClassName('screenshot');
|
||||
const featureCardElems = document.getElementsByClassName('feature-card');
|
||||
const featureContainerElems = document.getElementsByClassName('feature-container');
|
||||
let currentFeature = 1
|
||||
|
||||
for (let i = 0; i < featureCardElems.length; i++) {
|
||||
screenshotElems[i].addEventListener('click', function() {
|
||||
if (i != currentFeature) {
|
||||
updateActiveFeature(i);
|
||||
}
|
||||
})
|
||||
featureCardElems[i].addEventListener('click', function() {
|
||||
for (let i = 0; i < featureContainerElems.length; i++) {
|
||||
featureContainerElems[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) {
|
||||
const lastCurrentFeature = currentFeature;
|
||||
currentFeature = i;
|
||||
|
||||
screenshotElems[i].id = 'active-screenshot';
|
||||
screenshotElems[lastCurrentFeature].id = "";
|
||||
|
||||
featureCardElems[i].id = 'active-feature-card';
|
||||
featureCardElems[lastCurrentFeature].id = "";
|
||||
|
||||
|
||||
featureCardElems[i].scrollIntoView({inline: 'center'});
|
||||
screenshotElems[i].scrollIntoView({inline: 'center'});
|
||||
featureContainerElems[i].id = 'active-feature';
|
||||
featureContainerElems[i].scrollIntoView({block: 'start', inline: 'center'});
|
||||
featureContainerElems[lastCurrentFeature].id = ''
|
||||
}
|
||||
Loading…
Reference in a new issue