From a79d129d410ab8cad9ea8f2d56201d53b22c8024 Mon Sep 17 00:00:00 2001
From: Tyler Flowers <contact@ggtylerr.dev>
Date: Sun, 17 Dec 2023 22:23:28 -0500
Subject: Fix up Slider to accept differing cards

---
 apps/website/package.json                     |  3 ++-
 apps/website/src/components/base/Slider.astro | 31 +++++++++++++++++----------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/apps/website/package.json b/apps/website/package.json
index 87d5b95..e3fb319 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -14,7 +14,8 @@
 		"@astrojs/rss": "^3.0.0",
 		"@astrojs/sitemap": "^3.0.3",
 		"@astrojs/tailwind": "^5.0.2",
-		"astro": "^3.6.0",
+		"astro": "^4.0.6",
+		"sass": "^1.69.5",
 		"tailwindcss": "^3.3.5",
 		"vitest": "^0.34.6"
 	},
diff --git a/apps/website/src/components/base/Slider.astro b/apps/website/src/components/base/Slider.astro
index f40b747..8814f63 100644
--- a/apps/website/src/components/base/Slider.astro
+++ b/apps/website/src/components/base/Slider.astro
@@ -20,19 +20,28 @@ const {
 </div>
 
 <!-- might be cheating a bit using global styles here but at least it lets you use slots -->
-<style is:global>
-	.slider > * {
-		animation: 5s linear infinite slide;
+<style is:global lang="scss">
+	$sliderNum: 8;
+	@for $i from 1 through $sliderNum {
+		.slider > *:nth-child(#{$i}) {
+			animation: #{"slide" + $i} 10s linear infinite;
+		}
+		@keyframes #{"slide" + $i} {
+			0% {
+				transform: translateX(0);
+			}
+			#{calc(100% / $sliderNum * $i)} {
+				transform: translateX(calc((-100% - 10px) * $i));
+			}
+			#{calc((100% / $sliderNum * $i) + 0.001%)} {
+				transform: translateX(calc((100% + 10px) * ($sliderNum - $i)));
+			}
+			100% {
+				transform: translateX(0);
+			}
+		}
 	}
 	.slider.reverse > * {
 		animation-direction: reverse;
 	}
-	@keyframes slide {
-		from {
-			transform: translateX(0);
-		}
-		to {
-			transform: translateX(calc(-100% - 10px));
-		}
-	}
 </style>
-- 
cgit