Improve Article, ArticleCard and SideNav

Author: Discusser

src/lib/components/blog/Article.svelte

@@ -16,11 +16,17 @@
 </script>
 
 <div class={twMerge('flex flex-col space-y-4', className)} {...restProps}>
-	<div class="flex items-center space-x-4">
-		<p class=" text-foreground text-2xl font-bold">
+	<div class="flex items-baseline space-x-4">
+		<p class="text-foreground grow text-2xl font-bold">
 			{article.title}
 		</p>
+		<span class="text-muted-foreground hidden text-sm sm:block">
+			{article.date.toLocaleDateString()}
+		</span>
 	</div>
+	<span class="text-muted-foreground block text-sm sm:hidden">
+		{article.date.toLocaleDateString()}
+	</span>
 
 	{#if children}
 		{@render children()}

src/lib/components/blog/ArticleCard.svelte

@@ -21,9 +21,9 @@
 				></Card.Title
 			>
 			{#if article.tags != undefined}
-				<div class="mt-1 space-x-1">
+				<div class="mt-1 flex flex-wrap space-x-1">
 					{#each article.tags as tag}
-						<span class="text-muted-foreground bg-muted rounded-md px-1 py-0.5 text-xs">
+						<span class="text-muted-foreground bg-muted mb-1 rounded-md px-1 py-0.5 text-xs">
 							{tag}
 						</span>
 					{/each}

src/lib/components/shared/SideNav.svelte

@@ -24,7 +24,7 @@
 				<li><NavAnchor {onclick} fuzzy href="/projects/other">Other</NavAnchor></li>
 			</ul>
 		</li>
-		<li><NavAnchor {onclick} href="/blog">Blog</NavAnchor></li>
-		<li><NavAnchor {onclick} href="/hobbies">Hobbies</NavAnchor></li>
+		<li><NavAnchor {onclick} fuzzy href="/blog">Blog</NavAnchor></li>
+		<li><NavAnchor {onclick} fuzzy href="/hobbies">Hobbies</NavAnchor></li>
 	</ul>
 </div>