From 153741eb3d8a164651b6c29b6bde99cf191e2ba6 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 19 Feb 2024 16:34:21 -0800
Subject: feat(user): seperate hololive badges section

---
 src/routes/user/[user]/+page.svelte | 57 +++++++++++++++++++------------------
 1 file changed, 29 insertions(+), 28 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 26f4b35a..89c3f4bb 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -143,34 +143,36 @@
 						{:catch}
 							{displayBadges(userData.name, '?')}
 						{/await}
-
-						{#if schedule && preferences && preferences.pinned_hololive_streams.length > 0}
-							<p />
-
-							<div class="hololive-badges">
-								{#each preferences.pinned_hololive_streams as stream}
-									{@const avatar = schedule.dict[stream]}
-
-									{#if avatar}
-										<a href={root(`/hololive/${encodeURIComponent(stream)}`)}>
-											<img
-												src={avatar}
-												alt="Avatar"
-												class="user-grid-hololive-badges"
-												title={stream}
-												use:tooltip
-											/>
-										</a>
-									{/if}
-								{/each}
-							</div>
-						{/if}
 					</div>
 				</div>
 			</div>
 		{/if}
 	</div>
 
+	{#if schedule && preferences && preferences.pinned_hololive_streams.length > 0}
+		<p />
+
+		<div class="card">
+			<div class="hololive-badges">
+				{#each preferences.pinned_hololive_streams as stream}
+					{@const avatar = schedule.dict[stream]}
+
+					{#if avatar}
+						<a href={root(`/hololive/${encodeURIComponent(stream)}`)}>
+							<img
+								src={avatar}
+								alt="Avatar"
+								class="user-grid-hololive-badges"
+								title={stream}
+								use:tooltip
+							/>
+						</a>
+					{/if}
+				{/each}
+			</div>
+		</div>
+	{/if}
+
 	{#if preferences}
 		<p />
 
@@ -231,8 +233,9 @@
 	}
 
 	.user-grid-hololive-badges {
-		$transition: transform 0.3s ease, box-shadow 0.3s ease;
-		$size: 2.25em;
+		$transitionDuration: 0.35s;
+		$transition: transform $transitionDuration ease, box-shadow $transitionDuration ease;
+		$size: 5.25em;
 
 		border-radius: 8px;
 		width: $size;
@@ -243,17 +246,15 @@
 		&:hover {
 			z-index: 2;
 			transition: $transition;
-			transform: scale(1.1);
+			transform: scale(1.15);
 			box-shadow: 0 1.5px 9px var(--base01), 0 0 0 4px var(--base02), 0 4px 30px var(--base01);
 		}
 	}
 
 	.hololive-badges {
 		display: flex;
-		gap: 0.75em;
-		box-shadow: 0 1.5px 9px var(--base01), 0 0 0 4px var(--base02), 0 4px 30px var(--base01);
+		gap: 1rem;
 		border-radius: 8px;
-		padding: 0.25em;
 		justify-content: space-evenly;
 	}
 
-- 
cgit v1.2.3