blog layout improvements, css

src/lib/components/blog/CategoryFilter.svelte

@@ -22,10 +22,6 @@
 </script>
 
 <section class="flex justify-center flex-col items-center {className}">
-	<header class="flex flex-col justify-center items-center">
-		<h1 class="h1">Blog</h1>
-		<span />
-	</header>
 	<h3 class="h3 mb-2 md:mb-3">Sort by category</h3>
 	<ul class="flex flex-wrap justify-center gap-2">
 		{#each options as option}

src/lib/components/blog/PostLayout.svelte

@@ -11,26 +11,15 @@
 	export let tags: string[] = [];
 </script>
 
-<article class="text-token">
+<article class="flex justify-center mt-4 mb-8">
-	<div class="flex justify-center mt-4 mb-8">
+	<div class=" w-full lg:w-[50rem] leading-[177.7%]">
-		<div class="w-full lg:w-[50rem] leading-[177.7%]">
+		<header>
-			<header>
+			<img
-				<img
+				src="/images/{imagesDirectoryName}/{slug}/{image}"
-					src="/images/{imagesDirectoryName}/{slug}/{image}"
+				alt={`${title}`}
-					alt={`${title}`}
+				class=" bg-black/50 w-full aspect-[21/9] max-h-[540px] rounded-t-[1.3rem]"
-					class=" bg-black/50 w-full aspect-[21/9] max-h-[540px] rounded-tr-[1.3rem]"
+			/>
-				/>
+		</header>
-			</header>
-			<div class="p-4 space-y-4">
-				<h3 class="h3" data-toc-ignore>{title}</h3>
-				<div class="prose max-w-none text-base">
-					<slot />
-				</div>
-			</div>
-		</div>
-	</div>
-	<hr class="opacity-50" />
-	<footer class="p-4 flex justify-start items-center space-x-4">
 		<div class="flex-auto flex justify-between items-center">
 			{#if tags && tags.length > 0}
 				<div class="flex mb-2 items-center gap-2">
@@ -46,7 +35,15 @@
 			{/if}
 			<small>On {formatDate(date)}</small>
 		</div>
-	</footer>
+		<div class="space-y-4 text-token">
+			<h2 class="h2" data-toc-ignore>{title}</h2>
+			<div class="prose max-w-none text-token">
+				<slot />
+			</div>
+		</div>
+	</div>
+	<hr class="opacity-50" />
+	<footer class="p-4 flex justify-start items-center space-x-4" />
 </article>
 
 <style lang="postcss">

src/lib/components/blog/PostPreview.svelte

@@ -27,37 +27,23 @@
 	});
 </script>
 
-<div class="grid auto-rows-auto w-full h-full text-token">
+<a
-	<a
+	{href}
-		{href}
+	{target}
-		{target}
+	data-sveltekit-preload-data="hover"
-		data-sveltekit-preload-data="hover"
+	class="card bg-gradient-to-br variant-gradient-primary-tertiary card-hover overflow-hidden flex flex-col space-y-4"
-		class="card bg-gradient-to-br variant-gradient-primary-secondary card-hover overflow-hidden flex flex-col space-y-4"
+	data-analytics={`{"context":"grid","variant":"preview"}`}
-		data-analytics={`{"context":"grid","variant":"preview"}`}
+>
-	>
+	<div class="flex flex-col justify-between auto-rows-auto w-full h-full text-token">
-		<!-- Detailed -->
-		<!-- <a
-				class="card "
-				href="/blog/{post.slug}"
-			> -->
 		<header>
 			<img
 				src="/images/blog/{post.slug}/{post.image}"
-				class="bg-black/50 w-full aspect-[3/2]"
+				class="bg-black/200 w-full aspect-[3/2]"
 				alt="Post"
 			/>
 		</header>
 		<section class="p-4 space-y-4">
