Add fade transitions for many elements, using same system as Mercury

src/app.d.ts

@@ -7,6 +7,11 @@ declare global {
 		// interface PageData {}
 		// interface Platform {}
 	}
+
+	// sveltekit-autoimport types
+
+	declare const fade: typeof import("$lib/fade").default
+
 	declare const Footer: typeof import("$lib/components/Footer.svelte").default
 	declare const Navbar: typeof import("$lib/components/Navbar.svelte").default
 	declare const Stars: typeof import("$lib/components/Stars.svelte").default

src/lib/fade.ts

@@ -0,0 +1,10 @@
+// Builds on the Svelte fade function to allow for easier delays for 
+// staggered animations, taken directly from Mercury
+
+import { fade } from "svelte/transition"
+
+export default (node: HTMLElement, props: any = { duration: 300 }) => {
+	if (props.num && props.total)
+		props.delay = (props.num * 150) / Math.min(props.total, props?.max || 6)
+	return fade(node, props)
+}

src/routes/+page.svx

@@ -7,7 +7,7 @@
 # Revival Archive
 ### a [Mercury](https://banland.xyz) project
 
-<div class="content">
+<div in:fade|global class="content">
 Welcome to the Revival Archive, a website dedicated to keeping track of active/defunct old brickbuilding private servers.
 
 Check out our [blog posts](/blog), [reviews](/reviews) and most importantly, the [revival index](/revivals).

src/routes/about/+page.md

@@ -6,7 +6,7 @@
 
 # About
 
-<div class="content">
+<div in:fade|global class="content">
 <ins>The Revival Archive is dedicated to keeping track of active and defunct old brickbuilding private servers.</ins>
 
 We also review revivals on specific features such as:

src/routes/blog/+page.svelte

@@ -14,8 +14,9 @@
 
 <h1>Blog Posts</h1>
 
-{#each posts as post}
+{#each posts as post, num}
 	<a
+		in:fade|global={{ num, total: posts.length }}
 		href="/post/{post.path}"
 		class="txt @light:text-dark hover:text-#ccc
 		@light:hover:text-#555 bg-a rounded-3 box-border

src/routes/post/[post]/+page.svelte

@@ -32,7 +32,7 @@
 
 				<hr class="mb-4 mt-3" />
 
-				<div class="content pt-0.01 text-justify">
+				<div in:fade|global class="content pt-0.01 text-justify">
 					<svelte:component this={data.content} />
 				</div>
 			</div>

src/routes/reviews/+page.svelte

@@ -17,8 +17,9 @@
 
 <h1>Reviews</h1>
 
-{#each reviews as review}
+{#each reviews as review, num}
 	<a
+		in:fade|global={{ num, total: reviews.length }}
 		href="/revival/{review.path}"
 		class="txt @light:text-dark hover:text-#ccc
 		@light:hover:text-#555 bg-a rounded-3 box-border

src/routes/revival/[revival]/+page.svelte

@@ -46,7 +46,7 @@
 				<hr class="mb-4 mt-3" />
 
 				{#if data.rating}
-					<div class="content pt-0.01 text-justify">
+					<div in:fade|global class="content pt-0.01 text-justify">
 						<div class="post mb-10">
 							<svelte:component this={data.content} />
 						</div>

src/routes/revivals/+page.svelte

@@ -35,10 +35,12 @@
 
 {#if revivals.length > 0}
 	<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-		{#each revivals as revival}
+		{#each revivals as revival, num}
 			<div
+				in:fade|global={{ num, total: revivals.length }}
 				class="txt bg-#1f1c1d @light:bg-white rounded-2
-			@light:text-black card box-border flex flex-col p-5 text-white transition hover:shadow-xl">
+			@light:text-black card box-border flex flex-col p-5 text-white
+				transition hover:shadow-xl">
 				<div class:opacity-50={revival.defunct} class="flex">
 					<div>
 						<div class="flex flex-wrap">

svelte.config.js

@@ -16,7 +16,10 @@ export default {
 		}),
 		autoImport({
 			components: ["./src/lib/components"],
-			flat: true,
+			mapping: {
+				fade: 'import fade from "$lib/fade"',
+			},
+      		include: ["**/*.svelte", "**/*.md", "**/*.svx"],
 		}),
 		mdsvex({
 			extensions: [".svelte.md", ".md", ".svx"],