src/lib/components/BlogCard.svelte

@@ -17,6 +17,7 @@
 
 	export let post: App.BlogPost;
 	export let size: BlogCardSize = BlogCardSize.Both;
+	export let fullHeight = false;
 
 	const type: App.BlogPostType = post.type ?? 'article';
 	const dateNow = new Date().valueOf();
@@ -60,6 +61,7 @@
 <a
 	href="/blog/{post.slug}"
 	class="blog-card
+	{fullHeight ? 'min-h-full' : ''}
     {isPostUpdated ? 'updated' : isPostNew ? 'new' : ''}
     {shortClass('flex-col justify-baseline')}
     {fullClass('flex-row justify-stretch', 'sm:flex-row sm:justify-stretch')}"
@@ -103,7 +105,7 @@
 			{/if}
 			<div class="flex items-center gap-2 p-1 text-lg font-bold">
 				<Icon icon={blogPostTypeToIcon(type)} width={28} height={28} />
-				<span>
+				<span class={shortClass('hidden', 'not-md:hidden')}>
 					{blogPostTypeToString(type)}
 				</span>
 			</div>

src/routes/+page.svelte

@@ -89,7 +89,7 @@
 	<div class="flex flex-row items-stretch justify-evenly gap-4 overflow-x-auto p-4">
 		{#each page.data.posts as post, i}
 			<div class="aspect-3/2 w-80 shrink-0">
-				<BlogCard {post} size={BlogCardSize.Short} />
+				<BlogCard {post} size={BlogCardSize.Short} fullHeight />
 			</div>
 		{/each}
 	</div>