MediaWiki:Print.css: Difference between revisions
Jump to navigation
Jump to search
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; | ||
} | } | ||
Revision as of 07:32, 21 August 2025
/* =========================== Softwear — Print stylesheet A5 portrait, minimal margins =========================== */ /* --- 1) Font face (print-safe) --- */ @font-face { font-family: 'HALColant-TextRegular'; src: url('/fonts/HALColant-TextRegular.woff2?v=20250820') format('woff2'), url('/fonts/HALColant-TextRegular.woff?v=20250820') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } /* --- 2) Browser print color fidelity --- */ * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* --- 3) Base print visibility & typography --- */ .print-only { display: block !important; } /* ensure print layout is visible */ html, body { margin: 0; padding: 0; font-family: 'HALColant-TextRegular', Georgia, "Times New Roman", serif; color: #111; } /* 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 { width: 100%; box-sizing: border-box; padding: 2.5mm; /* inner content padding */ } /* --- 5) Titles & people --- */ .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 a { text-decoration: underline; color: #292828 !important; } /* --- 6) Hairline rule under 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 { 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; } /* --- 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 { text-decoration: none; display: inline-block; color: #292828 !important; } /* --- 9) Metadata grid (no margins/paddings; hairline under block) --- */ .article-metadata, .article-metadata * { margin: 0 !important; border: none; background: none; } .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 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.3px; } .article-metadata-value { font-size: 15px; text-transform: capitalize; } .article-metadata-value a { color: #292828 !important; text-decoration: none; } /* Remove any accidental gap before images */ .article-metadata + .article-images { margin-top: 0 !important; padding-top: 0 !important; } /* --- 10) Images & caption (no gaps; hairline under block) --- */ .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 { 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 { 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 { 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%; } /* 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-reflection, .article-label-external-reference, .article-label-quote, .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-reflection, .article-external-reference, .article-quote, .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 { word-break: break-word; overflow-wrap: anywhere; }