/* fonts */ @font-face { font-family: Title; src: url("fnt/kingthings/Kingthings_Calligraphica_2.ttf") format("truetype"); } @font-face { font-family: Text; font-weight: 300; src: url("fnt/neuton/Neuton-Light.ttf") format("truetype"); } @font-face { font-family: Text; font-weight: 400; src: url("fnt/neuton/Neuton-Regular.ttf") format("truetype"); } @font-face { font-family: Text; font-style: italic; src: url("fnt/neuton/Neuton-Italic.ttf") format("truetype"); } /* page */ @page { size: 325mm 480mm; margin: 10mm } @-ro-preferences { page-layout: 1 page; initial-zoom: fit-page; } @media screen { html { outline: 1px solid gray; margin: auto; margin-top: 5mm; margin-bottom: 5mm; width: 305mm; height: 460mm; padding: 10mm; } } /* general style */ body { margin: 0; padding: 0; font-family: Text; font-size: 5mm; font-weight: 300; text-align: justify; color: black; line-height: 1; hyphens: auto; hyphenate-before: 3; hyphenate-after: 3; } article.bordered { margin-top: 5mm; border: 0.5mm solid gray; padding: 2.5mm; } article { -webkit-column-gap: 5mm; -moz-column-gap: 5mm; column-gap: 5mm; margin-top: 2.5mm; margin-bottom: 2.5mm; } article::first-child { margin-top: 0; } article > hgroup { font-family: Text; font-weight: normal; -webkit-column-span: all; -moz-column-span: all; column-span: all; } h1, h2 { font-weight: normal; } article > hgroup > h1, article > hgroup.topstory > h1 { margin-top: 0; margin-bottom: 2mm; text-align: left; } article > hgroup > h1 { font-size: 14mm; } article > hgroup.topstory > h1 { font-size: 20mm; } article > hgroup > h2 { margin-top: 2mm; margin-bottom: 3mm; font-size: 6mm; } article > p { margin-top: 0; margin-bottom: 0; text-indent: 2.5mm; } figure { margin: 0mm; margin-top: 2.5mm; margin-bottom: 2.5mm; -webkit-column-span: all; -moz-column-span: all; column-span: all; } figure > img { display: block; width: 100%; } figure > figcaption, article > p.intro, article > p.further { font-weight: normal; margin-bottom: 2.5mm; } p.further { margin-top: 2.5mm; margin-bottom: 0; text-align: right; } p.further::before { content: "\203A "; padding-left: 2.5mm; } p.further a { font-style: italic; font-weight: normal; font-size: 4.5mm; color: inherit; text-decoration: none; } *.singleColumn { -webkit-column-span: none; -moz-column-span: none; column-span: none; } figure.singleColumn { break-after: column; margin-top: 0; } hgroup.singleColumn > h1 { font-size: 10mm; } /* header */ header.title { width: 305mm; height: 47mm; border-bottom: 2mm solid navy; margin-bottom: 5mm; } header.title > hgroup > h1 { margin: 0; margin-bottom: 5mm; padding: 0; font-family: Title; font-weight: normal; font-size: 30mm; text-align: center; } header.title > hgroup > h2 { margin: 0; padding: 0; font-family: Text; font-weight: normal; font-size: 5mm; text-transform: uppercase; text-align: center; } header.title > h2, header.title > *.date, header.title > *.volume { margin: 0; padding: 0; font-family: Text; font-weight: normal; font-size: 5mm; text-transform: uppercase; text-align: center; } header.title > *.date, header.title > *.volume { font-size: 4mm; font-style: italic; text-transform: inherit; } header.title > *.date { float: left; } header.title > *.volume { float: right; } /* footer */ footer { width: 305mm; height: 8mm; margin: 0; clear: both; font-size: 5.8mm; font-weight: normal; text-transform: uppercase; text-align: center; background-color: lightgrey; } footer span::after { content: " +++ "; } footer span:first-child::before, footer span:last-child::after { content: " ++ "; } /* content layout */ section.overview { width: 80mm; height: 390mm; margin-bottom: 5mm; margin-right: 5mm; float: left; } section.middle { width: 125mm; height: 330mm; margin: 0; margin-right: 5mm; margin-bottom: 2.5mm; padding: 2.5mm; padding-top: 0mm; outline: 0.5mm solid gray; float: left; } section.middle > article { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } section.right { width: 85mm; height: 332.5mm; margin: 0; margin-bottom: 2.5mm; padding: 0; float: left; } section.right > article { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } section.middleRight { width: 220mm; height: 55mm; margin: 0; margin-bottom: 5mm; float: left; } section.middleRight > article { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } /* overview */ section.overview > div { border: 1mm solid var(--box-color); margin-bottom: 2.5mm; padding: 0; } section.overview header { margin-bottom: 0; padding: 1mm; padding-bottom: 3mm; background-color: var(--box-color); color: white; } section.overview > div > :not(:first-child) { margin-left: 2.5mm; margin-right: 2.5mm; } section.overview > div > :last-child { margin-bottom: 2.5mm; } section.overview h1 { margin-top: 0; margin-bottom: 0.5mm; font-size: 8mm; } section.overview > div > p { margin-top: 0; margin-bottom: 1mm; } ol.line { display: block; clear: both; } ol.line > li { display: inline-block; width: 5mm; height: 5mm; } .cyan { background-color: cmyk(100%, 0%, 0%, 0%); } .cyan-lighter { background-color: cmyk(50%, 0%, 0%, 0%); } .magenta { background-color: cmyk(0%, 100%, 0%, 0%); } .magenta-lighter { background-color: cmyk(0%, 50%, 0%, 0%); } .yellow { background-color: cmyk(0%, 0%, 100%, 0%); } .yellow-lighter { background-color: cmyk(0%, 0%, 50%, 0%); } .black { background-color: cmyk(0%, 0%, 0%, 100%); } .black-lighter { background-color: cmyk(0%, 0%, 0%, 50%); } section.overview > div.world { --box-color: steelblue; } section.overview > div.national { --box-color: firebrick; } section.overview > div.business { --box-color: seagreen; } section.overview > div.sports { --box-color: goldenrod; } section.overview > div.poll { --box-color: darkslateblue; } section.overview > div.poll > figure > canvas { width: 100%; height: 33mm; background-color: lavender; background-image: -webkit-linear-gradient(-75deg, lavender, lightsteelblue); background-image: -moz-linear-gradient(-75deg, lavender, lightsteelblue); background-image: linear-gradient(165deg, lavender, lightsteelblue); } section.overview > div.print { --box-color: slategray; } section.overview > div.print > div.grid { width: 38mm; height: 15mm; float: left; } section.overview > div.print > div.grid > div { padding-top: 2mm; } section.overview > div.print > div.grid > div:nth-child(odd) { float: left; font-weight: normal; } section.overview > div.print > div.grid > div:nth-child(even) { float: right; } section.overview > div.print > div { width: 30mm; height: 15mm; margin-bottom: 1em; float: right; } .barcode { -ro-replacedelement: barcode; -ro-barcode-type: code128; -ro-barcode-size: 175%; -ro-barcode-content: "Lorem Ipsum"; object-fit: contain; margin-top: 2mm; }