From fe73cca82a051975a2d1bcdc4289bd6fba4a9405 Mon Sep 17 00:00:00 2001
From: Adam Iannazzone <46025473+jiannazzone@users.noreply.github.com>
Date: Thu, 17 Oct 2024 10:47:58 -0400
Subject: [PATCH] Adjust animation for stacks < 3 images - Disable
 eventlistener on 1-image stacks - Remove cursor on 1-image stacks

---
 css/carousel.css    | 14 ++++++++------
 index.html          |  2 --
 scripts/carousel.js | 10 ++++++----
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/css/carousel.css b/css/carousel.css
index d756c5f..ce7b4f0 100644
--- a/css/carousel.css
+++ b/css/carousel.css
@@ -2,7 +2,6 @@
   position: relative;
   display: flex;
   padding-right: 30px;
-  cursor: pointer;
 }
 
 #features .row:nth-child(odd) .stack {
@@ -62,17 +61,20 @@
   }
 }
 
+
+/*
+Commented lines make the animation more flexible
+with different numbers of slides
+*/
 @keyframes fade-out {
   0% {
-    /* z-index: 3; */
-    bottom: 0;
+    /* bottom: 0; */
     opacity: 1;
   }
   100% {
-    /* z-index: 0; */
     opacity: 0;
-    left: calc(-200% - 10px);
-    bottom: -30px;
+    /* left: calc(-200% - 10px); */
+    /* bottom: -30px; */
     scale: 1.05;
   }
 }
diff --git a/index.html b/index.html
index dc402c7..cdb3d48 100644
--- a/index.html
+++ b/index.html
@@ -238,8 +238,6 @@
                         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">
                     <div class="feature-card p-2 mt-2 mt-lg-0">
diff --git a/scripts/carousel.js b/scripts/carousel.js
index 68abe59..50e3ab5 100644
--- a/scripts/carousel.js
+++ b/scripts/carousel.js
@@ -1,9 +1,12 @@
-let timing = 400;
+let timing = 250;
 let stacks = document.getElementsByClassName('stack');
 
 for (let i = 0; i < stacks.length; i++) {
     [...stacks[i].children].reverse().forEach(j => stacks[i].append(j));
-    stacks[i].addEventListener("click", swap);
+    if (stacks[i].children.length > 1) {
+        stacks[i].addEventListener('click', swap);
+        stacks[i].style.cursor = 'pointer';
+    }
 }
 
 function swap(e) {
@@ -14,11 +17,10 @@ function swap(e) {
     setTimeout(() => {
         thisTarget.style.animation = `fade-in ${timing}ms ease-out forwards`;
         this.prepend(thisTarget);
-        // thisTarget.style = '';
-
     }, timing);
 
     setTimeout(() => {
+        // this.prepend(thisTarget);
         thisTarget.style = '';
     }, 2*timing);
 }
\ No newline at end of file