neuwirth/levineuwirth.org
neuwirth
/
levineuwirth.org
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

print.css: refresh page rules and prose treatments 

Tightens what gets printed and how. Reading-mode warm tints are
disabled so pages do not repaint cream; the mobile TOC bar's
screen-only body padding is reset; sidenote / footnote treatments
are reworked so the prose flows continuously instead of breaking
into a separate footnotes section; decorative link-icon glyphs
are suppressed while external links keep their underline so a
reader can follow them in the printed copy.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Levi Neuwirth 2026-05-23 12:06:20 -04:00
parent 802fc75968
commit a3b3457803
1 changed files with 224 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

259
static/css/print.css
View File

@ -1,5 +1,10 @@
/* print.css — Clean paper output.
Loaded on every page via <link media="print">.
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 {
@ -13,7 +18,8 @@
[data-theme="dark"],
[data-theme="cappuccino"] {
--bg: #ffffff;
--bg-offset: #f5f5f5;
--bg-nav: #ffffff;
--bg-offset: #ffffff;
--bg-subtle: #f9f9f9;
--text: #000000;
--text-muted: #333333;
@ -23,36 +29,71 @@
--rule: #cccccc;
}
/* Reading-mode body warm tints would otherwise repaint pages cream. */
body.reading-mode { --bg: #ffffff; }
/* ----------------------------------------------------------------
Hide chrome entirely
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.
---------------------------------------------------------------- */
header,
footer,
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,
.nav-portals {
.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.6;
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;
@ -60,7 +101,11 @@
margin: 0 !important;
}
#markdownBody {
#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;
@ -68,29 +113,157 @@
padding: 0 !important;
}
/* Sidenotes: pull inline as footnote-like blocks */
.sidenote-ref {
display: none;
/* ----------------------------------------------------------------
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: block;
display: inline !important;
position: static !important;
width: auto !important;
margin: 0.5em 2em;
padding: 0.4em 0.8em;
border-left: 2px solid var(--border);
font-size: 9pt;
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 2.5cm;
}
@page :first {
margin-top: 3cm;
margin: 2cm 2cm;
}
/* ----------------------------------------------------------------
@ -106,41 +279,49 @@
widows: 3;
}
pre, figure, .exhibit {
pre, figure, .exhibit, table {
page-break-inside: avoid;
break-inside: avoid;
}
/* Show href after external links */
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.8em;
color: var(--text-faint);
word-break: break-all;
}
/* But not for nav or obvious UI links */
.cite-link::after,
.meta-tag::after,
a[href^="#"]::after {
/* 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: var(--bg-subtle) !important;
background: transparent !important;
border: 1px solid var(--border-muted) !important;
box-shadow: none !important;
}
/* ----------------------------------------------------------------
Bibliography / footer — keep but compact
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-top: 1em;
padding: 1em 0 0 0 !important;
border-top: 1px solid var(--border);
gap: 0.8em !important;
}
.meta-footer-full,
@ -148,4 +329,12 @@
width: 100% !important;
max-width: 100% !important;
}
.meta-footer-grid {
display: block !important;
}
.meta-footer-section {
margin-bottom: 0.8em;
}
}