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

Padding adjustments on features

Browse source
This commit is contained in:
Adam Iannazzone 2024-04-24 09:53:04 -04:00
parent 9515a8453e
commit 60941aaeb2
2 changed files with 23 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
features.html
View file

@ -105,13 +105,8 @@
<main class="container mt-4 mb-4"> <main class="container mt-4 mb-4">
<!-- Lead Jumbotron --> <!-- Lead Jumbotron -->
<div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin"> <div class="p-md-2 mb-md-4 mb-2 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin">
<div class="container-fluid py-5"> <div class="container-fluid py-md-5 py-3">
<!-- <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">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>
@ -133,13 +128,13 @@
<!-- End Jumbotron --> <!-- End Jumbotron -->
<!-- Feature Section --> <!-- Feature Section -->
<div class="p-2 mb-4 rounded-3 jumbotron" id="feature-jumbotron"> <div class="p-md-2 p-1 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"> <div class="row">
<!-- Left Column --> <!-- Left Column -->
<div class="col-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" id="feature-logo-container"> <div class="row p-3 rounded-3" id="feature-logo-container">
@ -150,23 +145,23 @@
<!-- Feature List --> <!-- Feature List -->
<div class="h5" id="feature-list"> <div class="h5" id="feature-list">
<div class="row feature-list-item gradient-spin my-gradient rounded-3" <div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0"
id="active-feature-item"> id="active-feature-item">
<div class="col"> <div class="col">
Pick Up and Play Pick Up and Play
</div> </div>
</div> </div>
<div class="row feature-list-item gradient-spin my-gradient rounded-3" id=""> <div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
<div class="col"> <div class="col">
Quick Resume Quick Resume
</div> </div>
</div> </div>
<div class="row feature-list-item gradient-spin my-gradient rounded-3" id=""> <div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
<div class="col"> <div class="col">
Rewind & Fast Forward Rewind & Fast Forward
</div> </div>
</div> </div>
<div class="row feature-list-item gradient-spin my-gradient rounded-3" id=""> <div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
<div class="col"> <div class="col">
Configurator Configurator
</div> </div>
@ -176,7 +171,7 @@
<!-- End Left Column --> <!-- End Left Column -->
<!-- Right Column --> <!-- Right Column -->
<div class="col-8" id="feature-detail-column"> <div class="col-md-8" id="feature-detail-column">
<div class="my-gradient gradient-spin rounded-3"> <div class="my-gradient gradient-spin rounded-3">
<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">
<!-- Image/Video Container --> <!-- Image/Video Container -->
@ -187,7 +182,7 @@
</div> </div>
<!-- Feature Detail Container --> <!-- Feature Detail Container -->
<div class="row py-2 m-1 rounded-3 feature-text-container"> <div class="row py-2 rounded-3 feature-text-container">
<div class="col"> <div class="col">
<h4>Don't waste time on setup</h4> <h4>Don't waste time on setup</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
@ -212,9 +207,9 @@
</div> </div>
<!-- Feature Detail Container --> <!-- Feature Detail Container -->
<div class="row rounded-3 py-2 m-1"> <div class="row py-2 rounded-3 feature-text-container">
<div class="col"> <div class="col">
<h4>Don't waste time on setup #2</h4> <h4>Don't waste time on setup</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud nostrud
@ -237,9 +232,9 @@
</div> </div>
<!-- Feature Detail Container --> <!-- Feature Detail Container -->
<div class="row rounded-3 py-2 m-1"> <div class="row py-2 rounded-3 feature-text-container">
<div class="col"> <div class="col">
<h4>Don't waste time on setup #3</h4> <h4>Don't waste time on setup</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud nostrud
@ -262,9 +257,9 @@
</div> </div>
<!-- Feature Detail Container --> <!-- Feature Detail Container -->
<div class="row rounded-3 py-2 m-1"> <div class="row py-2 rounded-3 feature-text-container">
<div class="col"> <div class="col">
<h4>Don't waste time on setup #4</h4> <h4>Don't waste time on setup</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud nostrud

10
scripts/features.js
View file

@ -4,10 +4,14 @@ let currentFeature = 0;
for (let i = 0; i < featureTitles.length; i++) { for (let i = 0; i < featureTitles.length; i++) {
featureTitles[i].addEventListener('click', function () { featureTitles[i].addEventListener('click', function () {
updateActiveFeature(i); if (i != currentFeature) {
updateActiveFeature(i);
}
}, false) }, false)
// We need to remove the gradient so that linearBackground is hidden
if (featureTitles[i].id != 'active-feature-item') { if (featureTitles[i].id != 'active-feature-item') {
featureTitles[i].className = 'row feature-list-item rounded-3'; featureTitles[i].className = 'row feature-list-item rounded-3 m-0';
} }
} }
@ -22,7 +26,7 @@ function updateActiveFeature(i) {
// Reset previous current feature // Reset previous current feature
featureTitles[lastCurrentFeature].removeAttribute('id'); featureTitles[lastCurrentFeature].removeAttribute('id');
featureTitles[lastCurrentFeature].className = 'row feature-list-item rounded-3'; featureTitles[lastCurrentFeature].className = 'row feature-list-item rounded-3 m-0';
featureTitles[lastCurrentFeature].style = ''; featureTitles[lastCurrentFeature].style = '';
featureDetails[lastCurrentFeature].removeAttribute('id'); featureDetails[lastCurrentFeature].removeAttribute('id');