Xargon/RetroDECK-Website
1
0
Fork 0
mirror of https://github.com/RetroDECK/RetroDECK-Website.git synced 2024-11-22 06:55:37 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add preliminary features.js

Browse source 
- Add feature cards
- Add eventListener to cards
- Add relevant styles
This commit is contained in:
Adam Iannazzone 2024-09-23 19:57:27 -04:00
parent 645b855120
commit dd8aeca6f7
3 changed files with 115 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
css/style.css
View file

@ -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
View file

@ -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>

59
scripts/features.js
View file

@ -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";
}
})