aimond/sapiens-web2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve the visual appearance and readability of article content

Browse Source 
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
This commit is contained in:
kimjaehyeon0101
2025-09-30 03:16:52 +00:00
parent 303c846eae
commit 759698b3f8
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/pages/Article.tsx
View File

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