68 lines
2.2 KiB
CSS
68 lines
2.2 KiB
CSS
/* Tofu — paper output. The screen is for typing; this is the actual product.
|
|
Nothing here states a raw value: the print scale lives in tokens.css. */
|
|
|
|
/* If a browser refuses a custom property here the margin is simply dropped and
|
|
its own default applies — nothing else in the sheet depends on this rule. */
|
|
@page {
|
|
margin: var(--print-page-margin);
|
|
}
|
|
|
|
@media print {
|
|
/* Remap the scale for paper: tighter leading, a whole week on one page. */
|
|
:root {
|
|
--size-title: var(--print-size-title);
|
|
--size-body: var(--print-size-body);
|
|
--space-3: var(--print-space-3);
|
|
--space-4: var(--print-space-4);
|
|
--control-height: var(--print-control-height);
|
|
--rule: var(--print-rule);
|
|
}
|
|
|
|
/* The desk does not exist on paper; the page itself is the sheet. */
|
|
body { background-color: var(--paper); }
|
|
|
|
#root {
|
|
max-width: none;
|
|
min-height: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-inline: 0;
|
|
}
|
|
|
|
/* Everything you operate rather than read. `.app-session` covers the footnote
|
|
saying where the week is stored — true on screen, noise on paper — and
|
|
`button`/`nav` stay matched by element as a safety net for anything added
|
|
later without a class. */
|
|
nav,
|
|
button,
|
|
.week-nav,
|
|
.status,
|
|
.suggestions,
|
|
.app-session,
|
|
.sheet-footer { display: none; }
|
|
|
|
/* The form keeps its two columns on paper even on a narrow page box: a
|
|
printed form reads badly with the label stacked above the line. This relies
|
|
on print.css being linked AFTER sheet.css — same specificity, source order. */
|
|
.field {
|
|
grid-template-columns: var(--label-column) 1fr;
|
|
align-items: baseline;
|
|
break-inside: avoid;
|
|
}
|
|
|
|
.field-label { padding-inline-start: 0; }
|
|
|
|
/* Browsers drop backgrounds when printing but keep borders — so the writing
|
|
lines survive, which is exactly what someone fills in by hand. */
|
|
.field-input {
|
|
background-color: transparent;
|
|
border-bottom: var(--rule-width) solid var(--rule-strong);
|
|
}
|
|
|
|
/* An unfilled line prints blank: a hint is for the screen, not for paper. */
|
|
.field-input::placeholder { color: transparent; }
|
|
|
|
.sheet-header { break-after: avoid; }
|
|
|
|
.day { break-inside: avoid; }
|
|
}
|