From d161b260f5a2b00b35a7f8613ae4b675b1ac59e5 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 11 Feb 2024 10:20:44 -0800
Subject: feat(tools): card-style display

---
 src/routes/tools/+page.svelte | 57 +++++++++++++++++++++++++++++++++++--------
 1 file changed, 47 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte
index 6dac37ec..6f503aec 100644
--- a/src/routes/tools/+page.svelte
+++ b/src/routes/tools/+page.svelte
@@ -12,20 +12,25 @@
 <HeadTitle route={tools[tool].name()} path={`/tools?tool=${tool}`} />
 
 <div class="card">
-	<p>Select a tool to continue.</p>
+	<div class="tool-grid">
+		{#each Object.keys(tools).filter((t) => t !== 'default') as t}
+			<a href={root(`/tools/${tools[t].id}`)} on:click={() => (tool = t)}>
+				<div class="tool-grid-tool card">
+					<span class="title">
+						{tools[t].name()}
+					</span>
+
+					<p />
 
-	<ul>
-		{#each Object.keys(tools) as t}
-			{#if t !== 'default'}
-				<li>
-					<a href={root(`/tools/${tools[t].id}`)} on:click={() => (tool = t)}>{tools[t].name()}</a>
 					{#if tools[t].description}
-						<blockquote>{tools[t].description}</blockquote>
+						<blockquote style="margin: 0 0 0 1.5rem;">
+							{tools[t].description}
+						</blockquote>
 					{/if}
-				</li>
-			{/if}
+				</div>
+			</a>
 		{/each}
-	</ul>
+	</div>
 
 	<p />
 
@@ -35,3 +40,35 @@
 		<a href="https://anilist.co/user/fuwn" target="_blank" rel="noopener">@fuwn</a> on AniList!
 	</blockquote>
 </div>
+
+<style lang="scss">
+	.tool-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+		grid-gap: 1rem;
+	}
+
+	.tool-grid-tool {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		$delay: 0.25s;
+		transition: transform $delay ease;
+
+		blockquote {
+			font-size: 0.9rem;
+			color: var(--fg);
+		}
+
+		&:hover {
+			transform: scale(1.05);
+			position: relative;
+			z-index: 2;
+			transition: transform $delay ease;
+		}
+	}
+
+	.title {
+		font-weight: 500;
+	}
+</style>
-- 
cgit v1.2.3