style: improve the look of the list page

Author: WarningImHack3r

src/routes/package/[...package]/SidePanel.svelte

@@ -55,7 +55,7 @@
 					{/if}
 					<li class="space-y-2">
 						{#if packages.length > 1}
-							<h3 class="font-display text-xl font-bold text-primary">{category.name}</h3>
+							<h3 class="font-display text-xl text-primary">{category.name}</h3>
 							<ul class="space-y-2">
 								{#each packages as { pkg } (pkg.name)}
 									<li>
@@ -78,15 +78,13 @@
 						{:else}
 							{@const firstPackageName = packages[0]?.pkg.name ?? ""}
 							{#if page.url.pathname.endsWith(`/${firstPackageName}`)}
-								<h3
-									class="font-display text-xl font-bold text-primary underline underline-offset-4"
-								>
+								<h3 class="font-display text-xl text-primary underline underline-offset-4">
 									{category.name}
 								</h3>
 							{:else}
 								<a
 									href="/package/{firstPackageName}"
-									class="group inline-flex w-full items-center font-display text-xl font-bold text-primary underline-offset-4 hover:underline"
+									class="group inline-flex w-full items-center font-display text-xl text-primary underline-offset-4 hover:underline"
 								>
 									{category.name}
 									<ChevronRight

src/routes/packages/+page.svelte

@@ -8,7 +8,7 @@
 <ul class="space-y-8">
 	{#each data.displayablePackages as { category, packages } (category)}
 		<li>
-			<h3 class="text-2xl font-bold text-primary">{category.name}</h3>
+			<h3 class="font-display text-3xl text-primary">{category.name}</h3>
 			<ul class="mt-2">
 				{#each packages as { owner, repoName, pkg }, index (pkg.name)}
 					{#if index > 0}
@@ -17,15 +17,19 @@
 					<li>
 						<a
 							href="/package/{pkg.name}"
-							class="group flex items-center rounded-lg px-4 py-3 transition-colors hover:bg-neutral-800"
+							class="group flex items-center rounded-xl px-4 py-3 transition-colors hover:bg-neutral-800"
 						>
 							<div class="flex flex-col">
 								<h4 class="font-medium">{pkg.name}</h4>
-								{#if category.slug === "others"}
-									<span class="text-muted-foreground">
+								<span class="text-muted-foreground">
+									{pkg.description}
+									<span class="font-bold">
+										{#if pkg.description}
+											•
+										{/if}
 										{owner}/{repoName}
 									</span>
-								{/if}
+								</span>
 							</div>
 							<ChevronRight class="mr-1 ml-auto transition-transform group-hover:translate-x-1" />
 						</a>