style: Small visual changes to home and library pages

src/lib/components/EpisodeCard/EpisodeCard.svelte

@@ -22,7 +22,7 @@
 
 	export let jellyfinId: string | undefined = undefined;
 
-	export let size: 'md' | 'dynamic' = 'md';
+	export let size: 'md' | 'sm' | 'dynamic' = 'md';
 
 	function handleSetWatched() {
 		if (!jellyfinId) return;
@@ -71,6 +71,7 @@
 			'flex flex-col px-2 lg:px-3 py-2 gap-2 text-left',
 			{
 				'h-44': size === 'md',
+				'h-36 lg:h-44': size === 'sm',
 				'h-full': size === 'dynamic',
 				group: !!jellyfinId,
 				'cursor-default': !jellyfinId
@@ -92,6 +93,7 @@
 		<div
 			class={classNames(
 				'flex-1 flex flex-col justify-between relative group-hover:opacity-0 group-focus-visible:opacity-0 transition-all',
+				'text-xs lg:text-sm font-medium text-zinc-300',
 				{
 					'opacity-8': !jellyfinId || watched
 				}
@@ -101,7 +103,7 @@
 				<div>
 					<slot name="left-top">
 						{#if airDate && airDate > new Date()}
-							<p class="text-xs lg:text-sm font-medium text-zinc-300">
+							<p>
 								{airDate.toLocaleString('en-US', {
 									month: 'short',
 									day: 'numeric',
@@ -110,18 +112,18 @@
 								})}
 							</p>
 						{:else if episodeNumber}
-							<p class="text-xs lg:text-sm font-medium text-zinc-300">{episodeNumber}</p>
+							<p>{episodeNumber}</p>
 						{/if}
 					</slot>
 				</div>
 				<div>
 					<slot name="right-top">
 						{#if runtime && !progress}
-							<p class="text-xs lg:text-sm font-medium text-zinc-300">
+							<p>
 								{runtime.toFixed(0)} min
 							</p>
 						{:else if runtime && progress}
-							<p class="text-xs lg:text-sm font-medium text-zinc-300">
+							<p>
 								{(runtime - (runtime / 100) * progress).toFixed(0)} min left
 							</p>
 						{/if}
@@ -135,7 +137,7 @@
 							<h2 class="text-zinc-300 text-sm font-medium">{subtitle}</h2>
 						{/if}
 						{#if title}
-							<h1 class="font-medium text-left line-clamp-2">
+							<h1 class="text-zinc-200 text-base font-medium text-left line-clamp-2">
 								{title}
 							</h1>
 						{/if}

src/lib/components/NetworkCard.svelte

@@ -6,7 +6,7 @@
 
 <a
 	href={`/discover/network/${network.name}`}
-	class="block border rounded-xl h-52 w-96 bg-stone-900 border-stone-700 cursor-pointer p-12 text-zinc-300 hover:text-amber-200 transition-all relative group selectable flex-shrink-0 max-w-[100%]"
+	class="block border rounded-xl h-52 w-96 bg-zinc-900 border-stone-700 cursor-pointer p-12 text-zinc-300 hover:text-amber-200 transition-all relative group selectable flex-shrink-0 max-w-[100%]"
 >
 	<div
 		class="absolute inset-10 bg-zinc-300 sm:hover:bg-amber-200 sm:group-hover:scale-105 transition-all"

src/lib/components/TitleShowcase/TitleShowcasesContainer.svelte

@@ -156,6 +156,7 @@
 						<EpisodeCard
 							on:click={() => (window.location.href = `/${prop.type}/${prop.tmdbId}`)}
 							{...prop}
+							size="sm"
 						/>
 					{/each}
 				{/await}