From 4ae25847a2c13a703babb90443efe536250d8156 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 4 Jan 2024 17:51:15 -0800
Subject: refactor(tools): better cards

---
 src/lib/Tools/SequelSpy.svelte | 88 +++++++++++++++++++++---------------------
 1 file changed, 45 insertions(+), 43 deletions(-)

(limited to 'src/lib/Tools/SequelSpy.svelte')

diff --git a/src/lib/Tools/SequelSpy.svelte b/src/lib/Tools/SequelSpy.svelte
index c5d9c4a2..ea6f74d8 100644
--- a/src/lib/Tools/SequelSpy.svelte
+++ b/src/lib/Tools/SequelSpy.svelte
@@ -40,54 +40,56 @@
 		airingTime(prequel as unknown as Media, null);
 </script>
 
-<p>
-	<select bind:value={season}>
-		<option value="WINTER">Winter</option>
-		<option value="SPRING">Spring</option>
-		<option value="SUMMER">Summer</option>
-		<option value="FALL">Fall</option>
-	</select>
-	<input type="number" bind:value={year} />
-</p>
+<div class="card">
+	<p>
+		<select bind:value={season}>
+			<option value="WINTER">Winter</option>
+			<option value="SPRING">Spring</option>
+			<option value="SUMMER">Summer</option>
+			<option value="FALL">Fall</option>
+		</select>
+		<input type="number" bind:value={year} />
+	</p>
 
-{#await currentPrequels}
-	<p>Loading prequels ... 50%</p>
-{:then currentPrequels}
-	<ul>
-		{#each currentPrequels as prequel}
-			<li
-				on:mouseenter={() => {
-					const response = onMouseEnter(prequel);
+	{#await currentPrequels}
+		<p>Loading prequels ... 50%</p>
+	{:then currentPrequels}
+		<ul>
+			{#each currentPrequels as prequel}
+				<li
+					on:mouseenter={() => {
+						const response = onMouseEnter(prequel);
 
-					hovering = response.hovering;
-					hoveredMedia = response.media;
-				}}
-				on:mouseleave={() => {
-					const response = onMouseLeave();
+						hovering = response.hovering;
+						hoveredMedia = response.media;
+					}}
+					on:mouseleave={() => {
+						const response = onMouseLeave();
 
-					hovering = response.hovering;
-					hoveredMedia = response.media;
-				}}
-				on:mousemove={(e) => {
-					const response = onMouseMove(e);
+						hovering = response.hovering;
+						hoveredMedia = response.media;
+					}}
+					on:mousemove={(e) => {
+						const response = onMouseMove(e);
 
-					imageStyle = response.style;
-				}}
-			>
-				<a href={`https://anilist.co/anime/${prequel.id}`} target="_blank">
-					<MediaTitle title={prequel.title} />
-				</a>
-				<span style="opacity: 50%;">|</span>
-				{prequel.seen}<span style="opacity: 50%;">/{prequel.episodes}</span>
-				{@html prequelAiringTime(prequel)}
-			</li>
-		{/each}
-	</ul>
-{/await}
+						imageStyle = response.style;
+					}}
+				>
+					<a href={`https://anilist.co/anime/${prequel.id}`} target="_blank">
+						<MediaTitle title={prequel.title} />
+					</a>
+					<span style="opacity: 50%;">|</span>
+					{prequel.seen}<span style="opacity: 50%;">/{prequel.episodes}</span>
+					{@html prequelAiringTime(prequel)}
+				</li>
+			{/each}
+		</ul>
+	{/await}
 
-<p />
+	<p />
 
-The count ratio is the number of episodes you've seen of any direct prequels, and the total number
-of episodes of all direct prequels.
+	The count ratio is the number of episodes you've seen of any direct prequels, and the total number
+	of episodes of all direct prequels.
+</div>
 
 <HoverCover {hovering} {hoveredMedia} {imageStyle} />
-- 
cgit v1.2.3