From 9951c82309aa5f444fe4cd3ecad9db91dae35ef2 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Wed, 1 May 2024 15:00:24 +0700
Subject: [PATCH] Adjust blog post elements styling

Adjusted the vertical space, font-size, and text color of various elements in the blog post preview for improved readability and visual flow. In addition, changed the heading level for better semantic structuring and applied styling changes to the `pre` tag in html-renderer.module.css for enhanced presentation.
---
 .../blog/_components/html-renderer.module.css          |  2 +-
 .../app/(marketing)/blog/_components/post-preview.tsx  | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/(marketing)/blog/_components/html-renderer.module.css b/apps/web/app/(marketing)/blog/_components/html-renderer.module.css
index dde8a25d1..65d0b7099 100644
--- a/apps/web/app/(marketing)/blog/_components/html-renderer.module.css
+++ b/apps/web/app/(marketing)/blog/_components/html-renderer.module.css
@@ -93,5 +93,5 @@ For more info: https://github.com/tailwindlabs/tailwindcss/issues/3258#issuecomm
 }
 
 .HTML pre {
-  @apply my-6 text-sm text-current bg-muted p-6;
+  @apply my-6 text-sm text-current border p-6 rounded-lg;
 }
diff --git a/apps/web/app/(marketing)/blog/_components/post-preview.tsx b/apps/web/app/(marketing)/blog/_components/post-preview.tsx
index 2641b4cf6..009c7907c 100644
--- a/apps/web/app/(marketing)/blog/_components/post-preview.tsx
+++ b/apps/web/app/(marketing)/blog/_components/post-preview.tsx
@@ -40,13 +40,13 @@ export function PostPreview({
         )}
       </If>
 
-      <div className={'flex flex-col space-y-2 px-1'}>
-        <div className={'flex flex-col space-y-1'}>
-          <h3 className="text-2xl font-semibold leading-snug">
+      <div className={'flex flex-col space-y-4 px-1'}>
+        <div className={'flex flex-col space-y-2'}>
+          <h2 className="text-2xl font-semibold leading-snug">
             <Link href={slug} className="hover:underline">
               {title}
             </Link>
-          </h3>
+          </h2>
 
           <div className="flex flex-row items-center space-x-2 text-sm">
             <div className="text-muted-foreground">
@@ -56,7 +56,7 @@ export function PostPreview({
         </div>
 
         <p
-          className="mb-4 text-base leading-relaxed text-secondary-foreground"
+          className="mb-4 text-sm leading-relaxed text-muted-foreground"
           dangerouslySetInnerHTML={{ __html: description ?? '' }}
         />
       </div>