504 lines
17 KiB
YAML
504 lines
17 KiB
YAML
# Editorial theme — codeless .bnp manifest (Theme Fleet Wave A, WO-TF-017).
|
|
# Synthesized into manifest.pb by `ninja plugin build` (no plugin.wasm).
|
|
#
|
|
# Persona: a personal essayist / independent newsletter. A reading experience
|
|
# above all — serif baseline grid, drop caps, running marginalia, small-caps
|
|
# section labels, author byline foregrounded. Typography does the design work;
|
|
# ornament is limited to hairline rules and generous whitespace.
|
|
theme_presets: presets.json
|
|
bundled_fonts: fonts.json
|
|
master_pages: master_pages.json
|
|
|
|
system_templates:
|
|
- key: editorial
|
|
title: Editorial
|
|
description: "A personal essayist's reading room: serif baseline grid, drop caps, running marginalia and small-caps labels. Built for longform writers and independent newsletters."
|
|
|
|
page_templates:
|
|
- system: editorial
|
|
key: default
|
|
title: Default
|
|
description: "Standard page: masthead, narrow reading column, colophon."
|
|
slots: [header, main, footer]
|
|
- system: editorial
|
|
key: full-width
|
|
title: Full Width
|
|
description: "Edge-to-edge for photo essays and cover images."
|
|
slots: [header, main, footer]
|
|
- system: editorial
|
|
key: landing
|
|
title: Front Page
|
|
description: "Front-page stack: masthead, lead essay, river of stories, colophon."
|
|
slots: [masthead, lead, river, footer]
|
|
- system: editorial
|
|
key: article
|
|
title: Article
|
|
description: "The reading centrepiece: byline, drop-cap opener, single column with a marginalia rail."
|
|
slots: [header, byline, main, marginalia, footer]
|
|
- system: editorial
|
|
key: blog-index
|
|
title: Archive
|
|
description: "Essay archive: masthead, featured essay, and a river of entries."
|
|
slots: [header, featured, main, footer]
|
|
- system: editorial
|
|
key: contact
|
|
title: Correspondence
|
|
description: "Contact layout with an optional aside for hours and location."
|
|
slots: [header, main, aside, footer]
|
|
- system: editorial
|
|
key: auth
|
|
title: Members
|
|
description: "Centred members shell with wordmark and hairline rule."
|
|
slots: [main, footer]
|
|
|
|
template_overrides:
|
|
# Chrome
|
|
- { template: editorial, block: navbar }
|
|
- { template: editorial, block: footer }
|
|
- { template: editorial, block: utility-bar }
|
|
- { template: editorial, block: announcement-bar }
|
|
# Marketing
|
|
- { template: editorial, block: hero }
|
|
- { template: editorial, block: feature-grid }
|
|
- { template: editorial, block: rich-section }
|
|
- { template: editorial, block: stats }
|
|
- { template: editorial, block: testimonial }
|
|
- { template: editorial, block: logo-strip }
|
|
- { template: editorial, block: pricing }
|
|
- { template: editorial, block: team }
|
|
- { template: editorial, block: faq }
|
|
- { template: editorial, block: timeline }
|
|
- { template: editorial, block: cta }
|
|
- { template: editorial, block: countdown }
|
|
# Primitives
|
|
- { template: editorial, block: heading }
|
|
- { template: editorial, block: text }
|
|
- { template: editorial, block: rich-text }
|
|
- { template: editorial, block: image }
|
|
- { template: editorial, block: quote }
|
|
- { template: editorial, block: divider }
|
|
- { template: editorial, block: button }
|
|
- { template: editorial, block: card }
|
|
- { template: editorial, block: gallery }
|
|
- { template: editorial, block: video-embed }
|
|
- { template: editorial, block: audio-embed }
|
|
# Commerce / local
|
|
- { template: editorial, block: menu-list }
|
|
- { template: editorial, block: event-list }
|
|
- { template: editorial, block: contact-form }
|
|
- { template: editorial, block: contact-card }
|
|
- { template: editorial, block: hours-location }
|
|
- { template: editorial, block: social-links }
|
|
# Blog family
|
|
- { template: editorial, block: blog-hero }
|
|
- { template: editorial, block: featured-posts }
|
|
- { template: editorial, block: related-posts }
|
|
- { template: editorial, block: popular-posts }
|
|
- { template: editorial, block: category-list }
|
|
- { template: editorial, block: post-hero }
|
|
- { template: editorial, block: post-metadata }
|
|
- { template: editorial, block: author-bio }
|
|
- { template: editorial, block: author-bio-hero }
|
|
- { template: editorial, block: newsletter-signup }
|
|
- { template: editorial, block: breadcrumbs }
|
|
- { template: editorial, block: sidebar-nav }
|
|
# Auth surface
|
|
- { template: editorial, block: auth-form }
|
|
- { template: editorial, block: password-reset-form }
|
|
- { template: editorial, block: auth-status }
|
|
# System
|
|
- { template: editorial, block: page-suggestions }
|
|
|
|
email_wrappers:
|
|
- editorial
|
|
|
|
css:
|
|
input_css_append: |
|
|
/* === Editorial theme — utility layer ===
|
|
*
|
|
* Personal-essayist identity: hairline rules, small-caps labels, drop caps,
|
|
* marginalia, narrow reading measure. Colour is ALWAYS consumed via
|
|
* hsl(var(--token)); font families ALWAYS via var(--font-heading|body|mono,
|
|
* <fallback>). No literal colours, no hardcoded families.
|
|
*/
|
|
|
|
@layer utilities {
|
|
:root {
|
|
--editorial-measure: 64ch;
|
|
--editorial-rule: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
/* --- Reading column + page widths --- */
|
|
.editorial-column {
|
|
max-width: var(--editorial-measure);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
.editorial-article-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 1.5rem;
|
|
max-width: 80rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.editorial-article-grid {
|
|
grid-template-columns: minmax(0, 64ch) 16rem;
|
|
}
|
|
}
|
|
|
|
/* --- Hero display title — responsive size via media queries so it is
|
|
* independent of the host Tailwind JIT (large text-* combos in theme
|
|
* templates are not reliably scanned). --- */
|
|
.editorial-hero-title {
|
|
font-family: var(--font-heading, "Playfair Display", Georgia, serif);
|
|
font-weight: 700;
|
|
letter-spacing: -0.015em;
|
|
line-height: 1.1;
|
|
color: hsl(var(--foreground));
|
|
font-size: 2.25rem;
|
|
}
|
|
@media (min-width: 640px) { .editorial-hero-title { font-size: 3rem; } }
|
|
@media (min-width: 1024px) { .editorial-hero-title { font-size: 3.5rem; } }
|
|
|
|
/* --- Narrow prose column with indented continuation paragraphs --- */
|
|
.prose-editorial {
|
|
max-width: var(--editorial-measure);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
font-family: var(--font-body, "Source Serif 4", "Source Serif Pro", Georgia, serif);
|
|
color: hsl(var(--foreground));
|
|
line-height: 1.7;
|
|
}
|
|
.prose-editorial p { margin: 0 0 1em 0; }
|
|
.prose-editorial p + p { text-indent: 1.5em; }
|
|
.prose-editorial h1,
|
|
.prose-editorial h2,
|
|
.prose-editorial h3,
|
|
.prose-editorial h4 {
|
|
font-family: var(--font-heading, "Playfair Display", Georgia, serif);
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
.prose-editorial a {
|
|
color: hsl(var(--accent));
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 2px;
|
|
}
|
|
.prose-editorial blockquote {
|
|
hanging-punctuation: first;
|
|
font-style: italic;
|
|
border-left: var(--editorial-rule);
|
|
padding-left: 1rem;
|
|
margin-left: 0;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* --- Small-caps / tracked labels (kickers, eyebrows, meta) --- */
|
|
.editorial-caps {
|
|
font-family: var(--font-body, "Source Serif 4", Georgia, serif);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.16em;
|
|
font-size: 0.72rem;
|
|
line-height: 1.4;
|
|
}
|
|
.editorial-meta {
|
|
font-family: var(--font-body, "Inter", -apple-system, sans-serif);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
font-size: 0.72rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
.editorial-section-label {
|
|
font-family: var(--font-body, "Source Serif 4", Georgia, serif);
|
|
text-transform: uppercase;
|
|
font-variant: small-caps;
|
|
font-feature-settings: "smcp";
|
|
letter-spacing: 0.15em;
|
|
font-size: 0.8rem;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
.editorial-section-label-rule {
|
|
border: 0;
|
|
border-top: var(--editorial-rule);
|
|
margin: 0.5rem 0 1.5rem 0;
|
|
}
|
|
|
|
/* --- Hairline rules --- */
|
|
hr.editorial-rule,
|
|
.editorial-rule,
|
|
.editorial-hairline {
|
|
border: 0;
|
|
border-top: var(--editorial-rule);
|
|
margin: 0;
|
|
}
|
|
|
|
/* --- Heading (Playfair, tight tracking, optional kicker) --- */
|
|
.editorial-heading {
|
|
font-family: var(--font-heading, "Playfair Display", Georgia, serif);
|
|
font-weight: 700;
|
|
letter-spacing: -0.015em;
|
|
color: hsl(var(--foreground));
|
|
line-height: 1.15;
|
|
}
|
|
.editorial-heading-kicker {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-family: var(--font-body, "Inter", -apple-system, sans-serif);
|
|
font-size: 0.72rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.18em;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
.editorial-underline {
|
|
position: relative;
|
|
padding-bottom: 0.35em;
|
|
}
|
|
.editorial-underline::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 1px;
|
|
background: hsl(var(--border));
|
|
}
|
|
|
|
/* --- Body text override --- */
|
|
.editorial-text {
|
|
font-family: var(--font-body, "Source Serif 4", "Source Serif Pro", Georgia, serif);
|
|
color: hsl(var(--foreground));
|
|
line-height: 1.7;
|
|
}
|
|
.editorial-text p + p { text-indent: 1.5em; margin-top: 0; }
|
|
|
|
/* --- Inline accent link --- */
|
|
.editorial-link {
|
|
color: hsl(var(--accent));
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 3px;
|
|
transition: color 150ms ease, text-decoration-color 150ms ease;
|
|
}
|
|
.editorial-link:hover,
|
|
.editorial-link:focus-visible { color: hsl(var(--foreground)); }
|
|
|
|
/* --- Button (hairline border, no fill, accent on hover) --- */
|
|
.editorial-button {
|
|
display: inline-block;
|
|
padding: 0.55rem 1.1rem;
|
|
font-family: var(--font-body, "Inter", -apple-system, sans-serif);
|
|
font-size: 0.78rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
background-color: transparent;
|
|
color: hsl(var(--foreground));
|
|
border: 1px solid hsl(var(--border));
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: color 150ms ease, border-color 150ms ease;
|
|
}
|
|
.editorial-button:hover,
|
|
.editorial-button:focus {
|
|
color: hsl(var(--accent));
|
|
border-color: hsl(var(--accent));
|
|
}
|
|
.editorial-button:focus-visible {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* --- Panel / card (hairline frame, no shadow) --- */
|
|
.editorial-panel,
|
|
.editorial-card {
|
|
border: 1px solid hsl(var(--border));
|
|
background-color: hsl(var(--card));
|
|
transition: border-color 150ms ease;
|
|
}
|
|
.editorial-panel:hover,
|
|
.editorial-card:hover { border-color: hsl(var(--accent)); }
|
|
|
|
/* --- Form field (hairline border, accent focus) --- */
|
|
.editorial-input {
|
|
width: 100%;
|
|
border: 1px solid hsl(var(--input));
|
|
background-color: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
padding: 0.55rem 0.75rem;
|
|
font-family: var(--font-body, "Source Serif 4", Georgia, serif);
|
|
font-size: 0.95rem;
|
|
}
|
|
.editorial-input::placeholder { color: hsl(var(--muted-foreground)); }
|
|
.editorial-input:focus {
|
|
outline: none;
|
|
border-color: hsl(var(--accent));
|
|
box-shadow: 0 0 0 1px hsl(var(--accent));
|
|
}
|
|
|
|
/* --- Figure / image caption --- */
|
|
.editorial-figure { margin: 1.5rem 0; }
|
|
.editorial-figure img { display: block; width: 100%; height: auto; }
|
|
.editorial-figure figcaption {
|
|
margin-top: 0.75rem;
|
|
padding-top: 0.5rem;
|
|
border-top: var(--editorial-rule);
|
|
font-family: var(--font-body, "Source Serif 4", "Source Serif Pro", Georgia, serif);
|
|
font-style: italic;
|
|
font-size: 0.85rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* --- Drop cap — oxblood accent first letter --- */
|
|
.editorial-dropcap p:first-of-type::first-letter {
|
|
font-family: var(--font-heading, "Playfair Display", Georgia, serif);
|
|
font-weight: 900;
|
|
font-style: italic;
|
|
color: hsl(var(--accent));
|
|
float: left;
|
|
font-size: 4.5em;
|
|
line-height: 0.85;
|
|
padding-right: 0.12em;
|
|
padding-top: 0.05em;
|
|
margin-bottom: -0.1em;
|
|
}
|
|
|
|
/* --- Marginalia rail (right-side italic notes) --- */
|
|
.editorial-marginalia {
|
|
font-family: var(--font-body, "Source Serif 4", "Source Serif Pro", Georgia, serif);
|
|
font-style: italic;
|
|
font-size: 0.8rem;
|
|
line-height: 1.5;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
.editorial-marginalia aside {
|
|
margin: 0 0 1.5rem 0;
|
|
padding-left: 0.75rem;
|
|
border-left: var(--editorial-rule);
|
|
opacity: 0;
|
|
animation: editorial-fade-in 600ms ease forwards;
|
|
}
|
|
@keyframes editorial-fade-in { to { opacity: 1; } }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.editorial-marginalia aside { animation: none; opacity: 1; }
|
|
}
|
|
@media (max-width: 1023px) {
|
|
.editorial-marginalia {
|
|
margin-top: 1.5rem;
|
|
border-top: var(--editorial-rule);
|
|
padding-top: 1rem;
|
|
}
|
|
}
|
|
|
|
/* --- Masthead wordmark --- */
|
|
.editorial-masthead-wordmark {
|
|
font-family: var(--font-heading, "Playfair Display", Georgia, serif);
|
|
font-weight: 900;
|
|
font-style: italic;
|
|
letter-spacing: -0.02em;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
.editorial-masthead-kicker {
|
|
font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
.editorial-masthead-rule {
|
|
border: 0;
|
|
border-top: var(--editorial-rule);
|
|
margin: 0.5rem 0 0 0;
|
|
}
|
|
|
|
/* --- Pull quote — Playfair italic in oxblood --- */
|
|
.editorial-pullquote {
|
|
font-family: var(--font-heading, "Playfair Display", Georgia, serif);
|
|
font-style: italic;
|
|
font-size: 2rem;
|
|
line-height: 1.2;
|
|
color: hsl(var(--accent));
|
|
margin: 2.5rem auto;
|
|
max-width: var(--editorial-measure);
|
|
border: none;
|
|
}
|
|
.editorial-pullquote-attribution {
|
|
display: block;
|
|
margin-top: 1rem;
|
|
font-family: var(--font-body, "Source Serif 4", Georgia, serif);
|
|
font-style: normal;
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* --- Byline --- */
|
|
.editorial-byline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 0;
|
|
border-top: var(--editorial-rule);
|
|
border-bottom: var(--editorial-rule);
|
|
}
|
|
.editorial-byline-photo {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background-color: hsl(var(--muted));
|
|
flex-shrink: 0;
|
|
object-fit: cover;
|
|
}
|
|
.editorial-byline-author {
|
|
font-family: var(--font-body, "Inter", -apple-system, sans-serif);
|
|
font-weight: 500;
|
|
font-size: 0.95rem;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
.editorial-byline-meta {
|
|
font-family: var(--font-body, "Inter", -apple-system, sans-serif);
|
|
font-size: 0.72rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* --- Colophon --- */
|
|
.editorial-colophon {
|
|
border-top: var(--editorial-rule);
|
|
padding-top: 1.5rem;
|
|
font-family: var(--font-body, "Inter", -apple-system, sans-serif);
|
|
font-size: 0.8rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
.editorial-colophon-issn {
|
|
font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
/* --- Reading-progress underline (CSS-only atmosphere) --- */
|
|
.editorial-progress {
|
|
position: sticky;
|
|
top: 0;
|
|
height: 2px;
|
|
background: hsl(var(--accent));
|
|
transform-origin: 0 50%;
|
|
animation: editorial-progress linear both;
|
|
animation-timeline: scroll(root block);
|
|
z-index: 50;
|
|
}
|
|
@keyframes editorial-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.editorial-progress { animation: none; transform: scaleX(0); }
|
|
}
|
|
}
|