HASH 385514bd8a71
DATE 2026-07-17
SUBJECT web: print fills the page, fs solved from paper width, like the mobile query
FILES 1 CHANGED
HASH 385514bd8a71
DATE 2026-07-17
SUBJECT web: print fills the page, fs solved
from paper width, like the mobile
query
FILES 1 CHANGED
┌─ ooknet-design/src/styles/global.scss ─────────────────────────────────────┐
│ diff --git a/ooknet-design/src/styles/global.scss b/ooknet-design/src/styles/globa │
│ l.scss │
│ index 9e0f677..60b44de 100644 │
│ --- a/ooknet-design/src/styles/global.scss │
│ +++ b/ooknet-design/src/styles/global.scss │
│ @@ -131,13 +131,17 @@ body { │
│ --ink: #000; │
│ --ink-soft: #444; │
│ --backdrop: #fff; │
│ - --fs: 11px; │
│ --frame-cells: 86; │
│ - --page-pad-t: 0; │
│ - --page-pad-r: 0; │
│ - --page-pad-b: 0; │
│ - --page-pad-l: 0; │
│ - --page-w: auto; │
│ + // Same solve as the mobile query: 86 cells ? 0.586em + 1em gutter │
│ + // each side = 52.4em, and fs ? 52.4 == 100vw makes the frame fill │
│ + // the printable width exactly. In paged media 100vw is the page │
│ + // area, so this adapts to letter, A4, or anything else. │
│ + --fs: calc(100vw / 52.4); │
│ + --page-pad-t: 1em; │
│ + --page-pad-r: 1em; │
│ + --page-pad-b: 1em; │
│ + --page-pad-l: 1em; │
│ + --page-w: 100%; │
│ } │
│ │
│ body { │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ ...design/src/styles/global.scss ───┐
│ diff --git a/ooknet-design/src/styles/global │
│ .scss b/ooknet-design/src/styles/global.scss │
│ index 9e0f677..60b44de 100644 │
│ --- a/ooknet-design/src/styles/global.scss │
│ +++ b/ooknet-design/src/styles/global.scss │
│ @@ -131,13 +131,17 @@ body { │
│ --ink: #000; │
│ --ink-soft: #444; │
│ --backdrop: #fff; │
│ - --fs: 11px; │
│ --frame-cells: 86; │
│ - --page-pad-t: 0; │
│ - --page-pad-r: 0; │
│ - --page-pad-b: 0; │
│ - --page-pad-l: 0; │
│ - --page-w: auto; │
│ + // Same solve as the mobile query: 86 c │
│ ells ? 0.586em + 1em gutter │
│ + // each side = 52.4em, and fs ? 52.4 == │
│ 100vw makes the frame fill │
│ + // the printable width exactly. In page │
│ d media 100vw is the page │
│ + // area, so this adapts to letter, A4, │
│ or anything else. │
│ + --fs: calc(100vw / 52.4); │
│ + --page-pad-t: 1em; │
│ + --page-pad-r: 1em; │
│ + --page-pad-b: 1em; │
│ + --page-pad-l: 1em; │
│ + --page-w: 100%; │
│ } │
│ │
│ body { │
└──────────────────────────────────────────────┘
[ BACK TO LOG ]
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET