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 */}
|
{/* Article Body */}
|
||||||
{/* DO NOT OVERRIDE — article body prose styles */}
|
{/* DO NOT OVERRIDE — article body prose styles */}
|
||||||
<div
|
<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 }}
|
dangerouslySetInnerHTML={{ __html: article.content }}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|||||||
@@ -458,7 +458,7 @@ export default function NewsArticleDetailClient({
|
|||||||
<ArticleBody
|
<ArticleBody
|
||||||
html={article.content}
|
html={article.content}
|
||||||
everyN={4}
|
everyN={4}
|
||||||
className="bb-article-prose prose prose-invert max-w-none mb-8"
|
className="bb-article-prose prose max-w-none mb-8"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Tags */}
|
{/* Tags */}
|
||||||
|
|||||||
@@ -1589,7 +1589,7 @@ a.company-mention:hover {
|
|||||||
font-family: Georgia, "Cheltenham Subhead", Charter, "Times New Roman", Times, serif !important;
|
font-family: Georgia, "Cheltenham Subhead", Charter, "Times New Roman", Times, serif !important;
|
||||||
font-size: 19px !important;
|
font-size: 19px !important;
|
||||||
line-height: 1.75 !important;
|
line-height: 1.75 !important;
|
||||||
color: #d6d4d0 !important;
|
color: #1e293b !important;
|
||||||
max-width: 720px;
|
max-width: 720px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
@@ -1602,7 +1602,7 @@ a.company-mention:hover {
|
|||||||
.bb-article-prose p:first-of-type {
|
.bb-article-prose p:first-of-type {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: #e8e6e0;
|
color: #1e293b;
|
||||||
}
|
}
|
||||||
.bb-article-prose p:first-of-type::first-letter {
|
.bb-article-prose p:first-of-type::first-letter {
|
||||||
float: left;
|
float: left;
|
||||||
@@ -1610,7 +1610,7 @@ a.company-mention:hover {
|
|||||||
font-size: 64px;
|
font-size: 64px;
|
||||||
line-height: 0.95;
|
line-height: 0.95;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #f0eee8;
|
color: #0F172A;
|
||||||
padding: 6px 10px 0 0;
|
padding: 6px 10px 0 0;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
@@ -1618,7 +1618,7 @@ a.company-mention:hover {
|
|||||||
font-family: Georgia, "Cheltenham Subhead", Charter, serif;
|
font-family: Georgia, "Cheltenham Subhead", Charter, serif;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #f5f3ee;
|
color: #0F172A;
|
||||||
margin: 2em 0 0.6em;
|
margin: 2em 0 0.6em;
|
||||||
letter-spacing: -0.01em;
|
letter-spacing: -0.01em;
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
@@ -1627,7 +1627,7 @@ a.company-mention:hover {
|
|||||||
font-family: Georgia, "Cheltenham Subhead", Charter, serif;
|
font-family: Georgia, "Cheltenham Subhead", Charter, serif;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #ece9e2;
|
color: #0F172A;
|
||||||
margin: 1.6em 0 0.5em;
|
margin: 1.6em 0 0.5em;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
}
|
}
|
||||||
@@ -1638,7 +1638,7 @@ a.company-mention:hover {
|
|||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
color: #e8e6e0;
|
color: #1e293b;
|
||||||
}
|
}
|
||||||
.bb-article-prose blockquote::before {
|
.bb-article-prose blockquote::before {
|
||||||
content: "“";
|
content: "“";
|
||||||
@@ -1651,7 +1651,7 @@ a.company-mention:hover {
|
|||||||
opacity: 0.55;
|
opacity: 0.55;
|
||||||
}
|
}
|
||||||
.bb-article-prose a {
|
.bb-article-prose a {
|
||||||
color: #d6d4d0;
|
color: #1D4ED8;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-decoration-color: rgba(0, 212, 255, 0.5);
|
text-decoration-color: rgba(0, 212, 255, 0.5);
|
||||||
text-underline-offset: 3px;
|
text-underline-offset: 3px;
|
||||||
|
|||||||
Reference in New Issue
Block a user