localadministrator/avbeat-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(contrast,typography): article header section — match body font (font-serif) + color (#1e293b)

Browse Source 
Top-of-article block (above the featured image) used Inter (font-heading)
and inconsistent colors (H1 navy, dek light-grey #999, author name
near-white #e0e0e0). With the body section now in Georgia-style serif
on slate-800 (#1e293b), the header read as a separate visual zone.

Unified both detail routes:

src/app/news/[slug]/NewsArticleDetailClient.tsx
  - H1   :309 font-heading text-[#0F172A] → font-serif text-[#1e293b]
  - Dek  :315 font-body text-[#999]        → font-serif text-[#1e293b]   (this is the lead summary line that was reading as 'white' on the Magewell article — same near-white #999 on white surface)
  - Author name link :332 font-heading text-[#e0e0e0] → font-serif text-[#1e293b]

src/app/articles/[slug]/ArticleDetailClient.tsx
  - H1   :255 same swap as above
  - Author name link :274 same swap as above

Secondary meta (category eyebrow #1D4ED8 blue, read-time/date/author-title #777) intentionally kept at their muted shades — those are subordinate text and read fine on the light surface.
This commit is contained in:
Local Administrator
2026-06-03 16:59:12 +00:00
parent 1a6b9d4333
commit 334115068b
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/articles/[slug]/ArticleDetailClient.tsx
View File

@@ -252,7 +252,7 @@ export default function ArticleDetailClient({ article, relatedArticles, relatedF
<span className="text-xs text-[#555]">·</span> <span className="text-xs text-[#555]">·</span>
<span className="text-xs text-[#777]">{article.readTime}</span> <span className="text-xs text-[#777]">{article.readTime}</span>
</div> </div>
<h1 className="font-heading text-3xl md:text-4xl font-bold mb-4 leading-tight text-[#0F172A]"> <h1 className="font-serif text-3xl md:text-4xl font-bold mb-4 leading-tight text-[#1e293b]">
{article.title} {article.title}
</h1> </h1>
<div className="mb-4"> <div className="mb-4">
@@ -271,7 +271,7 @@ export default function ArticleDetailClient({ article, relatedArticles, relatedF
<div> <div>
<Link <Link
href={`/authors/${article.authorSlug}`} href={`/authors/${article.authorSlug}`}
className="font-heading font-bold text-sm hover:text-[#1D4ED8] transition-colors text-[#e0e0e0]"> className="font-serif font-bold text-sm hover:text-[#1D4ED8] transition-colors text-[#1e293b]">
{article.author} {article.author}
</Link> </Link>
<p className="font-body text-xs text-[#777]">{article.authorTitle}</p> <p className="font-body text-xs text-[#777]">{article.authorTitle}</p>

6
src/app/news/[slug]/NewsArticleDetailClient.tsx
View File

@@ -306,13 +306,13 @@ export default function NewsArticleDetailClient({
<span className="text-xs text-[#777]">{article.readTime}</span> <span className="text-xs text-[#777]">{article.readTime}</span>
</div> </div>
<h1 className="font-heading text-3xl md:text-4xl font-bold mb-4 leading-tight text-[#0F172A]"> <h1 className="font-serif text-3xl md:text-4xl font-bold mb-4 leading-tight text-[#1e293b]">
{article.title} {article.title}
</h1> </h1>
<div className="mb-4"> <div className="mb-4">
<StarRating seed={article.slug} publishedAt={article.publishedAt || article.date} size="md" /> <StarRating seed={article.slug} publishedAt={article.publishedAt || article.date} size="md" />
</div> </div>
<p className="font-body text-lg text-[#999] mb-6 leading-relaxed"> <p className="font-serif text-lg text-[#1e293b] mb-6 leading-relaxed">
{article.excerpt} {article.excerpt}
</p> </p>
@@ -329,7 +329,7 @@ export default function NewsArticleDetailClient({
<div> <div>
<Link <Link
href={`/authors/${article.authorSlug}`} href={`/authors/${article.authorSlug}`}
className="font-heading font-bold text-sm hover:text-[#1D4ED8] transition-colors text-[#e0e0e0]"> className="font-serif font-bold text-sm hover:text-[#1D4ED8] transition-colors text-[#1e293b]">
{article.author} {article.author}
</Link> </Link>
<p className="font-body text-xs text-[#777]">{article.authorTitle}</p> <p className="font-body text-xs text-[#777]">{article.authorTitle}</p>