mirror of https://github.com/requarks/wiki
NGPixel
4 days ago
parent
50adab2eac
commit
7ea92a982b
@ -0,0 +1,300 @@
|
||||
/*
|
||||
THE PRINTED PAGE
|
||||
================
|
||||
|
||||
What the page view and the version view become on paper. This file is the app SHELL's half of it --
|
||||
the chrome a page is drawn in. Two other places hold the rest, each because the rules there have to
|
||||
sit next to the ones they override: `_page-contents.scss` typesets the article, over the content
|
||||
palette declared at the top of that same file, and `SiteBanner.vue` handles the banner, for the
|
||||
cascade reason set out at the foot of this file.
|
||||
|
||||
Two problems, and they are different ones.
|
||||
|
||||
The first is that the shell IS a viewport. `WLayout` is `height: 100vh; overflow: hidden`, and the
|
||||
article scrolls inside `.page-container-scrl` rather than the window -- which is what keeps the
|
||||
header, the sidebar and the action rail still while a reader scrolls. On paper that means exactly one
|
||||
screenful is printed and the rest of the page is clipped away with nothing to say it happened. So
|
||||
every fixed height and every scroll container has to be unwound back into normal flow before
|
||||
anything else here is worth doing.
|
||||
|
||||
The second is that most of what is on screen is not the document. Someone printing a page wants the
|
||||
page: its title, where it sits, when it was last written to, and its contents. The navigation, the
|
||||
contents column, the action rail, the footer and the floating buttons are how they GOT here, not
|
||||
what they are taking away.
|
||||
|
||||
`!important` throughout, deliberately, and it is not laziness: what these rules overrule is inline
|
||||
styles (both views write `height: 100%` on the article column in the markup) and scoped rules from
|
||||
single-file components, which carry a data attribute and so outrank a plain class whatever the order.
|
||||
A print stylesheet that loses those fights prints a blank sheet and gives no clue why.
|
||||
|
||||
Colours are the exception -- there `!important` would be the wrong tool, because the rules being
|
||||
beaten are per-theme ones written as `.body--dark .page-header-title`. Naming both theme classes
|
||||
matches that specificity, and `app.scss` loads this file last so the tie goes to print.
|
||||
*/
|
||||
|
||||
@media print {
|
||||
/* ---------------------------------------------------------------------------
|
||||
THE SHEET
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
/*
|
||||
The margin the content gets.
|
||||
|
||||
Nothing here draws a running header or a page number: the browser prints its own -- title, URL,
|
||||
date, page count -- outside this margin, and they are the reader's to keep or turn off in the print
|
||||
dialog. CSS could only compete with them, and not well, since no engine this app targets fills a
|
||||
page margin box with the document's own URL.
|
||||
*/
|
||||
@page {
|
||||
margin: 16mm 14mm;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
THE SHELL STOPS BEING A VIEWPORT
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
html,
|
||||
body {
|
||||
height: auto !important;
|
||||
overflow: visible !important;
|
||||
/* -> Every layout paints `body` in the dark theme; on paper the sheet is the ground */
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
/*
|
||||
The shell's grid becomes a stack.
|
||||
|
||||
Its three columns exist to seat the drawers beside the page, and both drawers are gone below -- but
|
||||
that is not enough on its own: a grid item is stretched to its track, and the track is sized off a
|
||||
viewport height that means nothing here.
|
||||
*/
|
||||
.w-layout--page,
|
||||
.w-layout--container {
|
||||
display: block !important;
|
||||
height: auto !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/*
|
||||
And every box between the shell and the article gives up whatever it was doing to make one screenful
|
||||
fit -- the flex column, the claimed height, the scroll container. What is left is blocks in normal
|
||||
flow, which is the only arrangement that can run over a page break.
|
||||
*/
|
||||
.w-page-container,
|
||||
.w-page,
|
||||
.page-container,
|
||||
.page-container-scrl,
|
||||
.page-container-body,
|
||||
.w-scroll-area {
|
||||
display: block !important;
|
||||
height: auto !important;
|
||||
min-height: 0 !important;
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
flex: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
The article column's own padding goes: `@page` above is the margin now, and a second one inside it
|
||||
only narrows the measure. `--content-bleed` is the padding this one is reaching back through (see
|
||||
`_page-contents.scss`), so the print block there zeroes it to match -- left at 1rem the rule under
|
||||
the page title would overhang the text by exactly the padding that is no longer there.
|
||||
*/
|
||||
.page-container-body {
|
||||
/*
|
||||
Sides only, so the article keeps the full measure -- but not the top.
|
||||
|
||||
`.page-contents > :first-child` has its top margin zeroed, since on screen the column's own
|
||||
padding is the space above the article. With that padding gone the first block sat against the
|
||||
header's rule, and a page opening on an h1 -- which is most of them -- put 22pt of display type
|
||||
hard against a line drawn 2px thick. This is the margin that block would otherwise have brought
|
||||
with it.
|
||||
*/
|
||||
padding: 1.25rem 0 0 !important;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
WHAT DOES NOT GO ON PAPER
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
/*
|
||||
Navigation, the contents column, the action rail, the relation buttons under the article, the
|
||||
footer, and every button that floats over the page -- all of them ways to go somewhere else, which
|
||||
is the one thing a sheet of paper cannot do. The relations are the one that reads as content rather
|
||||
than chrome, and they are not: they are the next page and the previous one, drawn as buttons.
|
||||
|
||||
The last five are the transient overlays, and they are here because printing is not a moment anyone
|
||||
prepares for: a tooltip is on screen the instant the Print button is clicked, and Ctrl+P works just
|
||||
as well with a dialog open. Each would otherwise print over the first page.
|
||||
*/
|
||||
.w-header,
|
||||
.w-drawer,
|
||||
.w-drawer-scrim,
|
||||
.page-sidebar,
|
||||
.page-sidebar-scrim,
|
||||
.page-actions,
|
||||
.page-header-actions,
|
||||
.page-relations,
|
||||
.w-footer,
|
||||
.w-page-scroller,
|
||||
.corner-btn,
|
||||
.w-tooltip,
|
||||
.w-menu,
|
||||
.w-notifications,
|
||||
.w-loading,
|
||||
.w-dialog-backdrop,
|
||||
.w-dialog-viewport {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
WHAT DOES, FLATTENED
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
/*
|
||||
The title bar keeps the title, the description and the page's icon, and loses the gradient it sits
|
||||
in. Its 95px is a measurement for a bar in a window; here it is a heading, so it takes the height of
|
||||
what is in it and stays with the page it names.
|
||||
*/
|
||||
.page-header {
|
||||
height: auto;
|
||||
break-after: avoid;
|
||||
}
|
||||
|
||||
/*
|
||||
And the words sit closer to the rule under them.
|
||||
|
||||
The 16px below the title column is pitched for a bar in a window, where the gradient it sits on is
|
||||
what ends the header and the space is how the title is given room inside it. On paper the rule ends
|
||||
the header, so the space under the words is doing nothing but pushing the article down the sheet.
|
||||
Halved rather than dropped: the description still needs to clear the line under it.
|
||||
|
||||
Reached through `:has()` because the column is a stack of layout utilities and the two things in it
|
||||
are the only stable names in the markup -- the same column, class for class, in both headers.
|
||||
*/
|
||||
.page-header > div:has(> .page-header-title) {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* -> Same: the trail says where this page lives, which is no use on the sheet before it */
|
||||
.page-breadcrumbs {
|
||||
break-after: avoid;
|
||||
}
|
||||
|
||||
/*
|
||||
The home crumb becomes the site's own mark.
|
||||
|
||||
On screen that first crumb is a house because it is a BUTTON -- the way back to the root of the
|
||||
wiki. Nothing on a sheet of paper goes anywhere, so what is left is a house standing at the head of
|
||||
a path for no reason. The favicon in its place answers the question a printout actually raises,
|
||||
which is which wiki this page was printed from, and it does it in the width the house was already
|
||||
taking.
|
||||
|
||||
Matched on `data-icon` rather than on the crumb's position: `WIcon` writes the reference it drew
|
||||
onto every branch it renders, so this says "the home icon" instead of "whatever is first", and it
|
||||
stops matching by itself if that crumb ever stops being a house.
|
||||
|
||||
Drawn as a background on the link rather than swapped in the markup, because the swap is a
|
||||
statement about paper and nothing else -- `WBreadcrumbs` is a shared component and this is not a
|
||||
behaviour worth giving it a prop for. `print-color-adjust` because a background is exactly what a
|
||||
print dialog drops by default, and the whole point here is that the mark appears.
|
||||
|
||||
1.25em is the house's own size: `.w-breadcrumbs__el-icon` sets 125%, so the glyph draws at 1.25em
|
||||
of the bar's text. The crumb carries no label, so it needs no margin either.
|
||||
*/
|
||||
.page-breadcrumbs [data-icon='la:home'] {
|
||||
display: none;
|
||||
}
|
||||
.page-breadcrumbs .w-breadcrumbs__el:has([data-icon='la:home'])::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
background-image: url('/_site/current/favicon');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
print-color-adjust: exact;
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
|
||||
/*
|
||||
The indigo frame the version view draws down both sides and along the bottom goes.
|
||||
|
||||
On screen it is a surround sized to the window and drawn once, and it is how that view says a
|
||||
snapshot is being read. On paper there is no window to frame: it becomes a 5px band of colour down
|
||||
the edge of every sheet, saying what the bar at the top of the first one has already said in words
|
||||
-- which is why that bar keeps a heavier rule here than the page view's.
|
||||
*/
|
||||
.page-version {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Ink on paper, whichever theme the screen was in.
|
||||
|
||||
Without this a page printed from the dark theme comes out with a white title on white paper -- the
|
||||
header and the bars paint their own foregrounds per theme, and hiding their backgrounds is what
|
||||
leaves the foreground stranded. Both theme classes are named because that is the specificity those
|
||||
rules were written at.
|
||||
*/
|
||||
.body--light,
|
||||
.body--dark {
|
||||
.page-breadcrumbs {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
background: none;
|
||||
border-bottom: 1px solid #ccc;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/*
|
||||
The version view's bar keeps a heavier rule than the page view's, which is the one piece of
|
||||
emphasis worth the ink here: on screen it is indigo against grey chrome and unmistakable, and
|
||||
printed flat it would say "this is a record of a page and not the page" in the same voice as a
|
||||
breadcrumb trail. A printout that reads as current when it is not is the failure this view has to
|
||||
avoid.
|
||||
*/
|
||||
.page-breadcrumbs--version {
|
||||
border-bottom: 2px solid #000;
|
||||
}
|
||||
|
||||
/*
|
||||
A rule closes the header, in place of the gradient and the hairline it wears on screen.
|
||||
|
||||
Without one the title, the description and the article's first paragraph were three blocks of
|
||||
text with nothing but space between them, and the space alone did not say which of them was the
|
||||
page's name -- the very thing the gradient does on screen.
|
||||
|
||||
A hairline, and the trail's own grey: the same line the trail draws, top and bottom of one
|
||||
masthead. It was 2px, on the reasoning that twice the weight would say which of the two closes
|
||||
the block -- but a rule the full width of the sheet is the widest mark on it, and weight there
|
||||
buys emphasis nobody asked for. The space around it does that work instead.
|
||||
|
||||
1px is also the only width that survives the trip. On paper it is an absolute 1/96in whatever the
|
||||
printer's resolution, but a print PREVIEW is rasterised at the display's scale factor, and on a
|
||||
fractionally-scaled screen 2px lands on 2.5 or 3 device pixels and reads as a bar rather than a
|
||||
rule. A hairline is the one weight both media agree on.
|
||||
*/
|
||||
.page-header {
|
||||
background: none;
|
||||
border-top: 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.page-header-title {
|
||||
color: #000;
|
||||
}
|
||||
.page-header-subtitle {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
The site banner is the third place with print rules of its own, and the reason is the cascade
|
||||
rather than tidiness: `SiteBanner.vue` ships its styles in the page view's own lazily-imported
|
||||
chunk, which the browser adds AFTER this stylesheet. A rule here would tie with it on specificity
|
||||
and lose on order, so the banner's print treatment sits in that component -- and what it does
|
||||
there, in one line, is keep the notice and drop the ink.
|
||||
*/
|
||||
}
|
||||
Loading…
Reference in new issue