-			<h6 class="text-2" data-toc-ignore>
+			<h2 class="h2" data-toc-ignore>{post.title}</h2>
-				<div class="items-center flex gap-2">
-					{#if post.tags}
-						{#each post.tags as tag}
-							<span class="chip variant-ghost-tertiary">{tag}</span>
-						{/each}
-					{/if}
-				</div>
-			</h6>
-			<h3 class="h3" data-toc-ignore>{post.title}</h3>
 			<article>
 				<p>
 					<!-- cspell:disable -->
@@ -66,33 +52,35 @@
 				</p>
 			</article>
 		</section>
-		<hr class="opacity-50" />
+		<section>
-		<footer class="p-4 flex justify-between">
+			<hr class="opacity-30 bg-tertiary-500" />
-			<div class="flex flex-wrap gap-2">
+			<footer class="p-4 flex justify-between">
-				{#if post.tags && post.tags.length > 0}
+				<div class="flex flex-wrap gap-2">
-					<small>tags: </small>
+					{#if post.tags && post.tags.length > 0}
-					{#each post.tags as tag}
+						<small>tags: </small>
-						<a
+						{#each post.tags as tag}
-							data-sveltekit-preload-data="hover"
+							<a
-							href="/blog?{new URLSearchParams({ tag }).toString()}"
+								data-sveltekit-preload-data="hover"
-						>
+								href="/blog?{new URLSearchParams({ tag }).toString()}"
-							<h6 class="chip variant-ghost-surface">{tag}</h6>
+							>
-						</a>
+								<h6 class="chip variant-filled-tertiary text-token">{tag}</h6>
-					{/each}
+							</a>
-				{/if}
+						{/each}
-			</div>
-			<div class="mt-auto">
-				<small>
-					{#if post.date}
-						<span class="text-sm ml-4">
-							{displayDate}
-						</span>
 					{/if}
-				</small>
+				</div>
-			</div>
+				<div class="mt-auto">
-		</footer>
+					<small>
-	</a>
+						{#if post.date}
-</div>
+							<span class="text-sm ml-4">
+								{displayDate}
+							</span>
+						{/if}
+					</small>
+				</div>
+			</footer>
+		</section>
+	</div>
+</a>
 
 <style lang="postcss">
 </style>

src/routes/blog/+page.svelte

@@ -1,4 +1,5 @@
 <!-- <script lang="ts">
+	import CategoryFilter from './../../lib/components/blog/CategoryFilter.svelte';
 	import { formatDate } from '$src/content/utils.js';
 	import { BlogPost } from '$lib/components/blog';
 	import * as config from '$lib/config';
@@ -44,6 +45,7 @@
 
 <script lang="ts">
 	import PostPreview from '$lib/components/blog/PostPreview.svelte';
+	import CategoryFilter from '$lib/components/blog/CategoryFilter.svelte';
 	import type { PageData } from './$types';
 	import type { BlogTag } from '$lib/types/blog';
 	import { page } from '$app/stores';
@@ -66,8 +68,12 @@
 	const displayAmount = 12;
 </script>
 
-<div class="blog-layout">
+<div>
-	<div>
+	<div class="space-y-8">
+		<header class="flex flex-col justify-center items-center">
+			<h1 class="h1 m-4">Blog</h1>
+			<CategoryFilter class="mb-2 md:mb-4" bind:selected={filter} />
+		</header>
 		<div
 			class="grid m-auto max-w-7xl w-full gap-6 grid-cols-none justify-center md:grid-cols-2 lg:grid-cols-3"
 		>
@@ -81,7 +87,7 @@
 
 	{#if posts.slice(displayAmount).length > 0}
 		<div>
-			<h2 class="mb-small text-center">Previous posts</h2>
+			<h2 class="mb-4 text-center">Previous posts</h2>
 			<div
 				class="previous grid m-auto max-w-7xl w-full gap-6 grid-cols-none justify-center md:grid-cols-2 lg:grid-cols-3"
 			>
@@ -94,3 +100,6 @@
 		</div>
 	{/if}
 </div>
+
+<style lang="postcss">
+</style>