frontend/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "squidspirit-blog",
 	"private": true,
-	"version": "0.2.1",
+	"version": "0.2.2",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

frontend/src/app.css

@@ -1,5 +1,6 @@
 @import 'tailwindcss';
 @plugin '@tailwindcss/typography';
+@config "../tailwind.config.js";
 
 @font-face {
 	font-family: 'HackNerdMono';

frontend/src/lib/post/framework/ui/PostContentPage.svelte

@@ -20,7 +20,7 @@
 <svelte:head>
 	<title>{generateTitle(state.data?.info.title)}</title>
 </svelte:head>
-<article class="container prose pb-10">
+<article class="container prose pb-10 prose-gray">
 	{#if state.data}
 		<PostContentHeader postInfo={state.data.info} />
 		<div class="max-w-3xl">

frontend/src/lib/post/framework/ui/PostPreview.svelte

@@ -34,7 +34,7 @@
 	</div>
 	<div class="flex flex-col gap-y-2.5">
 		<PostPreviewLabels labels={postInfo.labels} />
-		<h2 class="line-clamp-1 text-lg font-bold">{postInfo.title}</h2>
+		<h2 class="line-clamp-1 text-lg font-bold text-gray-800">{postInfo.title}</h2>
 		<p class="line-clamp-3 text-justify text-sm">{postInfo.description}</p>
 		<span class="text-sm text-gray-500">{postInfo.formattedPublishedTime}</span>
 	</div>

frontend/tailwind.config.js

@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	theme: {
+		extend: {
+			typography: () => ({
+				gray: {
+					css: {
+						'--tw-prose-body': 'var(--color-gray-700)',
+						'--tw-prose-headings': 'var(--color-gray-800)',
+						'--tw-prose-links': 'var(--color-gray-800)',
+						'--tw-prose-bold': 'var(--color-gray-800)',
+						'--tw-prose-quotes': 'var(--color-gray-800)'
+					}
+				}
+			})
+		}
+	}
+};