mirror of
https://github.com/RetroDECK/RetroDECK-Website.git
synced 2024-11-21 14:35:38 +00:00
Add preliminary features.js
- Add feature cards - Add eventListener to cards - Add relevant styles
This commit is contained in:
Adam Iannazzone
parent
645b855120
commit
dd8aeca6f7
|
|
@ -15,8 +15,11 @@
|
|||
--rd-purple: #946beb;
|
||||
--rd-blue: #1a9fff;
|
||||
--rd-black: #222;
|
||||
--gradient-1: linear-gradient(45deg, var(--rd-purple) 30%, var(--rd-blue));
|
||||
--gradient-2: linear-gradient(45deg, var(--rd-blue) 30%, var(--rd-purple));
|
||||
--pixel-font: "Upheaval TT", monospace;
|
||||
--body-font: "Exo", serif;
|
||||
--transition-speed: 0.1s;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -40,22 +43,27 @@ nav i.bi {
|
|||
font-size: small;
|
||||
}
|
||||
|
||||
.nav-link:hover, .nav-link.show {
|
||||
background: var(--rd-purple);
|
||||
nav .nav-link:hover, nav .nav-link.show {
|
||||
/* background: var(--rd-purple);
|
||||
border: white solid 1px;
|
||||
border-radius: 5px;
|
||||
margin: -1px;
|
||||
margin: -1px; */
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
nav .dropdown-menu.show {
|
||||
background: var(--rd-purple);
|
||||
/* background: linear-gradient(45deg, #1a9fff, #946beb); */
|
||||
border: white solid 1px;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
a.dropdown-item:hover {
|
||||
nav a.dropdown-item:hover {
|
||||
background: var(--rd-blue);
|
||||
color: white;
|
||||
}
|
||||
|
||||
nav a.dropdown-item:hover svg {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
|
@ -87,8 +95,37 @@ footer {
|
|||
font-size: larger;
|
||||
}
|
||||
|
||||
.jumbotron .btn:hover svg {
|
||||
fill: white;
|
||||
/* Features Styles */
|
||||
#features {
|
||||
background: #000;
|
||||
border-top: var(--rd-purple) 5px solid;
|
||||
border-bottom: var(--rd-purple) 5px solid;
|
||||
}
|
||||
|
||||
#feature-card-container {
|
||||
/* overflow-x: scroll; */
|
||||
flex-wrap: nowrap;
|
||||
scrollbar-width: none;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--rd-blue);
|
||||
border: white 2px solid;
|
||||
border-radius: 5px;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
|
||||
.feature-card h3 {
|
||||
color: white;
|
||||
font-family: var(--pixel-font);
|
||||
text-shadow: 2px 2px var(--rd-purple);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
/* font-size: larger; */
|
||||
font-family: var(--body-font);
|
||||
}
|
||||
|
||||
/* Link Styles */
|
||||
|
|
@ -106,4 +143,10 @@ footer {
|
|||
color: white;
|
||||
background: var(--rd-purple);
|
||||
border-color: var(--rd-black);
|
||||
transition: var(--transition-speed);
|
||||
}
|
||||
|
||||
.jumbotron .btn:hover svg {
|
||||
fill: white;
|
||||
transition: var(--transition-speed);
|
||||
}
|
||||
52
index.html
52
index.html
|
|
@ -31,7 +31,7 @@
|
|||
<body>
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg sticky-top">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container large">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<img src="assets/icons/squircle-icon.svg" height="40">
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#feature-anchor">Features</a>
|
||||
<a class="nav-link" href="#features">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" target="_blank" rel="noopener noreferrer"
|
||||
|
|
@ -120,10 +120,10 @@
|
|||
<!-- End Navbar -->
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="container mt-4">
|
||||
<main class="container-fluid px-0 mt-4">
|
||||
|
||||
<!-- Jumbotron -->
|
||||
<div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin">
|
||||
<div class="container p-2 mb-4 bg-body-tertiary rounded-3 jumbotron">
|
||||
<div class="container-fluid align-items-center">
|
||||
<!-- First section -->
|
||||
<div class="row align-items-center">
|
||||
|
|
@ -184,10 +184,50 @@
|
|||
<!-- End Jumbotron -->
|
||||
|
||||
<!-- Screenshot/Feature Section -->
|
||||
<div class="container-fluid mb-4" id="features" height="100px">
|
||||
|
||||
<!-- Steam Deck Image -->
|
||||
<div class="container mb-2">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img clas="img-fluid" width="100%" src="assets/screens/Steam Deck.webp">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature List -->
|
||||
<div class="row mb-2 overflow-x-scroll" id="feature-card-container">
|
||||
<div class="col-4 feature-card mx-2" id="">
|
||||
<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 mx-2" id="active-feature-card">
|
||||
<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 mx-2" 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 mx-2" 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 mx-2" 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 mx-2" 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>
|
||||
|
||||
</div>
|
||||
<!-- End Screenshot/Feature Section -->
|
||||
|
||||
<!-- Donate Appeal -->
|
||||
<div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin">
|
||||
<div class="container p-2 mb-4 bg-body-tertiary rounded-3 jumbotron">
|
||||
<div class="container-fluid py-2 align-items-center">
|
||||
<!-- First section -->
|
||||
<div class="row align-items-center">
|
||||
|
|
@ -248,7 +288,7 @@
|
|||
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
||||
crossorigin="anonymous"></script>
|
||||
<!-- <script src="scripts/gradient.js"></script> -->
|
||||
<!-- <script src="scripts/features.js"></script> -->
|
||||
<script src="scripts/features.js"></script>
|
||||
<script src="scripts/accessibility.js"></script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,51 +1,26 @@
|
|||
const featureTitles = document.getElementsByClassName('feature-list-item');
|
||||
const featureDetails = document.getElementsByClassName('feature-detail-container');
|
||||
const featureList = document.getElementById('feature-list');
|
||||
let currentFeature = 0;
|
||||
const featureCardElems = document.getElementsByClassName('feature-card');
|
||||
const featureCardContainerElem = document.getElementById('feature-card-container');
|
||||
let currentFeatureCard = 1
|
||||
|
||||
for (let i = 0; i < featureTitles.length; i++) {
|
||||
featureTitles[i].addEventListener('click', function () {
|
||||
if (i != currentFeature) {
|
||||
updateActiveFeature(i);
|
||||
for (let i = 0; i < featureCardElems.length; i++) {
|
||||
featureCardElems[i].addEventListener('click', function() {
|
||||
if (i != currentFeatureCard) {
|
||||
updateActiveFeatureCard(i);
|
||||
}
|
||||
}, false)
|
||||
|
||||
// We need to remove the gradient so that linearBackground is hidden
|
||||
if (featureTitles[i].id != 'active-feature-item') {
|
||||
featureTitles[i].className = 'col feature-list-item rounded-3 m-0';
|
||||
}
|
||||
}
|
||||
|
||||
function updateActiveFeature(i) {
|
||||
const lastCurrentFeature = currentFeature;
|
||||
currentFeature = i;
|
||||
// console.log(`${lastCurrentFeature} -> ${currentFeature}`);
|
||||
function updateActiveFeatureCard(i) {
|
||||
const lastCurrentFeature = currentFeatureCard;
|
||||
currentFeatureCard = i;
|
||||
console.log(i)
|
||||
|
||||
// New current feature
|
||||
featureTitles[currentFeature].className += ' gradient-spin my-gradient';
|
||||
featureTitles[currentFeature].id = 'active-feature-item';
|
||||
featureDetails[currentFeature].id = 'active-feature-detail'
|
||||
|
||||
// Reset previous current feature
|
||||
featureTitles[lastCurrentFeature].removeAttribute('id');
|
||||
featureTitles[lastCurrentFeature].className = 'col feature-list-item rounded-3 m-0';
|
||||
featureTitles[lastCurrentFeature].style = '';
|
||||
featureDetails[lastCurrentFeature].removeAttribute('id');
|
||||
|
||||
// Update scroll position
|
||||
const offsetPadding = 20;
|
||||
if (lastCurrentFeature < currentFeature) {
|
||||
featureList.scrollLeft = featureTitles[currentFeature].offsetLeft - offsetPadding;
|
||||
featureCardElems[i].id = 'active-feature-card';
|
||||
featureCardElems[lastCurrentFeature].id = "";
|
||||
if (lastCurrentFeature < i) {
|
||||
// featureCardContainerElem.scrollLeft = featureCardElems[i].offsetLeft - featureCardElems[i].offsetWidth/2
|
||||
featureCardContainerElem.scrollIntoView
|
||||
} else {
|
||||
featureList.scrollLeft = featureTitles[currentFeature].offsetLeft - featureTitles[currentFeature].offsetWidth/2 - offsetPadding;
|
||||
featureCardContainerElem.scrollLeft = featureCardElems[i].offsetLeft - featureCardElems[i].offsetWidth
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const widthOutput = document.querySelector("#width");
|
||||
window.addEventListener('resize', function() {
|
||||
const featureListElem = document.getElementById('feature-list');
|
||||
if (widthOutput < 768) {
|
||||
featureListElem.classList += "text-nowrap";
|
||||
}
|
||||
})
|
||||
}
|
||||
Loading…
Reference in a new issue