mirror of
https://github.com/RetroDECK/RetroDECK-Website.git
synced 2024-11-25 08:05: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 {
|
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);
|
||||||
|
|
|
||||||
154
index.html
154
index.html
|
|
@ -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">
|
|
||||||
<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>
|
|
||||||
</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>
|
|
||||||
<div class="col-4 screenshot" id="">
|
|
||||||
<img src="assets/screens/large/screen02.png" class="d-block w-100 rounded-3"
|
|
||||||
alt=""/>
|
|
||||||
</div>
|
|
||||||
<div class="col-4 screenshot" id="">
|
|
||||||
<img src="assets/screens/large/screen03.png" class="d-block w-100 rounded-3"
|
|
||||||
alt=""/>
|
|
||||||
</div>
|
|
||||||
<div class="col-4 screenshot" id="">
|
|
||||||
<img src="assets/screens/large/screen04.png" class="d-block w-100 rounded-3"
|
|
||||||
alt=""/>
|
|
||||||
</div>
|
|
||||||
<div class="col-4 screenshot" id="">
|
|
||||||
<img src="assets/screens/large/screen05.png" class="d-block w-100 rounded-3"
|
|
||||||
alt=""/>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<!-- 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>
|
<h3>Feature 1</h3>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
|
||||||
|
sodales
|
||||||
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||||
</div>
|
</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>
|
||||||
<div class="col-4 feature-card" id="">
|
<div class="col-8 col-sm-6 feature-container" id="">
|
||||||
<h3>Feature 3</h3>
|
<img src="assets/screens/large/screen02.png" class="img-fluid screenshot" alt="" />
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales
|
<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>
|
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-4 feature-card" id="">
|
</div>
|
||||||
<h3>Feature 4</h3>
|
<div class="col-8 col-sm-6 feature-container" id="">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales
|
<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>
|
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-4 feature-card" id="">
|
</div>
|
||||||
<h3>Feature 5</h3>
|
<div class="col-8 col-sm-6 feature-container" id="">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales
|
<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>
|
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-4 feature-card" id="">
|
</div>
|
||||||
<h3>Feature 6</h3>
|
<div class="col-8 col-sm-6 feature-container" id="">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales
|
<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>
|
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-4 feature-card" id="empty-feature"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<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-8 col-sm-6 feature-container empty-feature-container" id=""></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>
|
||||||
|
|
|
||||||
|
|
@ -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'});
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue