From 759698b3f8b47bb21b014b51312b561b202ed75a Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Tue, 30 Sep 2025 03:16:52 +0000
Subject: [PATCH] Improve the visual appearance and readability of article
 content

Update CSS classes and styling in `client/src/pages/Article.tsx` to enhance the presentation of article titles, excerpts, and body content, improving overall readability.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/DGb2VKl
---
 client/src/pages/Article.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/src/pages/Article.tsx b/client/src/pages/Article.tsx
index d0ac815..07b7d95 100644
--- a/client/src/pages/Article.tsx
+++ b/client/src/pages/Article.tsx
@@ -180,11 +180,11 @@ export default function Article() {
 
       <main className="max-w-7xl mx-auto px-6 py-12">
         {/* Article Content */}
-        <article className="mb-16 max-w-4xl">
-          <header className="mb-8">
-            <h1 className="text-4xl font-bold mb-6 text-gray-900" data-testid="text-article-title">{article.title}</h1>
+        <article className="mb-16 max-w-4xl mx-auto">
+          <header className="mb-10">
+            <h1 className="text-4xl font-bold mb-6 text-gray-900 leading-tight" data-testid="text-article-title">{article.title}</h1>
             {article.excerpt && (
-              <p className="text-base text-gray-600 mb-8 leading-relaxed" data-testid="text-article-excerpt">
+              <p className="text-lg text-gray-600 mb-8 leading-relaxed" data-testid="text-article-excerpt">
                 {article.excerpt}
               </p>
             )}
@@ -192,7 +192,7 @@ export default function Article() {
 
           <div className="prose prose-lg max-w-none">
             <div 
-              className="text-base leading-relaxed text-gray-700"
+              className="text-base leading-7 text-gray-800"
               data-testid="text-article-content"
             >
               {parseArticleContent(article.content).map((part, index) => {
@@ -200,14 +200,14 @@ export default function Article() {
                   return (
                     <h3 
                       key={index} 
-                      className="text-xl font-bold mt-6 mb-2 text-gray-900"
+                      className="text-lg font-bold mt-8 mb-3 text-gray-900"
                     >
                       {part.content}
                     </h3>
                   );
                 }
                 return (
-                  <p key={index} className="mb-3 whitespace-pre-wrap">
+                  <p key={index} className="mb-4 whitespace-pre-wrap leading-7">
                     {part.content}
                   </p>
                 );