git_admin/burmddit
1
0
Fork 0
forked from minzeyaphyo/burmddit
Code Pull Requests Activity

Fix critical Burmese typography and layout issues

Browse Source 
- Update .font-burmese line-height to 1.85 (critical fix for text overlap)
- Set article content line-height to 2.0 for better readability
- Add Padauk font as fallback for better Myanmar script support
- Update all heading line-heights to 1.75 for proper spacing
- Reduce hero section height (600px → 350px mobile, 450px desktop)
- Improve font-size consistency (1.125rem for body text)

Addresses typography crisis identified in site review.
This commit is contained in:
Zeya Phyo
2026-02-21 08:38:04 +00:00
parent c274bbc979
commit 0045e3eab4
3 changed files with 23 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/app/globals.css
View File

@@ -34,8 +34,21 @@
} }
.font-burmese { .font-burmese {
font-family: 'Pyidaungsu', 'Noto Sans Myanmar', 'Myanmar Text', sans-serif; font-family: 'Pyidaungsu', 'Noto Sans Myanmar', 'Padauk', 'Myanmar Text', sans-serif;
letter-spacing: 0.01em; letter-spacing: 0.01em;
line-height: 1.85;
}
.font-burmese p,
.font-burmese .article-body {
line-height: 2.0;
font-size: 1.125rem;
}
.font-burmese h1,
.font-burmese h2,
.font-burmese h3 {
line-height: 1.75;
} }
/* Modern Card Design */ /* Modern Card Design */
@@ -60,21 +73,24 @@
/* Article Content - Better Typography */ /* Article Content - Better Typography */
.article-content { .article-content {
@apply font-burmese text-gray-800 leading-loose; @apply font-burmese text-gray-800;
font-size: 1.125rem; font-size: 1.125rem;
line-height: 1.9; line-height: 2.0;
} }
.article-content h1 { .article-content h1 {
@apply text-4xl font-bold mt-10 mb-6 text-gray-900 font-burmese leading-tight; @apply text-4xl font-bold mt-10 mb-6 text-gray-900 font-burmese;
line-height: 1.75;
} }
.article-content h2 { .article-content h2 {
@apply text-3xl font-bold mt-8 mb-5 text-gray-900 font-burmese leading-snug; @apply text-3xl font-bold mt-8 mb-5 text-gray-900 font-burmese;
line-height: 1.75;
} }
.article-content h3 { .article-content h3 {
@apply text-2xl font-semibold mt-6 mb-4 text-gray-800 font-burmese; @apply text-2xl font-semibold mt-6 mb-4 text-gray-800 font-burmese;
line-height: 1.75;
} }
.article-content p { .article-content p {

1
frontend/app/layout.tsx
View File

@@ -23,6 +23,7 @@ export default function RootLayout({
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Myanmar:wght@300;400;500;600;700&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Myanmar:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Padauk:wght@400;700&display=swap" rel="stylesheet" />
</head> </head>
<body className={`${inter.className} bg-gray-50`}> <body className={`${inter.className} bg-gray-50`}>
<Header /> <Header />

2
frontend/app/page.tsx
View File

@@ -59,7 +59,7 @@ export default async function ImprovedHome() {
<div className="min-h-screen bg-gradient-to-b from-gray-50 to-white"> <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
{/* Hero Section with Featured Article */} {/* Hero Section with Featured Article */}
{featured && ( {featured && (
<section className="relative h-[600px] w-full overflow-hidden fade-in"> <section className="relative h-[350px] md:h-[450px] w-full overflow-hidden fade-in">
<Image <Image
src={featured.featured_image || '/placeholder.jpg'} src={featured.featured_image || '/placeholder.jpg'}
alt={featured.title_burmese} alt={featured.title_burmese}