From 38d5bd324213cb43c09094eae1fce9915e27a50b Mon Sep 17 00:00:00 2001
From: nyne <me@nyne.dev>
Date: Tue, 3 Jun 2025 16:02:57 +0800
Subject: [PATCH] Improve article rendering.

---
 frontend/src/markdown.css                    | 18 +++++++++++-------
 frontend/src/pages/resource_details_page.tsx |  2 +-
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/frontend/src/markdown.css b/frontend/src/markdown.css
index 2b67a9e..7dd604a 100644
--- a/frontend/src/markdown.css
+++ b/frontend/src/markdown.css
@@ -4,24 +4,28 @@ article {
     }
 
     h1 {
+        font-size: 24px;
+        font-weight: bold;
+        padding: 12px 0;
+        margin: 24px 0 12px;
+    }
+    h2 {
         font-size: 20px;
         font-weight: bold;
         padding: 12px 0;
-    }
-    h2 {
-        font-size: 18px;
-        font-weight: bold;
-        padding: 10px 0;
+        margin: 16px 0 8px;
     }
     h3 {
         font-size: 16px;
         font-weight: bold;
-        padding: 8px 0;
+        padding: 6px 0;
+        margin: 12px 0 4px;
     }
     h4 {
         font-size: 14px;
         font-weight: bold;
         padding: 6px 0;
+        margin: 12px 0 4px;
     }
     h5 {
         font-size: 12px;
@@ -36,7 +40,7 @@ article {
     p {
         font-size: 14px;
         line-height: 1.6;
-        margin: 8px 0;
+        margin: 12px 0;
     }
     ul {
         list-style-type: disc;
diff --git a/frontend/src/pages/resource_details_page.tsx b/frontend/src/pages/resource_details_page.tsx
index 9626e7a..f88421e 100644
--- a/frontend/src/pages/resource_details_page.tsx
+++ b/frontend/src/pages/resource_details_page.tsx
@@ -279,7 +279,7 @@ function Article({resource}: { resource: ResourceDetails }) {
             })
             html = splits.join(" ")
             return <div
-              className={`w-full max-w-xl rounded-xl overflow-clip ${html.includes("youtube") ? "aspect-video" : "h-48 sm:h-64"}`}
+              className={`w-full my-3 max-w-xl rounded-xl overflow-clip ${html.includes("youtube") ? "aspect-video" : "h-48 sm:h-64"}`}
               dangerouslySetInnerHTML={{
                 __html: html
               }}></div>