SOKUREE/sokuree_web_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Style: Improve NewsDetail typography, layout, and image alignment

Browse Source
This commit is contained in:
choibk 2026-01-20 14:27:12 +09:00
parent 1ca741eeae
commit 468b7f3d68
2 changed files with 153 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/pages/NewsDetail.jsx
View File

@ -3,6 +3,13 @@ import { useParams, Link } from 'react-router-dom';
import { wpApi } from '../api/wordpress';
// Helper to handle raw markdown formatting if present
const formatContent = (htmlContent) => {
if (!htmlContent) return '';
// Replace **text** with <strong>text</strong> (Basic bold support)
return htmlContent.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
};
const NewsDetail = () => {
const { slug } = useParams();
const [post, setPost] = useState(null);
@ -81,7 +88,7 @@ const NewsDetail = () => {
{/* Content */}
<div
className="article-content"
dangerouslySetInnerHTML={{ __html: post.content.rendered }}
dangerouslySetInnerHTML={{ __html: formatContent(post.content.rendered) }}
/>
{/* Footer / Navigation */}

146
src/styles/main.css
View File

@ -1327,7 +1327,7 @@ img {
.news-article {
background-color: var(--white);
max-width: 800px;
max-width: 1200px;
width: 100%;
margin: 0 20px;
padding: 3rem;
@ -1374,6 +1374,16 @@ img {
border-radius: 0.75rem;
overflow: hidden;
box-shadow: var(--shadow);
display: flex;
justify-content: center;
background-color: var(--light-gray);
/* Optional: background for transparent images */
}
.article-image {
max-width: 100%;
height: auto;
object-fit: contain;
}
/* ... NewsDetail content styles ... */
@ -1473,4 +1483,138 @@ img {
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
/* =========================================
6. ARTICLE CONTENT STYLES (WordPress)
========================================= */
.article-content {
line-height: 1.8;
color: var(--text-color);
font-size: 1.05rem;
}
.article-content p {
margin-bottom: 1.5rem;
}
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
margin-top: 2.5rem;
margin-bottom: 1rem;
font-weight: 700;
line-height: 1.3;
color: var(--text-color);
}
.article-content h1 {
font-size: 2rem;
}
.article-content h2 {
font-size: 1.75rem;
border-bottom: 2px solid var(--border-color);
padding-bottom: 0.5rem;
}
.article-content h3 {
font-size: 1.5rem;
}
.article-content h4 {
font-size: 1.25rem;
}
.article-content h5 {
font-size: 1.1rem;
}
.article-content h6 {
font-size: 1rem;
}
.article-content ul,
.article-content ol {
margin-bottom: 1.5rem;
padding-left: 1.5rem;
}
.article-content ul {
list-style-type: disc;
}
.article-content ol {
list-style-type: decimal;
}
.article-content li {
margin-bottom: 0.5rem;
}
.article-content strong,
.article-content b {
font-weight: 700;
color: #0f172a;
}
.article-content a {
color: var(--primary-color);
text-decoration: underline;
}
.article-content img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 2rem 0;
box-shadow: var(--shadow);
}
.article-content blockquote {
border-left: 4px solid var(--primary-color);
padding: 1rem;
margin: 1.5rem 0;
background-color: var(--light-gray);
border-radius: 0 8px 8px 0;
font-style: italic;
}
/* Helper Classes for Alignments */
.article-content .aligncenter {
display: block;
margin: 0 auto 2rem;
text-align: center;
}
.article-content .alignright {
float: right;
margin-left: 1.5rem;
margin-bottom: 1.5rem;
}
.article-content .alignleft {
float: left;
margin-right: 1.5rem;
margin-bottom: 1.5rem;
}
/* Gutenberg Text Alignment */
.article-content .has-text-align-center {
text-align: center;
}
.article-content .has-text-align-right {
text-align: right;
}
.article-content .has-text-align-left {
text-align: left;
}
.article-content .has-text-align-justify {
text-align: justify;
}