fix(contrast): article-body white-on-white — body/dropcap/h2/h3/blockquote/links to navy + slate, drop prose-invert
Article detail pages (/news/[slug] and /articles/[slug]) inherited a dark-theme
prose color palette via the .bb-article-prose ruleset + Tailwind's
prose-invert utility. With the new light surface, every text element in
the article body rendered near-white on white, while the H1 (fixed in
the prior commit) was already navy. Bringing the body in line:
src/styles/tailwind.css:
- .bb-article-prose wrapper #d6d4d0 -> #1e293b !important (slate-800 for long-form body)
- .bb-article-prose p:first-of-type #e8e6e0 -> #1e293b
- .bb-article-prose first-letter #f0eee8 -> #0F172A (drop-cap full navy)
- .bb-article-prose h2 #f5f3ee -> #0F172A (in-body subhead matches the page H1)
- .bb-article-prose h3 #ece9e2 -> #0F172A
- .bb-article-prose blockquote #e8e6e0 -> #1e293b
- .bb-article-prose a (BASE) #d6d4d0 -> #1D4ED8 (inline links visibly blue at rest, no longer invisible-until-hover; hover unchanged)
src/app/news/[slug]/NewsArticleDetailClient.tsx
src/app/articles/[slug]/ArticleDetailClient.tsx
- Drop 'prose-invert' from the wrapper className on both routes so any
descendant the bb-article-prose rules don't explicitly color (lists,
strong, em, captions) falls back to Tailwind Typography's default
light-page slate-700 palette.
This commit is contained in:
@@ -356,7 +356,7 @@ export default function ArticleDetailClient({ article, relatedArticles, relatedF
|
||||
{/* Article Body */}
|
||||
{/* DO NOT OVERRIDE — article body prose styles */}
|
||||
<div
|
||||
className="bb-article-prose prose prose-invert max-w-none mb-8"
|
||||
className="bb-article-prose prose max-w-none mb-8"
|
||||
dangerouslySetInnerHTML={{ __html: article.content }}
|
||||
/>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user