/* =============================================================================
EU — Desere Road Trip · print stylesheet
-----------------------------------------------------------------------------
Target : browser print dialog (Chrome / Firefox / Safari → "Save as PDF")
Baseline: CSS Fragmentation L3 (`break-*`) with legacy `page-break-*` fallback
Scope : refactor only — the rendered output is unchanged from the previous
revision. Every behavioural suggestion is listed in REVIEW NOTES at
the foot of this file rather than applied silently.
========================================================================== */
@media print {
/* -------------------------------------------------------------------------
1. Tokens
Kept inside the print context so nothing leaks into the screen cascade.
NOTE: custom properties are deliberately NOT used inside `@page` — the
page context does not inherit from `:root` in Blink, so literals are used
there and mirrored here for reference only.
---------------------------------------------------------------------- */
:root {
--print-font-stack: 'Trebuchet MS', sans-serif;
--print-ink: black;
--print-size-body: 12pt;
--print-size-table: 10pt;
--print-size-title: 28pt;
--print-size-subtitle: 18pt;
--print-leading: 1.2;
--print-rule: 1px solid black; /* table grid */
--print-frame: 2px solid black; /* info panels */
--print-gutter: 30px; /* float gutter beside images */
--print-panel-padding: 10px;
--print-panel-margin: 5px;
}
/* -------------------------------------------------------------------------
2. Page geometry
---------------------------------------------------------------------- */
@page {
size: A4 portrait;
margin: 15mm;
/* Margin boxes are a Paged Media L3 feature. No browser implements them,
so the running page number below is inert when printing from Chrome,
Firefox or Safari — the browser's own header/footer supplies numbering.
Retained verbatim so the sheet stays portable to Paged.js, Prince,
WeasyPrint or Vivliostyle without a rewrite. */
@bottom-center {
content: "Page " counter(page) " / " counter(pages);
font-size: 10pt;
text-align: center;
}
}
/* Suppress the running footer on the cover page. */
@page :first {
@bottom-center {
content: none;
}
}
/* Suppress it again on the logo page.
`:nth()` is a Paged Media L4 draft selector: Prince and Antenna House
honour it, browsers and Paged.js drop this whole at-rule as invalid.
Inert here, harmless, and correct in a real formatter. */
@page :nth(2) {
@bottom-center {
content: none;
}
}
/* -------------------------------------------------------------------------
3. Base
---------------------------------------------------------------------- */
body {
margin: 0;
font-family: var(--print-font-stack);
font-size: var(--print-size-body);
color: var(--print-ink);
background-color: transparent;
}
#main {
margin-inline: 0;
padding: 0;
line-height: var(--print-leading);
color: var(--print-ink);
}
/* -------------------------------------------------------------------------
4. Screen-only furniture
Consolidated from four separate blocks. `nav` previously also carried
`width: 0`, which is unreachable once the box is not generated.
---------------------------------------------------------------------- */
nav,
#myNavbar,
footer,
hr {
display: none;
}
/* -------------------------------------------------------------------------
5. Headings & pagination
`header h1` outranks the bare `h1` rule on specificity (0,0,2 vs 0,0,1),
so the cover title keeps its break-avoid regardless of source order.
---------------------------------------------------------------------- */
header h1 {
padding-top: 6cm;
font-size: var(--print-size-title);
text-align: center;
page-break-before: avoid;
break-before: avoid;
}
header h2 {
padding-top: 3cm;
font-size: var(--print-size-subtitle);
text-align: center;
}
/* Each top-level section opens on a fresh sheet. */
h1 {
color: var(--print-ink);
page-break-before: always;
break-before: page;
}
/* Keep a subheading welded to the copy that follows it. */
h2,
h3 {
color: var(--print-ink);
page-break-inside: avoid;
break-inside: avoid;
page-break-after: avoid;
break-after: avoid;
}
/* -------------------------------------------------------------------------
6. Lists
---------------------------------------------------------------------- */
ul {
margin-inline-end: 50px;
page-break-before: avoid;
break-before: avoid;
}
li {
page-break-before: avoid;
break-before: avoid;
}
/* -------------------------------------------------------------------------
7. Links
Anchors print flat, with the destination appended in parentheses.
The separator is a literal TAB, written as the escape `\9 ` (the trailing
space terminates the escape sequence) rather than a raw control character
embedded in the source.
---------------------------------------------------------------------- */
a {
color: var(--print-ink);
font-weight: normal;
font-style: normal;
text-decoration: none;
}
a[href]::after {
content: "\9 (" attr(href) ")";
}
/* -------------------------------------------------------------------------
8. Images
---------------------------------------------------------------------- */
img {
display: block;
float: left;
padding-inline: 5px var(--print-gutter);
padding-block-end: 5px;
page-break-inside: avoid;
break-inside: avoid;
}
/* Images inside a paragraph opt out of the float and the gutter by taking
whatever the paragraph itself carries.
`inherit` here resolves against /
, not against the `img` rule
above — see REVIEW NOTE [C]. Preserved as-authored. */
p img {
display: block;
float: inherit;
padding-inline-end: inherit;
page-break-inside: avoid;
break-inside: avoid;
}
li img {
display: block;
float: left;
padding-inline-end: inherit;
page-break-inside: avoid;
break-inside: avoid;
}
/* -------------------------------------------------------------------------
9. Tables
Merged from three overlapping `table` blocks. The winning cascade in the
previous revision was: width 100%, border 1px (the earlier `width: auto`
and `border: 2px solid` were both overridden) — reproduced exactly.
---------------------------------------------------------------------- */
table {
width: 100%;
font-size: var(--print-size-table);
page-break-inside: avoid;
break-inside: avoid;
}
table,
td,
th {
border: var(--print-rule);
}
/* Inert under the default `border-collapse: separate` — see NOTE [D]. */
tr {
border: var(--print-rule);
}
th,
td {
padding: 2px;
text-align: left;
}
table th {
background-color: #fff;
color: var(--print-ink);
font-weight: bolder;
text-align: center;
}
/* -------------------------------------------------------------------------
10. Components
---------------------------------------------------------------------- */
/* Full-bleed logo page. The absolute-positioning approach was abandoned in
the previous revision; the flex centring below is what actually runs, so
the dead `top` / `left` offsets (no-ops on a static box) are dropped. */
.logo-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh; /* one page — see NOTE [E] */
page-break-after: always;
break-after: page;
}
.masterlogo {
max-width: 512px;
height: auto;
}
.trip-info-container {
page-break-before: always;
break-before: page;
}
/* `.trip-info` and `.trip-info-datasheet` declared identical rule sets. */
.trip-info,
.trip-info-datasheet {
border: var(--print-frame);
padding: var(--print-panel-padding);
margin: var(--print-panel-margin);
}
.blog-figure{
float: right;
width: 45mm;
shape-outside: none; /* no paged engine implements shapes */
margin: 0 0 4mm 4mm;
}
}