feat(web): add .stats-strip CSS component for pSEO article hero metrics
Grid layout (2-col mobile, 4-col sm+) with label/value/unit slots. Baked into static HTML at article generation time — no JS needed. output.css is git-ignored (rebuild with: bin/tailwindcss -i ... -o ...). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -477,6 +477,29 @@
|
||||
@apply text-sm font-semibold text-electric hover:text-electric-hover;
|
||||
}
|
||||
|
||||
/* ── Article Body Typography ── */
|
||||
/* ── Stats Strip — pSEO article hero metrics ── */
|
||||
/* Baked into static HTML at generation time; no JS needed. */
|
||||
.stats-strip {
|
||||
@apply grid grid-cols-2 gap-3 mb-8;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.stats-strip { grid-template-columns: repeat(4, 1fr); }
|
||||
}
|
||||
.stats-strip__item {
|
||||
@apply bg-soft-white border border-light-gray rounded-lg p-4;
|
||||
}
|
||||
.stats-strip__label {
|
||||
@apply text-xs text-slate uppercase tracking-wide mb-1;
|
||||
}
|
||||
.stats-strip__value {
|
||||
@apply text-2xl font-extrabold text-navy;
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
}
|
||||
.stats-strip__unit {
|
||||
@apply text-sm text-slate font-normal ml-1;
|
||||
}
|
||||
|
||||
/* ── Article Body Typography ── */
|
||||
.article-body h2 {
|
||||
@apply text-2xl mt-10 mb-4;
|
||||
|
||||
Reference in New Issue
Block a user