198 lines
6.5 KiB
CSS
198 lines
6.5 KiB
CSS
/* ============================================================
|
||
FRONTMATTER MARKS — monogram + epistemic figure
|
||
See MARKS.md for the full specification.
|
||
|
||
The header is a three-column grid sitting above the
|
||
cursive-L `content-divider`. Either or both mark columns
|
||
may be absent; the grid collapses cleanly because empty
|
||
columns size to zero (the conditional template guards
|
||
suppress the slot div entirely when its SVG is empty).
|
||
============================================================ */
|
||
|
||
/* Three-column grid:
|
||
[ monogram ] [ title block — 1fr ] [ epistemic figure ]
|
||
The 1fr column absorbs all extra width. Mark slots are
|
||
sized to their content via grid auto-placement. When the
|
||
template guard suppresses one or both slot divs, the column
|
||
simply does not exist for layout purposes. */
|
||
.essay-frontmatter {
|
||
display: grid;
|
||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||
column-gap: clamp(0.75rem, 2vw, 1.75rem);
|
||
row-gap: 0.75rem;
|
||
align-items: center;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
/* Reading variant (poetry / fiction) and blog variant share the
|
||
same grid; declared explicitly so future tweaks can diverge. */
|
||
.essay-frontmatter--reading,
|
||
.essay-frontmatter--blog {
|
||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||
}
|
||
|
||
/* Title block stays in the centre; never shrinks below 0. */
|
||
.frontmatter-title {
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Centre the title and metadata under the H1 — matches the
|
||
visual rhythm of the reference mockup, where the byline,
|
||
abstract, and compact strip sit in a stacked column. */
|
||
.frontmatter-title > .page-title {
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
/* Subtitle: a short secondary line, lighter than the H1, never
|
||
competing with it. Kept restrained so existing essays without
|
||
a subtitle render unchanged. */
|
||
.essay-subtitle {
|
||
font-family: var(--font-serif);
|
||
font-size: 1.05rem;
|
||
font-style: italic;
|
||
color: var(--text-muted);
|
||
margin: 0 0 0.75rem 0;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
/* Mark slot: a column wrapper that hosts the monogram or the
|
||
epistemic figure. The slot itself is a plain block; the SVG
|
||
inside controls its dimensions. line-height: 0 suppresses the
|
||
baseline descender gap that would otherwise add a few pixels
|
||
below the figure. */
|
||
.frontmatter-mark-slot {
|
||
line-height: 0;
|
||
}
|
||
|
||
/* The mark itself: a <figure> wrapping the inlined SVG. Two
|
||
inherited styles need to be overridden:
|
||
– `figure { margin: 2rem 0; max-width: 100% }` in images.css
|
||
(otherwise vertical margin pushes the mark off-grid).
|
||
– `#markdownBody figure { background, padding, border,
|
||
border-radius, box-shadow }` in typography.css (the
|
||
card-style chrome that wraps inline body figures with
|
||
a subtle paper-edge effect — not what we want for a
|
||
frontispiece glyph that should sit seamlessly on the
|
||
page background).
|
||
The `#markdownBody` prefix on the second rule has higher
|
||
specificity than a plain `.frontmatter-mark`, so we match
|
||
that prefix here too. */
|
||
.frontmatter-mark,
|
||
#markdownBody .frontmatter-mark {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 170px;
|
||
height: 170px;
|
||
max-width: none;
|
||
background: none;
|
||
border: none;
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
color: var(--text);
|
||
}
|
||
|
||
/* SVG fills its parent figure exactly. !important defeats the
|
||
global `img, video, svg { max-width: 100%; height: auto }` in
|
||
base.css for our specific case (which would otherwise leave the
|
||
figure as a tall, narrow strip when the column is grid-auto'd). */
|
||
.frontmatter-mark svg {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
color: inherit;
|
||
}
|
||
|
||
/* Epistemic figure inside an anchor: the anchor inherits color
|
||
from the slot (so currentColor in the SVG resolves to --text)
|
||
and stays inline-block so it doesn't pick up underline / link
|
||
chrome from the surrounding prose styles. */
|
||
.frontmatter-mark-slot--right > a {
|
||
display: inline-block;
|
||
color: inherit;
|
||
text-decoration: none;
|
||
line-height: 0;
|
||
}
|
||
|
||
/* ============================================================
|
||
COMPACT-STRIP CHIP ADDITIONS
|
||
============================================================ */
|
||
|
||
/* Inline trend arrow (↑ ↓ →) appended to the confidence percentage.
|
||
No leading separator — sits flush against the value it modifies. */
|
||
.ep-trend {
|
||
display: inline-block;
|
||
margin-left: 0.15em;
|
||
font-family: var(--font-sans);
|
||
font-size: 0.7rem;
|
||
color: var(--text-muted);
|
||
vertical-align: 0.05em;
|
||
}
|
||
.ep-row .ep-trend::before { content: none; }
|
||
|
||
/* Peer-status chip — same typography as .ep-status, distinct
|
||
data-term so future revisions can style it differently. */
|
||
.ep-peer-status {
|
||
font-family: var(--font-sans);
|
||
font-size: 0.72rem;
|
||
font-variant-caps: all-small-caps;
|
||
letter-spacing: 0.05em;
|
||
color: var(--text-muted);
|
||
}
|
||
.ep-peer-status::before {
|
||
content: "·\00a0";
|
||
color: var(--border);
|
||
}
|
||
|
||
/* Retracted: strikethrough across the chip text — the spec's
|
||
§4.1 visual marker for a retracted piece. */
|
||
.ep-peer-status--retracted {
|
||
text-decoration: line-through;
|
||
text-decoration-thickness: 1px;
|
||
}
|
||
|
||
/* Proved-confidence variant: same row typography, italic to
|
||
differentiate from a numeric XX% confidence chip. */
|
||
.ep-row--proved {
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ============================================================
|
||
MOBILE / NARROW SCREENS
|
||
Stack the marks above and below the title at the same
|
||
breakpoint where the TOC sidebar collapses (900px), and
|
||
shrink the SVGs at the mobile breakpoint (680px) per
|
||
MARKS.md §3.3 (170px desktop → 130px mobile).
|
||
============================================================ */
|
||
|
||
@media (max-width: 900px) {
|
||
.essay-frontmatter {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
justify-items: center;
|
||
}
|
||
.frontmatter-mark-slot--left { order: 0; }
|
||
.frontmatter-title { order: 1; }
|
||
.frontmatter-mark-slot--right { order: 2; }
|
||
.frontmatter-title { text-align: center; }
|
||
}
|
||
|
||
@media (max-width: 680px) {
|
||
.frontmatter-mark {
|
||
width: 130px;
|
||
height: 130px;
|
||
}
|
||
}
|
||
|
||
/* ============================================================
|
||
FOCUS MODE
|
||
The Display panel's focus mode (toggled via the
|
||
data-focus-mode attribute on <html>, see settings.js)
|
||
suppresses marks alongside the TOC and other chrome.
|
||
============================================================ */
|
||
[data-focus-mode] .frontmatter-mark,
|
||
[data-focus-mode] .frontmatter-mark-slot {
|
||
display: none;
|
||
}
|
||
[data-focus-mode] .essay-frontmatter {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
}
|