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

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-purple: #946beb;
--rd-blue: #1a9fff; --rd-blue: #1a9fff;
--rd-black: #222; --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; --pixel-font: "Upheaval TT", monospace;
--body-font: "Exo", serif; --body-font: "Exo", serif;
--transition-speed: 0.1s;
} }
@ -40,22 +43,27 @@ nav i.bi {
font-size: small; font-size: small;
} }
.nav-link:hover, .nav-link.show { nav .nav-link:hover, nav .nav-link.show {
background: var(--rd-purple); /* background: var(--rd-purple);
border: white solid 1px; border: white solid 1px;
border-radius: 5px; border-radius: 5px;
margin: -1px; margin: -1px; */
color: white;
} }
.dropdown-menu.show { nav .dropdown-menu.show {
background: var(--rd-purple); background: var(--rd-purple);
/* background: linear-gradient(45deg, #1a9fff, #946beb); */
border: white solid 1px; border: white solid 1px;
font-size: large; font-size: large;
} }
a.dropdown-item:hover { nav a.dropdown-item:hover {
background: var(--rd-blue); background: var(--rd-blue);
color: white;
}
nav a.dropdown-item:hover svg {
fill: white;
} }
footer { footer {
@ -87,8 +95,37 @@ footer {
font-size: larger; font-size: larger;
} }
.jumbotron .btn:hover svg { /* Features Styles */
fill: white; #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 */ /* Link Styles */
@ -106,4 +143,10 @@ footer {
color: white; color: white;
background: var(--rd-purple); background: var(--rd-purple);
border-color: var(--rd-black); 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> <body>
<!-- Navbar --> <!-- Navbar -->
<nav class="navbar navbar-expand-lg sticky-top"> <nav class="navbar navbar-expand-lg">
<div class="container large"> <div class="container large">
<a class="navbar-brand" href="index.html"> <a class="navbar-brand" href="index.html">
<img src="assets/icons/squircle-icon.svg" height="40"> <img src="assets/icons/squircle-icon.svg" height="40">
@ -43,7 +43,7 @@
<div class="collapse navbar-collapse" id="navbarNavDropdown"> <div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#feature-anchor">Features</a> <a class="nav-link" href="#features">Features</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" target="_blank" rel="noopener noreferrer" <a class="nav-link" target="_blank" rel="noopener noreferrer"
@ -120,10 +120,10 @@
<!-- End Navbar --> <!-- End Navbar -->
<!-- Main Content --> <!-- Main Content -->
<main class="container mt-4"> <main class="container-fluid px-0 mt-4">
<!-- Jumbotron --> <!-- 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"> <div class="container-fluid align-items-center">
<!-- First section --> <!-- First section -->
<div class="row align-items-center"> <div class="row align-items-center">
@ -184,10 +184,50 @@
<!-- End Jumbotron --> <!-- End Jumbotron -->
<!-- Screenshot/Feature Section --> <!-- 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 --> <!-- End Screenshot/Feature Section -->
<!-- Donate Appeal --> <!-- 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"> <div class="container-fluid py-2 align-items-center">
<!-- First section --> <!-- First section -->
<div class="row align-items-center"> <div class="row align-items-center">
@ -248,7 +288,7 @@
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<!-- <script src="scripts/gradient.js"></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> <script src="scripts/accessibility.js"></script>
</body> </body>

61
scripts/features.js
View file

@ -1,51 +1,26 @@
const featureTitles = document.getElementsByClassName('feature-list-item'); const featureCardElems = document.getElementsByClassName('feature-card');
const featureDetails = document.getElementsByClassName('feature-detail-container'); const featureCardContainerElem = document.getElementById('feature-card-container');
const featureList = document.getElementById('feature-list'); let currentFeatureCard = 1
let currentFeature = 0;
for (let i = 0; i < featureTitles.length; i++) { for (let i = 0; i < featureCardElems.length; i++) {
featureTitles[i].addEventListener('click', function () { featureCardElems[i].addEventListener('click', function() {
if (i != currentFeature) { if (i != currentFeatureCard) {
updateActiveFeature(i); updateActiveFeatureCard(i);
} }
}, false) }, 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) { function updateActiveFeatureCard(i) {
const lastCurrentFeature = currentFeature; const lastCurrentFeature = currentFeatureCard;
currentFeature = i; currentFeatureCard = i;
// console.log(`${lastCurrentFeature} -> ${currentFeature}`); console.log(i)
// New current feature featureCardElems[i].id = 'active-feature-card';
featureTitles[currentFeature].className += ' gradient-spin my-gradient'; featureCardElems[lastCurrentFeature].id = "";
featureTitles[currentFeature].id = 'active-feature-item'; if (lastCurrentFeature < i) {
featureDetails[currentFeature].id = 'active-feature-detail' // featureCardContainerElem.scrollLeft = featureCardElems[i].offsetLeft - featureCardElems[i].offsetWidth/2
featureCardContainerElem.scrollIntoView
// 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;
} else { } 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";
}
})