fe754f634b
Bootstrapped during the 2026-06-06 BlockNinja consolidation. Was previously an unversioned directory inside ~/src/blockninja-themes/magazine-bold. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
192 lines
6.8 KiB
Go
192 lines
6.8 KiB
Go
package main
|
|
|
|
// magazineBoldUtilityCSS is appended into the host Tailwind input. It carries
|
|
// the editorial display-type utilities, font-slot classes, the hairline rule
|
|
// motif, the asymmetric grid utilities, and the per-accent pull-quote variants.
|
|
//
|
|
// All font-family references go through CSS variables per docs/FONTS.md.
|
|
// All color references go through `hsl(var(--token))` consumers of the 19
|
|
// theme tokens — no hardcoded hex, rgb(), or named colors. Per-accent
|
|
// pull-quote variants intentionally key off the `--accent` token (which the
|
|
// active preset rotates between hot pink, electric blue and lime).
|
|
//
|
|
// The `data-mb-accent` attribute selectors let a pull-quote pin a specific
|
|
// accent independently of the preset — they map back into the theme token
|
|
// space using the HSL triples documented in the spec §4 accent rows.
|
|
const magazineBoldUtilityCSS = `
|
|
/* ===========================================================
|
|
* Magazine Bold — theme utilities
|
|
* Appended to the Tailwind input via CSSManifest.InputCSSAppend.
|
|
* =========================================================== */
|
|
|
|
/* --- Font-slot classes (consume CMS-managed font variables) --- */
|
|
.font-display {
|
|
font-family: var(--font-heading, "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif);
|
|
font-feature-settings: "ss01", "ss02", "kern", "liga";
|
|
font-optical-sizing: auto;
|
|
}
|
|
.font-serif-sub {
|
|
font-family: var(--font-heading, "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif);
|
|
}
|
|
.font-sans {
|
|
font-family: var(--font-body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
|
|
}
|
|
.font-mono {
|
|
font-family: var(--font-mono, "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
|
|
}
|
|
|
|
/* --- Display-size utilities ------------------------------- */
|
|
/* text-folio: 220pt-equivalent oversized folio number / cover hit.
|
|
The clamp resolves to ~220px (~165pt) at 1440px, scaling down to 80px on mobile. */
|
|
.text-folio {
|
|
font-family: var(--font-heading, "Playfair Display", Georgia, serif);
|
|
font-size: clamp(80px, 18vw, 240px);
|
|
line-height: 0.85;
|
|
letter-spacing: -0.04em;
|
|
font-weight: 200;
|
|
font-style: italic;
|
|
}
|
|
.text-deck {
|
|
font-family: var(--font-body, "Inter", system-ui, sans-serif);
|
|
font-size: clamp(28px, 3.2vw, 48px);
|
|
line-height: 1.15;
|
|
letter-spacing: -0.01em;
|
|
font-weight: 400;
|
|
}
|
|
.text-kicker {
|
|
font-family: var(--font-mono, "JetBrains Mono", monospace);
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.18em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* --- Hairline rule motif ---------------------------------- */
|
|
.mb-hairline { border-color: hsl(var(--border)); border-width: 1px; }
|
|
.mb-hairline-top { border-top: 1px solid hsl(var(--border)); }
|
|
.mb-hairline-bottom { border-bottom: 1px solid hsl(var(--border)); }
|
|
|
|
/* --- Asymmetric editorial grid ---------------------------- */
|
|
.mb-grid-12 {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
.mb-grid-asym-cover {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
gap: 2rem;
|
|
align-items: end;
|
|
}
|
|
.mb-col-folio { grid-column: 1 / span 2; }
|
|
.mb-col-headline { grid-column: 3 / span 7; }
|
|
.mb-col-deck { grid-column: 10 / span 3; }
|
|
.mb-col-image-wide { grid-column: 1 / -1; }
|
|
|
|
@media (max-width: 1024px) {
|
|
.mb-grid-asym-cover { grid-template-columns: 1fr; gap: 1.25rem; }
|
|
.mb-col-folio, .mb-col-headline, .mb-col-deck { grid-column: 1 / -1; }
|
|
}
|
|
|
|
/* --- Photo essay frame spans ------------------------------ */
|
|
.mb-photo-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
gap: 1.25rem;
|
|
}
|
|
.mb-frame-half { grid-column: span 6 / span 6; }
|
|
.mb-frame-full { grid-column: 1 / -1; }
|
|
.mb-frame-tall { grid-column: span 5 / span 5; grid-row: span 2; }
|
|
|
|
@media (max-width: 768px) {
|
|
.mb-photo-grid { grid-template-columns: 1fr; }
|
|
.mb-frame-half, .mb-frame-full, .mb-frame-tall { grid-column: 1 / -1; grid-row: auto; }
|
|
}
|
|
|
|
/* --- Color-block accent panels ---------------------------- */
|
|
.colorblock-accent {
|
|
background-color: hsl(var(--accent));
|
|
color: hsl(var(--accent-foreground));
|
|
}
|
|
|
|
/* --- Per-accent pull-quote variants ----------------------- *
|
|
* These let a pull_quote override the preset accent on a per-instance basis.
|
|
* They use literal HSL triples that match the spec §4 accent values so a
|
|
* "pink" pull-quote always reads pink even on the ink-blue preset.
|
|
*/
|
|
[data-mb-accent="pink"] { --mb-accent-h: 330; --mb-accent-s: 95%; --mb-accent-l: 58%; }
|
|
[data-mb-accent="blue"] { --mb-accent-h: 220; --mb-accent-s: 100%; --mb-accent-l: 56%; }
|
|
[data-mb-accent="lime"] { --mb-accent-h: 78; --mb-accent-s: 90%; --mb-accent-l: 50%; }
|
|
[data-mb-accent] .mb-quote-bar {
|
|
background-color: hsl(var(--mb-accent-h) var(--mb-accent-s) var(--mb-accent-l));
|
|
}
|
|
[data-mb-accent] .mb-quote-text { color: hsl(var(--foreground)); }
|
|
|
|
/* --- Drop-cap (heading override) -------------------------- */
|
|
.mb-dropcap::first-letter {
|
|
font-family: var(--font-heading, "Playfair Display", Georgia, serif);
|
|
font-style: italic;
|
|
font-weight: 200;
|
|
float: left;
|
|
font-size: 5.5em;
|
|
line-height: 0.85;
|
|
padding-right: 0.08em;
|
|
margin-top: 0.04em;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* --- Body text override (Inter + margin folios) ----------- */
|
|
.mb-body {
|
|
font-family: var(--font-body, "Inter", system-ui, sans-serif);
|
|
font-size: clamp(16px, 1.05vw, 18px);
|
|
line-height: 1.55;
|
|
letter-spacing: 0.005em;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* --- Squared ink button ----------------------------------- */
|
|
.mb-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background-color: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
font-family: var(--font-mono, "JetBrains Mono", monospace);
|
|
font-size: 12px;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
padding: 0.875rem 1.5rem;
|
|
border: 1px solid hsl(var(--primary));
|
|
border-radius: 0;
|
|
transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
|
|
}
|
|
.mb-button:hover {
|
|
background-color: hsl(var(--accent));
|
|
color: hsl(var(--accent-foreground));
|
|
border-color: hsl(var(--accent));
|
|
}
|
|
.mb-button:focus-visible {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* --- Caption (mono, used by image override + photo essay) -- */
|
|
.mb-caption {
|
|
font-family: var(--font-mono, "JetBrains Mono", monospace);
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
letter-spacing: 0.01em;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* --- Full-bleed image with numbered folio ----------------- */
|
|
.mb-fullbleed { width: 100vw; max-width: 100vw; margin-left: 50%; transform: translateX(-50%); }
|
|
.mb-image-folio {
|
|
font-family: var(--font-mono, "JetBrains Mono", monospace);
|
|
font-size: 11px;
|
|
letter-spacing: 0.16em;
|
|
color: hsl(var(--muted-foreground));
|
|
text-transform: uppercase;
|
|
}
|
|
`
|