mirror of
https://github.com/RetroDECK/RetroDECK-Website.git
synced 2024-11-23 23:25:39 +00:00
Implement card system for screenshots
This commit is contained in:
Adam Iannazzone
parent
fe3d6227c0
commit
459ae4a604
53
css/carousel.css
Normal file
53
css/carousel.css
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
.stack {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
#features .row:nth-child(odd) .stack {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
position: relative;
|
||||
/* animation: lower 100ms forwards; */
|
||||
}
|
||||
|
||||
.screenshot:nth-child(3) {
|
||||
z-index: 4;
|
||||
left: -200%;
|
||||
}
|
||||
|
||||
.screenshot:nth-child(2) {
|
||||
z-index: 3;
|
||||
left: calc(-100% + 10px);
|
||||
bottom: 10px;
|
||||
}
|
||||
.screenshot:nth-child(1) {
|
||||
z-index: 2;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
@keyframes lower {
|
||||
from {
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
to {
|
||||
transform: translate(-10px, 10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes swap {
|
||||
50% {
|
||||
z-index: 3;
|
||||
}
|
||||
67% {
|
||||
transform: translate(35px, -125%) rotate(2.5deg);
|
||||
z-index: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate(30px, -30px) rotate(0deg);
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -86,7 +86,7 @@ footer {
|
|||
color: white;
|
||||
}
|
||||
|
||||
.jumbotron p {
|
||||
p {
|
||||
font-family: var(--body-font);
|
||||
font-size: larger;
|
||||
}
|
||||
|
|
@ -99,49 +99,57 @@ footer {
|
|||
transition: 0.25s;
|
||||
}
|
||||
|
||||
img.screenshot {
|
||||
border: white 2px solid;
|
||||
border-radius: 5px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--rd-blue);
|
||||
border: white 2px solid;
|
||||
border-radius: 5px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.screenshot, .feature-card {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
color: white;
|
||||
font-family: var(--pixel-font);
|
||||
text-shadow: 2px 2px var(--rd-purple);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-family: var(--body-font);
|
||||
}
|
||||
|
||||
img.d-pad {
|
||||
opacity: 0%;
|
||||
transition: 0.25s;
|
||||
/* Alternating Color Styles */
|
||||
|
||||
#features .row {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.carousel-button:hover img.d-pad {
|
||||
opacity: 100%;
|
||||
transition: 0.25s;
|
||||
#features .row:nth-child(odd) .screenshot {
|
||||
border: var(--rd-blue) 2px solid;
|
||||
}
|
||||
|
||||
.carousel-indicators {
|
||||
opacity: 0%;
|
||||
pointer-events: none;
|
||||
transition: 0.25s;
|
||||
#features .row:nth-child(odd) .feature-card {
|
||||
border: white 2px solid;
|
||||
background: var(--rd-blue);
|
||||
}
|
||||
|
||||
.carousel:hover .carousel-indicators {
|
||||
opacity: 100%;
|
||||
pointer-events: auto;
|
||||
transition: 0.25s;
|
||||
#features .row:nth-child(odd) h3 {
|
||||
text-shadow: 2px 2px var(--rd-purple);
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
#features .row:nth-child(even) .screenshot {
|
||||
border: var(--rd-purple) 2px solid;
|
||||
}
|
||||
|
||||
#features .row:nth-child(even) .feature-card {
|
||||
border: white 2px solid;
|
||||
background: var(--rd-purple);
|
||||
}
|
||||
|
||||
#features .row:nth-child(even) h3 {
|
||||
text-shadow: 2px 2px var(--rd-blue);
|
||||
}
|
||||
|
||||
/* Link Styles */
|
||||
|
|
|
|||
61
index.html
61
index.html
|
|
@ -25,6 +25,7 @@
|
|||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="css/carousel.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
|
|
@ -230,8 +231,63 @@
|
|||
</div>
|
||||
<!-- End Jumbotron -->
|
||||
|
||||
<!-- Screenshots and Features as Bootstrap Carousel -->
|
||||
<div class="container-fluid mb-4" id="features">
|
||||
<div class="row align-items-center mt-3 mb-3">
|
||||
<div class="col-12 col-lg-8 stack">
|
||||
<!-- <div class="stack"> -->
|
||||
<img src="assets/screens/screen01.png" class="img-fluid screenshot"
|
||||
alt="The RetroDECK and ES-DE logos on a black screen" />
|
||||
<img src="assets/screens/screen02.png" class="img-fluid screenshot"
|
||||
alt="The RetroDECK and ES-DE logos on a black screen" />
|
||||
<img src="assets/screens/screen03.png" class="img-fluid screenshot"
|
||||
alt="The RetroDECK and ES-DE logos on a black screen" />
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div class="col-12 col-lg-4">
|
||||
<div class="feature-card p-2 mt-2 mt-lg-0">
|
||||
<h3>Designed for Gaming Mode</h3>
|
||||
<p>RetroDECK fits right in with the other games in your Steam library.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-center mb-3">
|
||||
|
||||
<div class="col-12 col-lg-8 order-lg-2 stack">
|
||||
<img src="assets/screens/screen01.png" class="img-fluid screenshot"
|
||||
alt="The RetroDECK and ES-DE logos on a black screen" />
|
||||
<img src="assets/screens/screen02.png" class="img-fluid screenshot"
|
||||
alt="The RetroDECK and ES-DE logos on a black screen" />
|
||||
<img src="assets/screens/screen03.png" class="img-fluid screenshot"
|
||||
alt="The RetroDECK and ES-DE logos on a black screen" />
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-4 order-lg-1">
|
||||
<div class="feature-card p-2 mt-2 mt-lg-0">
|
||||
<h3>Designed for Gaming Mode</h3>
|
||||
<p>RetroDECK fits right in with the other games in your Steam library.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div class="row align-items-center d-flex mb-4">
|
||||
<div class="col-12 col-lg-8">
|
||||
<img src="assets/screens/screen01.png" class="img-fluid screenshot"
|
||||
alt="The RetroDECK and ES-DE logos on a black screen" />
|
||||
</div>
|
||||
<div class="col-12 col-lg-4">
|
||||
<div class="feature-card p-2 mt-2 mt-lg-0">
|
||||
<h3>Designed for Gaming Mode</h3>
|
||||
<p>RetroDECK fits right in with the other games in your Steam library.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Screenshots and Features as Bootstrap Carousel -->
|
||||
<!-- <div class="container-fluid mb-4" id="features">
|
||||
<div class="carousel slide py-2" id="features-carousel">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#features-carousel" data-bs-slide-to="0" class="active"
|
||||
|
|
@ -313,7 +369,7 @@
|
|||
aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- Screenshots and Features as Bootstrap Carousel -->
|
||||
|
||||
<!-- Donate Appeal -->
|
||||
|
|
@ -386,6 +442,7 @@
|
|||
<!-- <script src="scripts/gradient.js"></script> -->
|
||||
<script src="scripts/features.js"></script>
|
||||
<script src="scripts/accessibility.js"></script>
|
||||
<script src="scripts/carousel.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
21
scripts/carousel.js
Normal file
21
scripts/carousel.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
let timing = 2000;
|
||||
|
||||
// let stack = document.querySelector(".stack");
|
||||
let stacks = document.getElementsByClassName('stack');
|
||||
|
||||
// [...stack.children].reverse().forEach(i => stack.append(i));
|
||||
for (let i = 0; i < stacks.length; i++) {
|
||||
[...stacks[i].children].reverse().forEach(j => stacks[i].append(j));
|
||||
stacks[i].addEventListener("click", swap);
|
||||
}
|
||||
|
||||
function swap(e) {
|
||||
let thisTarget = e.target
|
||||
if (!thisTarget.classList.contains('screenshot')) return;
|
||||
thisTarget.style.animation = `swap ${timing}ms ease-in-out forwards`;
|
||||
|
||||
setTimeout(() => {
|
||||
thisTarget.style.animation = "";
|
||||
this.prepend(thisTarget);
|
||||
}, timing);
|
||||
}
|
||||
Loading…
Reference in a new issue