From e2738e68c19d79394209b9dd90a07db6168b7c66 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 23 Jun 2024 08:21:47 -0700
Subject: feat(hololive): update time and guest formatting

---
 src/lib/Hololive/Lives.svelte  |  2 +-
 src/lib/Hololive/Stream.svelte | 30 ++++++++++++++++++------------
 src/lib/Locale/english.ts      |  2 +-
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/lib/Hololive/Lives.svelte b/src/lib/Hololive/Lives.svelte
index 54ed0447..7281b18f 100644
--- a/src/lib/Hololive/Lives.svelte
+++ b/src/lib/Hololive/Lives.svelte
@@ -87,7 +87,7 @@
 <style lang="scss">
 	.container {
 		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(22.5em, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(22em, 1fr));
 		gap: 0.5em;
 	}
 </style>
diff --git a/src/lib/Hololive/Stream.svelte b/src/lib/Hololive/Stream.svelte
index 1f0a5b62..cde3be68 100644
--- a/src/lib/Hololive/Stream.svelte
+++ b/src/lib/Hololive/Stream.svelte
@@ -30,28 +30,29 @@
 	{/if}
 
 	<p class="stream-heading">
-		[{#if live.streaming}
+		{#if live.streaming}
 			<b class="live">{$locale().hololive.live}</b
 			>{:else if new Date(live.time).getTime() < Date.now()}
 			<span class="ended">{$locale().hololive.ended}</span>{:else}
-			<span class="upcoming">{$locale().hololive.upcoming}</span>{/if}]
+			<span class="upcoming">{$locale().hololive.upcoming}</span>{/if}
+		<span class="opaque">|</span>
 		{#if icon}
 			<a href={root(`/hololive/${encodeURIComponent(live.streamer)}`)}>
 				<img src={icon} alt="Avatar" class="stream-icon" />
 			</a>
 		{/if}
-		<b>{live.streamer}</b> <span class="opaque">|</span>
+		<a href={root(`/hololive/${encodeURIComponent(live.streamer)}`)} class="streamer-link">
+			<b>{live.streamer}</b>
+		</a>
+		<br />
 		{$locale().hololive.dateFormatter(new Date(live.time))}
 		{#if live.guests.length > 0}
-			<br />
-			<small>
-				{$locale().hololive.with}{live.guests
-					.join($locale().hololive.comma)
-					.replace(
-						new RegExp(`${$locale().hololive.comma}([^${$locale().hololive.commaNoSpace}]+)$`, 'g'),
-						`${$locale().hololive.comma}${$locale().hololive.ampersand}$1`
-					)}
-			</small>
+			{$locale().hololive.with}{live.guests
+				.join($locale().hololive.comma)
+				.replace(
+					new RegExp(`${$locale().hololive.comma}([^${$locale().hololive.commaNoSpace}]+)$`, 'g'),
+					`${$locale().hololive.comma}${$locale().hololive.ampersand}$1`
+				)}
 		{/if}
 	</p>
 
@@ -144,4 +145,9 @@
 			transform: scale(1.1);
 		}
 	}
+
+	.streamer-link {
+		color: var(--fg);
+		text-decoration: none;
+	}
 </style>
diff --git a/src/lib/Locale/english.ts b/src/lib/Locale/english.ts
index f68db610..509ebca0 100644
--- a/src/lib/Locale/english.ts
+++ b/src/lib/Locale/english.ts
@@ -273,7 +273,7 @@ const English: Locale = {
 	hololive: {
 		live: 'LIVE',
 		upcoming: 'Upcoming',
-		with: 'With ',
+		with: 'with ',
 		comma: ', ',
 		commaNoSpace: ',',
 		ampersand: '& ',
-- 
cgit v1.2.3