fix(article): remove drop-cap + match link color/font to body text
Two complaints on /news/[slug]: - the oversized first-letter drop-cap looked editorial-magazine, not in spec — first paragraph should start as normal prose - inline links rendered near-white against the white page because Tailwind Typography's prose-a variable was overriding the (no-!important) brand-blue rule, leaving ghost links unreadable Drop the ::first-letter rule entirely. Force link color to #1e293b body, font-family to inherit, and decoration color to currentColor so the underline is the only visual link cue (still WCAG-distinguishable without relying on color). Hover keeps brand blue. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1606,16 +1606,6 @@ a.company-mention:hover {
|
|||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: #1e293b;
|
color: #1e293b;
|
||||||
}
|
}
|
||||||
.bb-article-prose p:first-of-type::first-letter {
|
|
||||||
float: left;
|
|
||||||
font-family: var(--font-sans), sans-serif;
|
|
||||||
font-size: 64px;
|
|
||||||
line-height: 0.95;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #0F172A;
|
|
||||||
padding: 6px 10px 0 0;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
.bb-article-prose h2 {
|
.bb-article-prose h2 {
|
||||||
font-family: var(--font-sans), sans-serif;
|
font-family: var(--font-sans), sans-serif;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
@@ -1652,16 +1642,22 @@ a.company-mention:hover {
|
|||||||
margin-right: 0.15em;
|
margin-right: 0.15em;
|
||||||
opacity: 0.55;
|
opacity: 0.55;
|
||||||
}
|
}
|
||||||
|
/* Inline article links: same color + font as body so they don't look like
|
||||||
|
pale ghost links against the white page. Underline is the only visual
|
||||||
|
cue that distinguishes a link from prose — required for accessibility
|
||||||
|
(links must be identifiable by more than color alone). !important
|
||||||
|
defeats Tailwind Typography's `prose-a` variable which otherwise wins. */
|
||||||
.bb-article-prose a {
|
.bb-article-prose a {
|
||||||
color: #1D4ED8;
|
color: #1e293b !important;
|
||||||
|
font-family: inherit !important;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-decoration-color: rgba(0, 212, 255, 0.5);
|
text-decoration-color: currentColor;
|
||||||
text-underline-offset: 3px;
|
text-underline-offset: 3px;
|
||||||
text-decoration-thickness: 1px;
|
text-decoration-thickness: 1px;
|
||||||
transition: color 120ms ease, text-decoration-color 120ms ease;
|
transition: color 120ms ease, text-decoration-color 120ms ease;
|
||||||
}
|
}
|
||||||
.bb-article-prose a:hover {
|
.bb-article-prose a:hover {
|
||||||
color: #1D4ED8;
|
color: #1D4ED8 !important;
|
||||||
text-decoration-color: #1D4ED8;
|
text-decoration-color: #1D4ED8;
|
||||||
}
|
}
|
||||||
.bb-article-prose figure {
|
.bb-article-prose figure {
|
||||||
|
|||||||
Reference in New Issue
Block a user