4,427
edits
No edit summary |
No edit summary Tag: Reverted |
||
Line 4: | Line 4: | ||
=========================== */ | =========================== */ | ||
/* | /* 1) Font face (print-safe) */ | ||
@font-face { | @font-face { | ||
font-family: 'HALColant-TextRegular'; | font-family: 'HALColant-TextRegular'; | ||
Line 14: | 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 { | ||
Line 26: | Line 26: | ||
color: #111; | color: #111; | ||
} | } | ||
body { color: #292828 !important; } | body { color: #292828 !important; } | ||
/* | /* 4) Page size and margins */ | ||
@page { | @page { | ||
size: A5 portrait; | size: A5 portrait; | ||
margin: 2.5mm; | margin: 2.5mm; /* outer paper margin */ | ||
} | } | ||
/* | /* 5) Main wrapper padding */ | ||
.entry-wrapper.print-a5 { | .entry-wrapper.print-a5 { | ||
width: 100%; | width: 100%; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
padding: 2.5mm; | padding: 2.5mm; /* inner content padding */ | ||
} | } | ||
/* --- | /* 6) Avoid splitting key sections across pages (gentle) */ | ||
#article-title, | |||
.article-title-link, | |||
.article-images, | |||
.article-metadata, | |||
.article-description, | |||
.article-reflection, | |||
.article-external-reference, | |||
.article-quote { | |||
page-break-inside: avoid; | |||
break-inside: avoid; | |||
} | |||
/* 7) Titles & people */ | |||
.article-title { | .article-title { | ||
font-size: 22px; | font-size: 22px; | ||
Line 52: | Line 63: | ||
margin: 0; | margin: 0; | ||
} | } | ||
.article-people { | .article-people { | ||
font-size: 22px; | font-size: 22px; | ||
Line 63: | Line 73: | ||
padding-top: 15px; | padding-top: 15px; | ||
} | } | ||
.article-people a { text-decoration: underline; color: #292828 !important; } | |||
/* 8) Hairline rule under entry number (crisp) */ | |||
/* | |||
.article-entry-number { | .article-entry-number { | ||
font-size: 16px; | font-size: 16px; | ||
Line 77: | Line 83: | ||
padding-bottom: 4px; | padding-bottom: 4px; | ||
border-bottom: none; | border-bottom: none; | ||
background-image: linear-gradient(#000, #000); | background-image: linear-gradient(#000, #000); | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-position: 0 100%; | background-position: 0 100%; | ||
background-size: 100% 0.5px; | background-size: 100% 0.5px; /* hairline */ | ||
} | } | ||
/* | /* 9) Link row ([PDF⤴] [WEB⤴]) centered with hairline */ | ||
.link-pdf { | .link-pdf { | ||
text-align: center; | text-align: center; | ||
Line 90: | Line 95: | ||
text-decoration: none; | text-decoration: none; | ||
margin: 4px 0 0 0; | margin: 4px 0 0 0; | ||
padding: | padding: 0; | ||
border-bottom: none; | border-bottom: none; | ||
background-image: linear-gradient(#000, #000); | background-image: linear-gradient(#000, #000); | ||
Line 97: | Line 102: | ||
background-size: 100% 0.5px; | background-size: 100% 0.5px; | ||
} | } | ||
.link-pdf a, | .link-pdf a, | ||
.link-pdf p { | .link-pdf p { | ||
Line 107: | Line 111: | ||
} | } | ||
/* | /* 10) Type line with hairline */ | ||
.article-type { | .article-type { | ||
font-size: 16px; | font-size: 16px; | ||
Line 121: | Line 125: | ||
background-size: 100% 0.5px; | background-size: 100% 0.5px; | ||
} | } | ||
.article-type a { | .article-type a { text-decoration: none; display: inline-block; color: #292828 !important; } | ||
} | |||
/* | /* 11) Metadata grid (no margins/paddings) */ | ||
.article-metadata, | .article-metadata, | ||
.article-metadata * { | .article-metadata * { | ||
Line 134: | Line 134: | ||
background: none; | background: none; | ||
} | } | ||
.article-metadata { | .article-metadata { | ||
display: grid; | display: grid; | ||
Line 142: | Line 141: | ||
line-height: 1 !important; | line-height: 1 !important; | ||
/* hairline is handled by wrappers; keep none here by default | |||
(wrapper below draws the single line) */ | |||
border-bottom: none; | border-bottom: none; | ||
background-image: | background-image: none; | ||
} | } | ||
.article-metadata-label { | .article-metadata-label { | ||
font-size: 13px; | font-size: 13px; | ||
Line 154: | Line 151: | ||
letter-spacing: 0.3px; | letter-spacing: 0.3px; | ||
} | } | ||
.article-metadata-value { | .article-metadata-value { | ||
font-size: 15px; | font-size: 15px; | ||
text-transform: capitalize; | text-transform: capitalize; | ||
} | } | ||
.article-metadata-value a { | .article-metadata-value a { color: #292828 !important; text-decoration: none; } | ||
} | |||
/* | /* 12) Images & caption (no gaps) */ | ||
.article-images { | .article-images { | ||
margin: 0 !important; | margin: 0 !important; | ||
padding: 0 !important; | padding: 0 !important; | ||
/* hairline off here; wrapper will draw it */ | |||
border-bottom: none; | border-bottom: none; | ||
background-image: | background-image: none; | ||
} | } | ||
.article-images .image-container { | .article-images .image-container { | ||
display: inline-flex; | display: inline-flex; | ||
flex-direction: column; | flex-direction: column; /* stack image then caption */ | ||
align-items: flex-start; /* left-align image & caption */ | align-items: flex-start; /* left-align image & caption */ | ||
margin: 0 !important; | margin: 0 !important; | ||
padding: 0 !important; | padding: 0 !important; | ||
} | } | ||
.article-images .image-container img, | .article-images .image-container img, | ||
.image-container img { | .image-container img { | ||
display: block; | display: block; | ||
max-height: 85mm; | max-height: 85mm; /* cap instead of fixed height */ | ||
height: auto; | height: auto; | ||
width: auto; | width: auto; | ||
Line 202: | Line 185: | ||
line-height: 0; | line-height: 0; | ||
} | } | ||
.caption-image1 { | .caption-image1 { | ||
margin: 0 !important; | margin: 0 !important; | ||
padding: 0 0 11px 0 !important; /* small breathing room under caption */ | padding: 0 0 11px 0 !important; /* small breathing room under caption */ | ||
line-height: 1 !important; | line-height: 1 !important; | ||
font-size: 9pt; | font-size: 9pt; | ||
Line 212: | Line 194: | ||
width: 100%; | width: 100%; | ||
} | } | ||
.caption-image1:empty { display: none; } | |||
/* Kill | /* 13) Kill UA margins from Vector paragraphs */ | ||
.vector-body p { margin: 0 !important; padding: 0 !important; } | .vector-body p { margin: 0 !important; padding: 0 !important; } | ||
/* --- | /* 14) Section wrappers: draw the ONLY hairline here */ | ||
.print-sec { | |||
margin: 0; | |||
padding: 0 0 7px 0; /* room for hairline */ | |||
border-bottom: none; | |||
background-image: linear-gradient(#000, #000); | |||
background-repeat: no-repeat; | |||
background-position: 0 100%; | |||
background-size: 100% 0.5px; /* hairline */ | |||
} | |||
.print-sec + .print-sec { margin-top: 10px !important; } /* spacing between optional sections */ | |||
/* Avoid extra gap above the first .print-sec after metadata/images */ | |||
.article-metadata + .print-sec, | |||
.article-images + .print-sec { margin-top: 4mm; } | |||
/* 15) Labels & bodies inside wrappers */ | |||
.article-label-description, | .article-label-description, | ||
.article-label-reflection, | .article-label-reflection, | ||
Line 231: | Line 230: | ||
/* prevent a break RIGHT AFTER the label (no orphan label) */ | /* prevent a break RIGHT AFTER the label (no orphan label) */ | ||
break-after: avoid; | break-after: avoid; page-break-after: avoid; | ||
} | } | ||
.article-description, | .article-description, | ||
.article-reflection, | .article-reflection, | ||
Line 245: | Line 242: | ||
letter-spacing: 0.8px; | letter-spacing: 0.8px; | ||
margin-top: 0 !important; | margin-top: 0 !important; | ||
padding: | padding: 0 !important; | ||
/* let long content flow normally; avoid hard blocking */ | /* let long content flow normally; avoid hard blocking */ | ||
page-break-inside: auto; | page-break-inside: auto; break-inside: auto; | ||
/* | /* hairline OFF inside; wrapper draws it */ | ||
background-image: none !important; | |||
background-image: | border-bottom: none !important; | ||
} | } | ||
/* | /* keep label + content together */ | ||
.article-label-description + .article-description, | .print-sec > .article-label-description + .article-description, | ||
.article-label-reflection + .article-reflection, | .print-sec > .article-label-reflection + .article-reflection, | ||
.article-label-external-reference + .article-external-reference, | .print-sec > .article-label-external-reference + .article-external-reference, | ||
.article-label-quote + .article-quote, | .print-sec > .article-label-quote + .article-quote, | ||
.article-label-modification-date + .article- | .print-sec > .article-label-modification-date + .article-mod-line { | ||
break-before: avoid; | break-before: avoid; page-break-before: avoid; | ||
} | } | ||
/* | /* gentle widows/orphans control on the whole content */ | ||
#article-content { orphans: 2; widows: 2; } | #article-content { orphans: 2; widows: 2; } | ||
/* --- | /* 16) Quote and “mod line” styles */ | ||
a[href]:after { content: none !important; } | .article-quote { | ||
font-size: 26px; | |||
line-height: 1; | |||
letter-spacing: 1.2px; | |||
font-style: italic; | |||
} | |||
.article-mod-line { | |||
white-space: nowrap; | |||
color: grey; | |||
line-height: 1; | |||
font-size: 14px; | |||
letter-spacing: 0.5px; | |||
text-indent: 35px; | |||
} | |||
.article-mod-line > span { display: inline; margin: 0; padding: 0; } | |||
.article-mod-line > span + span { margin-left: 6px; } | |||
.article-modification-date { font-size: 15px; letter-spacing: 0.5px; } | |||
/* 17) 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; | ||
Line 284: | Line 295: | ||
} | } | ||
.article- | /* 18) SINGLE HAIRLINE via wrapper — ensure no duplicates | ||
(safety overrides; keep at the end) */ | |||
.article-description, | |||
.article-reflection, | |||
.article-external-reference, | |||
.article-quote, | |||
padding-bottom: | .article-mod-line, | ||
.article-images { | |||
background-image: none !important; | |||
border-bottom: none !important; | |||
padding-bottom: 0 !important; | |||
} | } | ||