/* Fonts */ @font-face { font-family: Handwriting; src: url("JOURNAL.TTF") format("truetype"); } @page landscape { size: A4 landscape; } /* General */ h2:not(:first-of-type) { break-before: page; margin-top: 0; } div.sample { border: thin solid black; hyphens: auto; } div.sample :first-child { counter-reset: chapter; } /* Sample: Dictionary */ div.dictionary { line-height: 1.2; hyphenate-before: 3; hyphenate-after: 4; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 0.25in; -moz-column-gap: 0.25in; column-gap: 0.25in; padding: 0.25in; width: 5in; margin: auto; font-family: serif; font-size: 10pt; background-color: rgb(250,250,250); } div.dictionary dl { margin: 0; } div.dictionary dt, div.dictionary dd { margin-left: 0.1in; break-before: avoid; } div.dictionary dt { text-indent: -0.1in; float: left; padding-right: 0.1in; } div.dictionary dd + div.dictionary dt { break-before: auto; } div.dictionary .smcap { font-variant: small-caps; } div.dictionary .lowercase { text-transform: lowercase; } /* Sample: Journal */ div.script { width: 5.5in; height: 6in; -webkit-column-width: 2.5in; -moz-column-width: 2.5in; column-width: 2.5in; -webkit-column-gap: 0.5in; -moz-column-gap: 0.5in; column-gap: 0.5in; -webkit-column-fill: auto; -moz-column-fill: auto; column-fill: auto; margin: auto; padding: 0.25in; padding-left: 0.5in; padding-right: 0.75in; font-family: Handwriting; background-image: -webkit-linear-gradient(0deg, burlywood -20%, beige 7%, beige 93%, burlywood 120%); background-image: -moz-linear-gradient(0deg, burlywood -20%, beige 7%, beige 93%, burlywood 120%); background-image: linear-gradient(90deg, burlywood -20%, beige 7%, beige 93%, burlywood 120%); hyphens: none; } div.script p { font-size: 14pt; line-height: 1.6; color: black; } div.script p:first-child { margin-top: 0; } /* Sample: Restaurant Menu */ div.menu { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 0.25in; -moz-column-gap: 0.25in; column-gap: 0.25in; -webkit-column-rule: thin solid gray; -moz-column-rule: thin solid gray; column-rule: thin solid gray; padding: 0.1in 0.25in 0.2in; counter-reset: nr 16; } div.menu h1, div.menu h2, div.menu p, div.menu li { font-family: serif; } div.menu h1 { -webkit-column-span: all; -moz-column-span: all; column-span: all; margin-top: 0; padding-top: 3.5pt; padding-bottom: 4pt; text-align: center; color: black; font-variant: small-caps; font-weight: bold; font-size: 20pt; break-before: auto; } div.menu h1 + * { margin-top: 0; } div.menu h2 { margin-top: 0; text-align: left; color: black; font-variant: small-caps; font-weight: normal; font-size: 14pt; break-before: auto; } div.menu p, div.menu li { color: black; font-size: 12pt; } div.menu img { display: block; width: 100%; -webkit-column-span: all; -moz-column-span: all; column-span: all; margin-top: 0.25in; margin-bottom: 0.25in; } div.menu li { list-style-type: none; line-height: 1; margin-top: 0.1in; text-indent: -0.1in; counter-increment: nr; } div.menu li::before { content: counter(nr) "."; float: left; width: 0.25in; margin-left: -0.35in; margin-right: 0.2in; text-align: right; } /* Sample: Article */ div.article { height: 2.7in; -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; padding: 0.1in; background-image: -webkit-linear-gradient(3deg, indianred 15px, white 16px); background-image: -moz-linear-gradient(3deg, indianred 15px, white 16px); background-image: linear-gradient(87deg, indianred 15px, white 16px); } div.article h1 { text-align: right; color: black; font-family: serif; font-size: 20pt; font-weight: bold; break-before: auto; break-after: column; margin-top: 0; } div.article p { font-family: serif; font-size: 10.25pt; line-height: 1.3; margin-top: 0; margin-bottom: 0; text-indent: 0.25in; color: black; } div.article p:first-of-type, div.article img + p { text-indent: 0in; } div.article img { display: block; margin: auto; break-before: column; break-after: column; height: 100%; } /* Sample: Base-line */ div.grid { page: landscape; } div.surround h2, div.surround h3 { margin: 0; break-before: avoid; } div.container > h3 { margin-bottom: 5pt; font-family: 'courier prime', monospace; font-size: 14pt; text-align: center; } div.gridlayout { -ro-line-grid: create; padding: 3pt; line-height: 1.2; height: 5.2in; width: 3.20in; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-fill: auto; -moz-column-fill: auto; column-fill: auto; } div.container { float: left; margin-right: 6px; } div.gridlayout h2 { margin: 12pt 0 6pt; } div.gridlayout h2:first-child { margin-top: 0; } div.gridlayout p { line-height: inherit; margin: 0; } div.none { -ro-line-snap: none; } div.baseline { -ro-line-snap: baseline; } div.contain { -ro-line-snap: contain; } p.source { text-align: left; } span.nobreak { white-space: pre; }