Fix up Slider to accept differing cards

Polyfrost · Dec 18, 2023 · a79d129 · a79d129
1 parent fa189e9
commit a79d129
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git 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
@@ -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>