From 0045e3eab47ad8b13c94159caf7a10fba4e4a637 Mon Sep 17 00:00:00 2001 From: Zeya Phyo Date: Sat, 21 Feb 2026 08:38:04 +0000 Subject: [PATCH] Fix critical Burmese typography and layout issues MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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. --- frontend/app/globals.css | 26 +++++++++++++++++++++----- frontend/app/layout.tsx | 1 + frontend/app/page.tsx | 2 +- 3 files changed, 23 insertions(+), 6 deletions(-) diff --git a/frontend/app/globals.css b/frontend/app/globals.css index 391c787..c1864d1 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -34,8 +34,21 @@ } .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; + 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 */ @@ -60,21 +73,24 @@ /* Article Content - Better Typography */ .article-content { - @apply font-burmese text-gray-800 leading-loose; + @apply font-burmese text-gray-800; font-size: 1.125rem; - line-height: 1.9; + line-height: 2.0; } .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 { - @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 { @apply text-2xl font-semibold mt-6 mb-4 text-gray-800 font-burmese; + line-height: 1.75; } .article-content p { diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx index 1ea53cb..76bc269 100644 --- a/frontend/app/layout.tsx +++ b/frontend/app/layout.tsx @@ -23,6 +23,7 @@ export default function RootLayout({ +
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index b83be9f..8af89c6 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -59,7 +59,7 @@ export default async function ImprovedHome() {
{/* Hero Section with Featured Article */} {featured && ( -
+