4,431
edits
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
/* | /* =========================== | ||
Softwear — Print | Softwear — A4 Narrow Print | ||
One-column ~half A4 width | One-column ~half-A4 width | ||
(compact typography) | |||
=========================== */ | |||
/* 1) Font face */ | /* 1) Font face */ | ||
Line 25: | Line 26: | ||
font-family: 'HALColant-TextRegular', Georgia, "Times New Roman", serif; | font-family: 'HALColant-TextRegular', Georgia, "Times New Roman", serif; | ||
color: #292828 !important; | color: #292828 !important; | ||
background: #fff !important; | |||
} | } | ||
/* 4) Page | /* 4) Page & narrow column | ||
@page { size: A4 portrait; margin: | A4 portrait; 12mm outer margin. | ||
Content column = 93mm centered. | |||
*/ | |||
@page { size: A4 portrait; margin: 12mm; } | |||
.entry-wrapper.print-a4-narrow { | |||
.entry-wrapper.print- | |||
box-sizing: border-box; | box-sizing: border-box; | ||
margin: 0 auto; | width: 93mm; /* ~half A4 minus gutter */ | ||
padding: 3mm; | margin: 0 auto; /* center on page */ | ||
padding: 3mm; /* small inner padding */ | |||
} | } | ||
/* 5) Titles & people ( | /* 5) Titles & people (COMPACT) */ | ||
.article-title { | .article-title { | ||
font-size: 16px; | font-size: 16px; | ||
line-height: 18px; | line-height: 18px; | ||
letter-spacing: 0. | letter-spacing: 0.5px; | ||
text-align: center; | text-align: center; | ||
margin: 0; | margin: 0; | ||
} | } | ||
.article-people { | .article-people { | ||
font-size: | font-size: 14px; | ||
line-height: | line-height: 18px; | ||
letter-spacing: 0. | letter-spacing: 0.4px; | ||
text-align: center; | text-align: center; | ||
text-decoration: underline; | text-decoration: underline; | ||
margin: 0; | margin: 0; | ||
padding-top: | padding-top: 6px; | ||
} | } | ||
.article-people a { text-decoration: underline; color: #292828 !important; } | .article-people a { text-decoration: underline; color: #292828 !important; } | ||
/* === Hairline rules via pseudo-element ( | /* === Hairline rules via pseudo-element (Blink) === */ | ||
.article-entry-number, | .article-entry-number, | ||
.link-pdf, | .link-pdf, | ||
Line 71: | Line 73: | ||
.article-mod-line { | .article-mod-line { | ||
position: relative; | position: relative; | ||
padding-bottom: | padding-bottom: 6px; | ||
border-bottom: none !important; | border-bottom: none !important; | ||
} | } | ||
Line 88: | Line 90: | ||
position: absolute; | position: absolute; | ||
left: 0; right: 0; bottom: 0; | left: 0; right: 0; bottom: 0; | ||
height: 1px; | height: 1px; | ||
background: #292828; | background: #292828; | ||
transform: scaleY(0.5); | transform: scaleY(0.5); | ||
transform-origin: 50% 100%; | transform-origin: 50% 100%; | ||
} | } | ||
/* === Firefox | /* === Firefox fallback: real thin border === */ | ||
@-moz-document url-prefix() { | @-moz-document url-prefix() { | ||
.article-entry-number::after, | .article-entry-number::after, | ||
Line 105: | Line 107: | ||
.article-external-reference::after, | .article-external-reference::after, | ||
.article-quote::after, | .article-quote::after, | ||
.article-mod-line::after { | .article-mod-line::after { content: none !important; } | ||
.article-entry-number, | .article-entry-number, | ||
Line 119: | Line 119: | ||
.article-quote, | .article-quote, | ||
.article-mod-line { | .article-mod-line { | ||
border-bottom: 0.5pt solid #292828 !important; | border-bottom: 0.5pt solid #292828 !important; | ||
} | } | ||
#article-content > :last-child { border-bottom: 0 !important; } | #article-content > :last-child { border-bottom: 0 !important; } | ||
} | } | ||
Line 128: | Line 127: | ||
/* 7) Entry number row */ | /* 7) Entry number row */ | ||
.article-entry-number { | .article-entry-number { | ||
font-size: 12px; | font-size: 12px; | ||
line-height: 16px | line-height: 16px; | ||
margin: 0; | margin: 0; | ||
} | } | ||
Line 139: | Line 137: | ||
color: #292828 !important; | color: #292828 !important; | ||
text-decoration: none; | text-decoration: none; | ||
margin: 2px 0 0 0; | margin: 2px 0 0 0; | ||
padding-top: 0; | padding-top: 0; | ||
} | } | ||
Line 152: | Line 150: | ||
/* 9) Type line */ | /* 9) Type line */ | ||
.article-type { | .article-type { | ||
font-size: 12px; | font-size: 12px; | ||
line-height: 1 | line-height: 1.1; | ||
margin: 0; | margin: 0; | ||
padding-top: 4px; | padding-top: 4px; | ||
color: #292828 !important; | color: #292828 !important; | ||
} | } | ||
.article-type a { text-decoration: none; color: #292828 !important; } | .article-type a { text-decoration: none; color: #292828 !important; } | ||
/* 10) Metadata grid */ | /* 10) Metadata grid (COMPACT) */ | ||
.article-metadata, | .article-metadata, | ||
.article-metadata * { | .article-metadata * { | ||
Line 171: | Line 168: | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(3, 1fr); | grid-template-columns: repeat(3, 1fr); | ||
gap: 1.5mm; | gap: 1.5mm; | ||
padding-top: 6px; | padding-top: 6px; | ||
line-height: 1 !important; | line-height: 1.05 !important; | ||
} | } | ||
.article-metadata-label { | .article-metadata-label { | ||
font-size: | font-size: 9px; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
letter-spacing: 0. | letter-spacing: 0.3px; | ||
} | } | ||
.article-metadata-value { | .article-metadata-value { | ||
font-size: | font-size: 11px; | ||
text-transform: capitalize; | text-transform: capitalize; | ||
} | } | ||
Line 189: | Line 186: | ||
} | } | ||
/* 11) Images */ | /* 11) Images (shorter to favor text) */ | ||
.article-metadata + .article-images { margin-top: 0 !important; padding-top: 0 !important; } | .article-metadata + .article-images { margin-top: 0 !important; padding-top: 0 !important; } | ||
.article-images { | .article-images { margin: 0 !important; padding-top: 0 !important; } | ||
} | |||
.article-images .image-container { | .article-images .image-container { | ||
display: inline-flex; | display: inline-flex; | ||
Line 205: | Line 199: | ||
.image-container img { | .image-container img { | ||
display: block; | display: block; | ||
max-height: | max-height: 60mm; /* was 85mm */ | ||
height: auto; | height: auto; | ||
width: auto; | width: auto; | ||
Line 217: | Line 211: | ||
margin: 0 !important; | margin: 0 !important; | ||
padding: 0 !important; | padding: 0 !important; | ||
line-height: 1 !important; | line-height: 1.1 !important; | ||
font-size: | font-size: 8px; /* smaller captions */ | ||
color: #555; | color: #555; | ||
text-align: left; | text-align: left; | ||
Line 225: | Line 219: | ||
.caption-image1:empty { display: none; } | .caption-image1:empty { display: none; } | ||
/* 12) Labels & bodies */ | /* 12) Labels & bodies (COMPACT) */ | ||
.article-label-description, | .article-label-description, | ||
.article-label-reflection, | .article-label-reflection, | ||
Line 232: | Line 226: | ||
.article-label-modification-date { | .article-label-modification-date { | ||
text-transform: uppercase; | text-transform: uppercase; | ||
margin: 6px 0 0 0 !important; | margin: 6px 0 0 0 !important; | ||
padding: 0 !important; | padding: 0 !important; | ||
text-indent: | text-indent: 20px; | ||
line-height: 1; | line-height: 1.05; | ||
font-size: | font-size: 10px; | ||
letter-spacing: 0. | letter-spacing: 0.4px; | ||
break-after: avoid; page-break-after: avoid; | break-after: avoid; page-break-after: avoid; | ||
} | } | ||
Line 246: | Line 240: | ||
.article-external-reference + .article-label-quote, | .article-external-reference + .article-label-quote, | ||
.article-quote + .article-label-modification-date { | .article-quote + .article-label-modification-date { | ||
margin-top: | margin-top: 6px !important; | ||
} | } | ||
.article-description, | .article-description, | ||
Line 253: | Line 247: | ||
.article-quote, | .article-quote, | ||
.article-mod-line { | .article-mod-line { | ||
text-indent: | text-indent: 20px; | ||
line-height: 1. | line-height: 1.15; /* tighter */ | ||
font-size: | font-size: 12px; /* down from 20px */ | ||
letter-spacing: 0.4px; | letter-spacing: 0.4px; | ||
margin-top: 0 !important; | margin-top: 0 !important; | ||
padding-top: 0 !important; | padding-top: 0 !important; | ||
Line 268: | Line 262: | ||
} | } | ||
/* 13) Quote */ | /* 13) Quote (COMPACT) */ | ||
.article-quote { | .article-quote { | ||
font-size: | font-size: 14px; | ||
line-height: 1. | line-height: 1.2; | ||
font-style: italic; | font-style: italic; | ||
} | } | ||
Line 280: | Line 273: | ||
white-space: nowrap; | white-space: nowrap; | ||
color: grey; | color: grey; | ||
line-height: 1; | line-height: 1.05; | ||
font-size: | font-size: 10px; | ||
letter-spacing: 0.3px; | letter-spacing: 0.3px; | ||
margin: 5px 0 0 0 !important; | margin: 5px 0 0 0 !important; | ||
padding-top: 0!important; | padding-top: 0 !important; | ||
} | } | ||
.article-mod-line > span { display: inline; margin: 0; padding: 0; } | .article-mod-line > span { display: inline; margin: 0; padding: 0; } | ||
.article-mod-line > span + span { margin-left: | .article-mod-line > span + span { margin-left: 4px; } | ||
.article-modification-date { font-size: 11px; letter-spacing: 0.3px; } | .article-modification-date { font-size: 11px; letter-spacing: 0.3px; } | ||
Line 300: | Line 293: | ||
text-decoration: none; | text-decoration: none; | ||
color: #292828 !important; | color: #292828 !important; | ||
font-size: | font-size: 11px; /* smaller */ | ||
line-height: 1. | line-height: 1.15; | ||
letter-spacing: 0; | letter-spacing: 0; | ||
} | } | ||
Line 316: | Line 309: | ||
/* === Chrome/Blink-specific print overrides === */ | /* === Chrome/Blink-specific print overrides === */ | ||
@media print and (-webkit-min-device-pixel-ratio:0) { | @media print and (-webkit-min-device-pixel-ratio:0) { | ||
.article-label-description, | .article-label-description, | ||
.article-label-reflection, | .article-label-reflection, | ||
Line 335: | Line 327: | ||
} | } | ||
.article-description p, | .article-description p, | ||
.article-reflection p, | .article-reflection p, | ||
Line 343: | Line 334: | ||
break-inside: avoid; | break-inside: avoid; | ||
} | } | ||
} | } |