BLOG-87 Fix to unify post content title color (#88)
All checks were successful
Frontend CI / build (push) Successful in 1m5s

### Description

- Enhance typography and color consistency in PostPreview and PostContentPage
- Add tailwind configuration for custom typography styles

### Package Changes

_No response_

### Screenshots

_No response_

### Reference

Resolves #87

### Checklist

- [x] A milestone is set
- [x] The related issuse has been linked to this branch

Reviewed-on: #88
Co-authored-by: SquidSpirit <squid@squidspirit.com>
Co-committed-by: SquidSpirit <squid@squidspirit.com>
This commit is contained in:
SquidSpirit 2025-07-28 00:21:09 +08:00 committed by squid
parent 0896afe819
commit 64ebfaa3e9
4 changed files with 21 additions and 2 deletions

View File

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

View File

@ -16,7 +16,7 @@
onMount(() => postBloc.dispatch({ event: PostEventType.PostLoadedEvent, id: id })); onMount(() => postBloc.dispatch({ event: PostEventType.PostLoadedEvent, id: id }));
</script> </script>
<article class="container prose pb-10"> <article class="container prose pb-10 prose-gray">
{#if state.data} {#if state.data}
<PostContentHeader postInfo={state.data.info} /> <PostContentHeader postInfo={state.data.info} />
<div class="max-w-3xl"> <div class="max-w-3xl">

View File

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

View File

@ -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)'
}
}
})
}
}
};