Выделил карточку блога в компонент

src/lib/components/BlogCard.svelte

@@ -0,0 +1,100 @@
+<script lang="ts" module>
+	export enum BlogCardSize {
+		Short,
+		Long,
+		Both
+	}
+</script>
+
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+
+	export let post: App.BlogPost;
+	export let size: BlogCardSize = BlogCardSize.Both;
+
+	/**
+	 * rndtrash: пришлось дублировать классы с модификатором и без, потому что Tailwind ОЧЕНЬ не любит,
+	 * когда его классы склеивают из нескольких частей
+	 */
+
+	/**
+	 * Возвращает список классов для полноразмерной плашки.
+	 *
+	 * Возвращает пустую строку, если плашка может быть только короткой
+	 * @param classes
+	 * @param modClasses
+	 */
+	function fullClass(classes: string, modClasses: string): string {
+		if (size === BlogCardSize.Short) return '';
+		return size === BlogCardSize.Both ? modClasses : classes;
+	}
+
+	/**
+	 * Возвращает список классов для короткой карточки.
+	 *
+	 * Возвращает пустую строку, если плашка может быть только полноразмерной
+	 * @param classes
+	 */
+	function shortClass(classes: string): string {
+		return size === BlogCardSize.Long ? '' : classes;
+	}
+</script>
+
+<a
+	href="/blog/{post.slug}"
+	class="blog-card
+    {shortClass('flex-col justify-baseline')}
+    {fullClass('flex-row justify-stretch', 'sm:flex-row sm:justify-stretch')}"
+>
+	<div
+		class="relative w-full basis-auto overflow-hidden
+        {shortClass('h-32')}
+        {fullClass('h-auto basis-1/3', 'sm:h-auto sm:basis-1/3')}"
+	>
+		{#if post.thumbnail}
+			<img
+				class="thumbnail"
+				src={`/blog/${post.slug}/${post.thumbnail}`}
+				alt={post.thumbnailAlt ?? 'Миниатюра поста'}
+			/>
+		{/if}
+	</div>
+	<div class="flex w-full flex-col justify-center p-4 break-words md:p-8">
+		<div class="flex flex-row flex-wrap justify-between gap-4 pb-4">
+			<div class="flex items-center text-lg font-bold">
+				<Icon icon="material-symbols:calendar-today" class="mr-3" width={24} height={24} />
+				<p>
+					{new Date(post.date!).toLocaleString('default', {
+						month: 'short',
+						day: 'numeric',
+						year: 'numeric'
+					})}
+				</p>
+			</div>
+		</div>
+
+		<h2 class="text-3xl font-bold">{post.title}</h2>
+
+		{#if post.description}
+			<p>{post.description}</p>
+		{/if}
+	</div>
+</a>
+
+<style>
+	@import '$src/app.css';
+
+	.blog-card {
+		@apply flex w-full max-w-5xl overflow-hidden rounded-lg bg-slate-100 text-slate-950 drop-shadow-xl transition-all hover:drop-shadow-2xl;
+
+		img.thumbnail {
+			@apply absolute h-full w-full object-cover transition-transform;
+
+			transform: scale(1);
+		}
+
+		&:hover img.thumbnail {
+			transform: scale(1.1);
+		}
+	}
+</style>