Adjust animation for stacks < 3 images

- Disable eventlistener on 1-image stacks
- Remove cursor on 1-image stacks

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);
+    /* left: calc(-200% - 10px); */
-    bottom: -30px;
+    /* bottom: -30px; */
     scale: 1.05;
   }
 }

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

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