4,427
edits
MediaWiki:Print.css: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* --- | /* =========================== | ||
Softwear — Print stylesheet | |||
A5 portrait, minimal margins | |||
=========================== */ | |||
/* --- 1) Font face (print-safe) --- */ | |||
@font-face { | @font-face { | ||
font-family: 'HALColant-TextRegular'; | font-family: 'HALColant-TextRegular'; | ||
| Line 9: | Line 14: | ||
} | } | ||
/* --- 2) Browser print color fidelity --- */ | |||
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; } | * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } | ||
/* | /* --- 3) Base print visibility & typography --- */ | ||
.print-only { display: block !important; } | .print-only { display: block !important; } /* ensure print layout is visible */ | ||
html, body { | html, body { | ||
margin: 0; | margin: 0; | ||
| Line 22: | Line 27: | ||
} | } | ||
/* | /* Use your preferred ink color */ | ||
body { color: #292828 !important; } | |||
/* --- 4) Page size and margins --- */ | |||
@page { | |||
size: A5 portrait; | |||
margin: 2.5mm; /* outer paper margin */ | |||
} | |||
/* | /* Inner breathing room for the print block */ | ||
.entry-wrapper.print-a5 { | .entry-wrapper.print-a5 { | ||
width: 100%; | width: 100%; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
/* | padding: 2.5mm; /* inner content padding */ | ||
} | } | ||
/* | /* --- 5) Titles & people --- */ | ||
.article-title { | |||
.article-title | font-size: 22px; | ||
line-height: 24px; | |||
letter-spacing: 0.8px; | |||
text-align: center; | |||
. | color: #292828 !important; | ||
margin: 0; | |||
} | } | ||
.article-people { | |||
font-size: 22px; | |||
line-height: 28px; | |||
letter-spacing: 0.8px; | |||
text-align: center; | |||
text-decoration: underline; | |||
color: #292828 !important; | |||
margin: 0; | |||
padding-top: 15px; | |||
.article-people { | |||
} | } | ||
.article-people a { | .article-people a { | ||
text-decoration: underline; | |||
color: #292828 !important; | |||
} | } | ||
/* --- 6) Hairline rule under entry number --- */ | |||
.article-entry-number { | .article-entry-number { | ||
font-size: 16px; | |||
line-height: 23px; | |||
letter-spacing: 0; | |||
margin: 0; | |||
padding-bottom: 4px; | |||
border-bottom: none; | |||
/* draw a crisp hairline using a background gradient */ | |||
background-image: linear-gradient(#000, #000); | |||
background-repeat: no-repeat; | |||
background-position: 0 100%; | |||
background-size: 100% 0.5px; /* ~hairline */ | |||
} | } | ||
/* --- 7) Link row ([PDF⤴] [WEB⤴]) centered with hairline --- */ | |||
.link-pdf { | .link-pdf { | ||
text-align: center; | |||
color: #292828 !important; | |||
text-decoration: none; | |||
margin: 4px 0 0 0; | |||
padding: 0 0 0 0; | |||
border-bottom: none; | |||
background-image: linear-gradient(#000, #000); | |||
background-repeat: no-repeat; | |||
background-position: 0 100%; | |||
background-size: 100% 0.5px; | |||
} | |||
.link-pdf a, | |||
.link-pdf p { | |||
display: inline-block; | |||
text-decoration: none; | |||
color: #292828 !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
.link-pdf a, .link-pdf p { | |||
} | } | ||
.article-type { | /* --- 8) Type line with hairline --- */ | ||
.article-type { | |||
font-size: 16px; | |||
line-height: 1; | |||
letter-spacing: 0; | |||
margin: 0; | |||
padding: 7px 0; | |||
color: #292828 !important; | |||
border-bottom: none; | |||
background-image: linear-gradient(#000, #000); | |||
background-repeat: no-repeat; | |||
background-position: 0 100%; | |||
background-size: 100% 0.5px; | |||
} | } | ||
.article-type a { | .article-type a { | ||
text-decoration: none; | |||
display: inline-block; | |||
color: #292828 !important; | |||
} | } | ||
/* | /* --- 9) Metadata grid (no margins/paddings; hairline under block) --- */ | ||
.article-metadata, | .article-metadata, | ||
.article-metadata * { | .article-metadata * { | ||
| Line 145: | Line 134: | ||
background: none; | background: none; | ||
} | } | ||
.article-metadata { | .article-metadata { | ||
display: grid; | |||
grid-template-columns: repeat(3, 1fr); | |||
gap: 2mm; | |||
padding: 11px 0 7px 0; | |||
line-height: 1 !important; | |||
border-bottom: none; | |||
background-image: linear-gradient(#000, #000); | |||
background-repeat: no-repeat; | |||
background-position: 0 100%; | |||
background-size: 100% 0.5px; | |||
} | } | ||
.article-metadata-label { | .article-metadata-label { | ||
font-size: 13px; | |||
text-transform: uppercase; | |||
letter-spacing: 0.3px; | |||
} | } | ||
.article-metadata-value { | .article-metadata-value { | ||
font-size: 15px; | |||
text-transform: capitalize; | |||
} | } | ||
.article-metadata-value a { | .article-metadata-value a { | ||
color: #292828 !important; | |||
text-decoration: none; | |||
} | } | ||
/* Remove any accidental gap before images */ | |||
.article-metadata + .article-images { | .article-metadata + .article-images { | ||
margin-top: 0 !important; | margin-top: 0 !important; | ||
padding-top: 0 !important; | padding-top: 0 !important; | ||
} | } | ||
/* --- 10) Images & caption (no gaps; hairline under block) --- */ | |||
.article-images { | .article-images { | ||
margin: 0 !important; | |||
padding: 0 !important; | |||
border-bottom: none; | |||
background-image: linear-gradient(#000, #000); | |||
background-repeat: no-repeat; | |||
background-position: 0 100%; | |||
background-size: 100% 0.5px; | |||
} | } | ||
.article-images .image-container { | .article-images .image-container { | ||
display: inline-flex; | |||
flex-direction: column; /* stack image then caption */ | |||
align-items: flex-start; /* left-align image & caption */ | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
} | } | ||
.article-images .image-container img, | |||
.image-container img { | .image-container img { | ||
display: block; | |||
max-height: 85mm; /* cap instead of forcing height to reduce jumps */ | |||
height: auto; | |||
width: auto; | |||
max-width: 100%; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
object-fit: contain; | |||
line-height: 0; | |||
} | } | ||
.caption-image1 { | .caption-image1 { | ||
margin: 0 !important; | |||
padding: 0 0 11px 0 !important; /* small breathing room under caption */ | |||
line-height: 1 !important; | |||
font-size: 9pt; | |||
color: #555; | |||
text-align: left; | |||
width: 100%; | |||
} | } | ||
.vector-body p { | /* Kill user-agent margins in Vector paragraphs that sneak in */ | ||
.vector-body p { margin: 0 !important; padding: 0 !important; } | |||
} | |||
/* --- 11) Section labels & bodies --- */ | |||
.article-label-description, | .article-label-description, | ||
.article-label-reflection, | .article-label-reflection, | ||
| Line 237: | Line 222: | ||
.article-label-quote, | .article-label-quote, | ||
.article-label-modification-date { | .article-label-modification-date { | ||
text-transform: uppercase; | |||
margin: 11px 0 0 0 !important; | |||
padding: 0 !important; | |||
text-indent: 35px; | |||
line-height: 1; | |||
font-size: 14px; | |||
letter-spacing: 0.5px; | |||
/* prevent a break RIGHT AFTER the label (no orphan label) */ | |||
break-after: avoid; | |||
page-break-after: avoid; | |||
} | } | ||
.article-description, | .article-description, | ||
.article-reflection, | .article-reflection, | ||
| Line 252: | Line 240: | ||
.article-quote, | .article-quote, | ||
.article-modification-date { | .article-modification-date { | ||
text-indent: 35px; | |||
line-height: 1.3; | |||
font-size: 20px; | |||
letter-spacing: 0.8px; | |||
margin-top: 0 !important; | |||
padding: 0 0 11px 0 !important; | |||
/* let long content flow normally; avoid hard blocking */ | |||
page-break-inside: auto; | |||
break-inside: auto; | |||
/* draw hairline below each section body */ | |||
border-bottom: none; | |||
background-image: linear-gradient(#000, #000); | |||
background-repeat: no-repeat; | |||
background-position: 0 100%; | |||
background-size: 100% 0.5px; | |||
} | |||
/* Don’t allow a break BEFORE the first block following each label */ | |||
.article-label-description + .article-description, | |||
.article-label-reflection + .article-reflection, | |||
.article-label-external-reference + .article-external-reference, | |||
.article-label-quote + .article-quote, | |||
.article-label-modification-date + .article-modification-date { | |||
break-before: avoid; | |||
page-break-before: avoid; | |||
} | } | ||
/* | /* Gentle control on widows/orphans globally */ | ||
#article-content { orphans: 2; widows: 2; } | |||
/* | /* --- 12) Link handling for print --- */ | ||
a[href]:after { content: none !important; } /* no raw URL echo */ | |||
.article-external-reference a { | .article-external-reference a { | ||
word-break: break-word; | word-break: break-word; | ||
overflow-wrap: anywhere; | overflow-wrap: anywhere; | ||
} | } | ||