diff --git a/static/css/library.css b/static/css/library.css index f3b6fcf..f5b29bd 100644 --- a/static/css/library.css +++ b/static/css/library.css @@ -1,6 +1,35 @@ /* library.css — Library + Bibliography page components, plus the epistemic-filter UI that now lives on /search.html. */ +/* ============================================================ + LIBRARY PALETTE — scoped warm "candlelight" accent + Only loaded on /library.html (via $if(library)$) and /search.html, + so defining at :root here is effectively page-scoped. Consumed by + section headings, the divider, the intro blockquote, and the + "more on this shelf" link to give the library page a fine-press + feel without touching global colors. + ============================================================ */ + +:root { + --library-accent: #524638; /* muted warm-gray — reads as "warm" only if you look */ + --library-accent-muted: #7c7164; /* dusty taupe */ + --library-intro-ink: #3c3328; +} + +[data-theme="dark"] { + --library-accent: #b5a890; /* soft oat */ + --library-accent-muted: #897f6e; + --library-intro-ink: #c8beac; +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --library-accent: #b5a890; + --library-accent-muted: #897f6e; + --library-intro-ink: #c8beac; + } +} + /* ============================================================ FILTER UI Originally the Library's sort+filter panel; the sort panel @@ -150,18 +179,22 @@ ============================================================ */ .library-section { - margin-bottom: 2.5rem; + margin-bottom: 3rem; } +/* Section heading — fine-press chapter marker. Spectral small-caps in + walnut ink, letterspaced for a traditional printer's-ornament look. + The ornament span inherits currentColor and picks up the same accent. */ .library-section h2 { - font-family: var(--font-sans); - font-size: 0.78rem; - font-variant: small-caps; - letter-spacing: 0.08em; - color: var(--text-muted); - text-transform: lowercase; - font-weight: 500; - margin-bottom: 0.5rem; + font-family: var(--font-serif); + font-size: 1.2rem; + font-variant: all-small-caps; + font-feature-settings: "smcp" 1; + letter-spacing: 0.09em; + color: var(--library-accent); + text-transform: none; + font-weight: 400; + margin: 0 0 0.9rem 0; } /* Per-shelf ornament sitting before the heading text. SVGs in @@ -225,7 +258,7 @@ max-width: 60%; height: 24px; margin: 2.5rem auto; - color: var(--text-faint); + color: var(--library-accent-muted); background-color: currentColor; mask-image: url('/images/dingbats/library-divider.svg'); -webkit-mask-image: url('/images/dingbats/library-divider.svg'); @@ -243,37 +276,91 @@ text-align: right; font-family: var(--font-serif); font-style: italic; - font-size: 0.9rem; - color: var(--text-muted); - margin: 0.65rem 0 0; + font-size: 0.95rem; + color: var(--library-accent-muted); + margin: 0.75rem 0 0; } .library-more a { color: inherit; - text-decoration: underline; - text-decoration-color: var(--border); - text-decoration-thickness: 0.08em; - text-underline-offset: 0.2em; - transition: color var(--transition-fast), text-decoration-color var(--transition-fast); + text-decoration: none; + border-bottom: 1px solid transparent; + transition: border-color var(--transition-fast), color var(--transition-fast); } .library-more a:hover { - color: var(--text); - text-decoration-color: var(--border-muted); + color: var(--library-accent); + border-bottom-color: var(--library-accent-muted); } -/* Leading blockquote above the shelves, lifted from content/library.md. */ +/* Leading blockquote above the shelves, lifted from content/library.md. + Set as an epigraph: narrower measure, italic serif, warm ink, no + left-bar decoration. */ .library-intro { - margin: 0.5rem 0 2rem; + max-width: 32rem; + margin: 1.5rem 0 2.75rem; + font-family: var(--font-serif); + font-style: italic; + font-size: 0.95rem; + line-height: 1.55; + color: var(--library-intro-ink); +} + +.library-intro blockquote { + border: none; + margin: 0; + padding: 0; +} + +.library-intro blockquote p { + margin: 0 0 0.4rem 0; +} + +.library-intro blockquote p:last-of-type { + margin: 0; + font-style: normal; + font-size: 0.9rem; + color: var(--library-accent-muted); +} + +.library-intro a { + color: inherit; + text-decoration: underline; + text-decoration-color: var(--library-accent-muted); + text-decoration-thickness: 0.05em; + text-underline-offset: 0.2em; +} + +.library-intro a:hover { + text-decoration-color: var(--library-accent); +} + +/* Card-level typography refinements scoped to the library page. + Oldstyle figures on dates read as book-typesetting rather than + tabular UI; small-caps on the item-kind badge keeps it in the + same fine-press register as the section heading. Scoped via + `.library-section` so /new.html and tag pages keep their + current treatment (lining figures, uppercase badges). */ +.library-section .item-card-date { + font-variant-numeric: oldstyle-nums proportional-nums; + font-feature-settings: "onum" 1, "pnum" 1; +} + +.library-section .item-card-kind { + font-variant: all-small-caps; + font-feature-settings: "smcp" 1; + letter-spacing: 0.06em; } .library-section h2 a { color: inherit; text-decoration: none; + border-bottom: 1px solid transparent; + transition: border-color var(--transition-fast); } .library-section h2 a:hover { - color: var(--text); + border-bottom-color: var(--library-accent-muted); } /* ============================================================