341 lines
11 KiB
CSS
341 lines
11 KiB
CSS
/* print.css — Clean paper output.
|
||
Loaded LAST in head.html via <link media="print"> so its rules win
|
||
the cascade at print page widths (~595–820 CSS px on A4/Letter),
|
||
which otherwise trip every screen breakpoint below 900px (mobile
|
||
TOC bar, body bottom padding) and below 1499px (sidenote → footnote
|
||
fallback).
|
||
|
||
Hides chrome, expands body full-width, renders in black on white. */
|
||
|
||
@media print {
|
||
|
||
/* ----------------------------------------------------------------
|
||
Force light on paper. The custom-property overrides drive the
|
||
rest of the cascade — use them consistently below instead of
|
||
reaching for hardcoded #fff/#000 again.
|
||
---------------------------------------------------------------- */
|
||
:root,
|
||
[data-theme="dark"],
|
||
[data-theme="cappuccino"] {
|
||
--bg: #ffffff;
|
||
--bg-nav: #ffffff;
|
||
--bg-offset: #ffffff;
|
||
--bg-subtle: #f9f9f9;
|
||
--text: #000000;
|
||
--text-muted: #333333;
|
||
--text-faint: #555555;
|
||
--border: #cccccc;
|
||
--border-muted: #aaaaaa;
|
||
--rule: #cccccc;
|
||
}
|
||
|
||
/* Reading-mode body warm tints would otherwise repaint pages cream. */
|
||
body.reading-mode { --bg: #ffffff; }
|
||
|
||
/* ----------------------------------------------------------------
|
||
Hide chrome.
|
||
|
||
Site nav is `body > header` (templates/partials/nav.html); the
|
||
essay frontmatter is `.page-shell > header.essay-frontmatter`
|
||
(essay/blog-post/reading templates) and MUST stay visible — its
|
||
<h1> is the page title.
|
||
|
||
The mark slots (monogram + epistemic figure) and frontmatter
|
||
divider are decorative; suppressing them lets the title block
|
||
collapse to a clean masthead.
|
||
---------------------------------------------------------------- */
|
||
body > header,
|
||
.page-shell > footer,
|
||
#toc,
|
||
#toc-mobile-bar,
|
||
#reading-progress,
|
||
.skip-link,
|
||
.settings-wrap,
|
||
.selection-popup,
|
||
.link-popup,
|
||
.ann-tooltip,
|
||
.ann-picker,
|
||
.sidenote-popup-overlay,
|
||
.toc-toggle,
|
||
.section-toggle,
|
||
.nav-portals,
|
||
.nav-portal-toggle,
|
||
.footer-ornament,
|
||
.content-divider,
|
||
.aftermatter-divider,
|
||
.frontmatter-mark-slot,
|
||
.metadata .meta-pagelinks,
|
||
.page-meta-footer #backlinks,
|
||
.page-meta-footer #similar-links,
|
||
.version-history-more {
|
||
display: none !important;
|
||
}
|
||
|
||
/* The mobile TOC bar's screen rule also adds `body { padding-bottom: 2.5rem }`
|
||
to clear the fixed strip — undo it on paper. */
|
||
body {
|
||
padding-bottom: 0 !important;
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Layout — single full-width column
|
||
---------------------------------------------------------------- */
|
||
body {
|
||
font-size: 11pt;
|
||
line-height: 1.55;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.page-shell {
|
||
display: block !important;
|
||
min-height: 0 !important;
|
||
}
|
||
|
||
#content {
|
||
display: block !important;
|
||
width: 100% !important;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
#markdownBody,
|
||
.page-shell > #markdownBody,
|
||
body.reading-mode .page-shell > #markdownBody,
|
||
body.reading-mode.poetry > #markdownBody,
|
||
body.reading-mode.fiction > #markdownBody {
|
||
width: 100% !important;
|
||
max-width: 100% !important;
|
||
grid-column: unset !important;
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Essay frontmatter — collapse the 3-column viewport-spanning grid
|
||
to a single linear masthead. Mark slots already hidden above.
|
||
---------------------------------------------------------------- */
|
||
.essay-frontmatter {
|
||
display: block !important;
|
||
padding: 0 0 0.6em 0 !important;
|
||
margin: 0 0 1em 0 !important;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.frontmatter-title {
|
||
max-width: 100% !important;
|
||
width: 100% !important;
|
||
text-align: left !important;
|
||
justify-self: stretch !important;
|
||
}
|
||
|
||
.frontmatter-title > .page-title {
|
||
font-size: 22pt;
|
||
margin: 0 0 0.2em 0;
|
||
line-height: 1.15;
|
||
}
|
||
|
||
.essay-subtitle {
|
||
font-size: 12pt;
|
||
margin: 0 0 0.4em 0;
|
||
}
|
||
|
||
.frontmatter-title .meta-description {
|
||
text-align: left !important;
|
||
}
|
||
|
||
.frontmatter-title .meta-epistemic-strip {
|
||
justify-content: flex-start !important;
|
||
}
|
||
|
||
.essay-tailmatter {
|
||
max-width: 100% !important;
|
||
width: 100% !important;
|
||
padding: 0 !important;
|
||
margin: 0 0 1em 0 !important;
|
||
}
|
||
|
||
.essay-summary {
|
||
background: transparent !important;
|
||
border: 1px solid var(--border-muted);
|
||
padding: 0.6em 0.8em !important;
|
||
margin: 0.5em 0 1em 0 !important;
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Sidenotes — render inline as parenthetical asides.
|
||
|
||
The build's Sidenotes filter replaces Pandoc's
|
||
`section.footnotes` entirely with `<span class="sidenote">`
|
||
siblings of the ref, so there is no end-of-document footnote
|
||
section to fall back to. Sidenotes.css hides .sidenote at
|
||
narrow widths (which print triggers); print.css promotes them
|
||
back inline as small italic parentheticals so the surrounding
|
||
sentence flow stays intact — block-style footnotes mid-sentence
|
||
leave dangling clauses on the next line.
|
||
---------------------------------------------------------------- */
|
||
.sidenote {
|
||
display: inline !important;
|
||
position: static !important;
|
||
width: auto !important;
|
||
max-width: none !important;
|
||
margin: 0;
|
||
padding: 0;
|
||
border: none;
|
||
font-size: 0.85em;
|
||
font-style: italic;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.sidenote::before { content: " ["; font-style: normal; }
|
||
.sidenote::after { content: "]"; font-style: normal; }
|
||
|
||
.sidenote-para {
|
||
display: inline !important;
|
||
margin: 0 !important;
|
||
}
|
||
.sidenote-para + .sidenote-para::before {
|
||
content: " / ";
|
||
font-style: normal;
|
||
color: var(--text-faint);
|
||
}
|
||
|
||
.sidenote-num {
|
||
display: none !important;
|
||
}
|
||
|
||
.sidenote-ref a {
|
||
color: var(--text);
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
User annotations — strip on-screen highlight backgrounds; keep
|
||
a faint underline so the marker still surfaces on paper.
|
||
---------------------------------------------------------------- */
|
||
mark.user-annotation {
|
||
background: transparent !important;
|
||
color: inherit !important;
|
||
padding: 0 !important;
|
||
text-decoration: underline;
|
||
text-decoration-color: var(--text-faint);
|
||
text-decoration-thickness: 0.5pt;
|
||
text-underline-offset: 0.18em;
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Figures — strip on-screen card chrome (bg-offset card, inner
|
||
image border, drop shadow). Plain image + caption reads more
|
||
naturally on paper.
|
||
---------------------------------------------------------------- */
|
||
#markdownBody figure {
|
||
background: transparent !important;
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
padding: 0 !important;
|
||
margin: 1em auto !important;
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
#markdownBody figure img {
|
||
border: none !important;
|
||
}
|
||
|
||
#markdownBody figcaption {
|
||
font-size: 9pt;
|
||
margin-top: 0.3em;
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Drop cap — quieten the magazine flourish; at 3.8em it prints as
|
||
a giant black blob that wastes the first half page.
|
||
---------------------------------------------------------------- */
|
||
#markdownBody > p:first-of-type::first-letter,
|
||
#markdownBody .dropcap p::first-letter,
|
||
body.reading-mode.fiction > #markdownBody h2 + p::first-letter {
|
||
font-size: 2.4em;
|
||
line-height: 0.9;
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Page setup
|
||
---------------------------------------------------------------- */
|
||
@page {
|
||
margin: 2cm 2cm;
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Typography adjustments
|
||
---------------------------------------------------------------- */
|
||
h1, h2, h3, h4 {
|
||
page-break-after: avoid;
|
||
break-after: avoid;
|
||
}
|
||
|
||
p, li, blockquote {
|
||
orphans: 3;
|
||
widows: 3;
|
||
}
|
||
|
||
pre, figure, .exhibit, table {
|
||
page-break-inside: avoid;
|
||
break-inside: avoid;
|
||
}
|
||
|
||
/* Decorative inline link-icon glyphs (wikipedia W, arxiv X, github,
|
||
etc.) — they render as an inline-block 0.75em × 0.75em masked
|
||
SVG, fine on screen but on paper they print as an opaque black
|
||
speckle next to every external link. Suppress them entirely.
|
||
Critical: this also unsets the fixed width/height/mask so any
|
||
`::after` content from another rule renders as plain inline text. */
|
||
a[data-link-icon-type="svg"]::after,
|
||
a[data-link-icon]::after {
|
||
content: none !important;
|
||
display: none !important;
|
||
}
|
||
|
||
/* External links keep their default underline — readers can follow
|
||
the live URL via the PDF's preserved link metadata. We don't
|
||
inline the href as printed text because (a) it duplicates the
|
||
link, (b) `word-break: break-all` URLs interact badly with the
|
||
link-icon ::after we just suppressed, and (c) it makes the page
|
||
visually noisy. */
|
||
|
||
/* ----------------------------------------------------------------
|
||
Code blocks — strip background, border only
|
||
---------------------------------------------------------------- */
|
||
pre, code {
|
||
background: transparent !important;
|
||
border: 1px solid var(--border-muted) !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
/* ----------------------------------------------------------------
|
||
Page meta footer — keep epistemic + version history compact;
|
||
collapse the auto-fit grid so columns don't get pushed onto a
|
||
new page when the body ended near a break.
|
||
---------------------------------------------------------------- */
|
||
.page-meta-footer {
|
||
margin-top: 1.5em;
|
||
padding: 1em 0 0 0 !important;
|
||
border-top: 1px solid var(--border);
|
||
gap: 0.8em !important;
|
||
}
|
||
|
||
.meta-footer-full,
|
||
.meta-footer-grid {
|
||
width: 100% !important;
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
.meta-footer-grid {
|
||
display: block !important;
|
||
}
|
||
|
||
.meta-footer-section {
|
||
margin-bottom: 0.8em;
|
||
}
|
||
}
|