ratings + typography + icons: StarRating ★★★★½ 4.7 (212) widget on cards + article headers; NYT/WaPo bb-article-prose body (Georgia 19/1.75, 720px col, drop cap, pull quotes, italic captions); bump homepage share icons to 32px/15px to match article page

This commit is contained in:
Ryan Salazar
2026-05-22 05:34:24 +00:00
parent 9342db7a16
commit d4016a3c91
6 changed files with 271 additions and 26 deletions

View File

@@ -1519,3 +1519,140 @@ h1, h2, h3 {
.bb-neon .focus-visible\:border-\[\#3b82f6\]:focus-visible {
border-color: #00d4ff !important;
}
/* ─── Article body — NYT/WaPo-classy typography ──────────────────────────
Apply this class alongside the existing `prose prose-invert` on the
article body render in /news/[slug] and /articles/[slug]. */
.bb-article-prose {
font-family: Georgia, "Cheltenham Subhead", Charter, "Times New Roman", Times, serif !important;
font-size: 19px !important;
line-height: 1.75 !important;
color: #d6d4d0 !important;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.bb-article-prose p {
margin: 0 0 1.4em 0;
font-size: 19px;
line-height: 1.75;
}
.bb-article-prose p:first-of-type {
font-size: 22px;
line-height: 1.6;
color: #e8e6e0;
}
.bb-article-prose p:first-of-type::first-letter {
float: left;
font-family: Georgia, serif;
font-size: 64px;
line-height: 0.95;
font-weight: 700;
color: #f0eee8;
padding: 6px 10px 0 0;
margin-top: 4px;
}
.bb-article-prose h2 {
font-family: Georgia, "Cheltenham Subhead", Charter, serif;
font-size: 28px;
font-weight: 700;
color: #f5f3ee;
margin: 2em 0 0.6em;
letter-spacing: -0.01em;
line-height: 1.25;
}
.bb-article-prose h3 {
font-family: Georgia, "Cheltenham Subhead", Charter, serif;
font-size: 22px;
font-weight: 700;
color: #ece9e2;
margin: 1.6em 0 0.5em;
line-height: 1.3;
}
.bb-article-prose blockquote {
border-left: 3px solid #00ff9f;
padding: 0.4em 0 0.4em 1.2em;
margin: 1.8em 0;
font-style: italic;
font-size: 22px;
line-height: 1.5;
color: #e8e6e0;
}
.bb-article-prose blockquote::before {
content: "“";
font-family: Georgia, serif;
font-size: 54px;
line-height: 0;
vertical-align: -0.4em;
color: #00ff9f;
margin-right: 0.15em;
opacity: 0.55;
}
.bb-article-prose a {
color: #d6d4d0;
text-decoration: underline;
text-decoration-color: rgba(0, 212, 255, 0.5);
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color 120ms ease, text-decoration-color 120ms ease;
}
.bb-article-prose a:hover {
color: #00d4ff;
text-decoration-color: #00d4ff;
}
.bb-article-prose figure {
margin: 1.8em 0;
}
.bb-article-prose figure img,
.bb-article-prose img {
width: 100%;
height: auto;
border-radius: 1px;
}
.bb-article-prose figcaption,
.bb-article-prose .caption {
font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
color: #9a9690;
margin-top: 0.6em;
line-height: 1.45;
}
.bb-article-prose ul,
.bb-article-prose ol {
margin: 0 0 1.4em 1.4em;
padding: 0;
}
.bb-article-prose li {
margin: 0.4em 0;
line-height: 1.7;
}
.bb-article-prose hr {
border: none;
height: 1px;
background: rgba(255, 255, 255, 0.08);
margin: 2.5em 25% 2.5em 25%;
}
.bb-article-prose strong {
color: #f5f3ee;
font-weight: 700;
}
.bb-article-prose em {
color: #ece9e2;
}
.bb-article-prose code {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.92em;
background: #1a1a1a;
padding: 0.1em 0.4em;
border-radius: 3px;
color: #f0eee8;
}
@media (max-width: 720px) {
.bb-article-prose,
.bb-article-prose p { font-size: 17px; line-height: 1.7; }
.bb-article-prose p:first-of-type { font-size: 19px; }
.bb-article-prose p:first-of-type::first-letter { font-size: 52px; }
.bb-article-prose h2 { font-size: 24px; }
.bb-article-prose blockquote { font-size: 19px; }
}