UnfoldingCSS:StyleBox: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 48: | Line 48: | ||
@page { | @page { | ||
size: var(--page-size); | size: var(--page-size); | ||
margin-top: | margin-top: 15mm; | ||
margin-bottom: | margin-bottom: 15mm; | ||
} | } | ||
Revision as of 11:32, 7 June 2024
:root { /* ************* P A G E ****************** */ --page-size: A4; --color-paper: HoneyDew; --margin-top: 15mm; --margin-bottom: 15mm; --margin-inside: 35mm; --margin-outside: 20mm; /* ************* C O N T E N T ************ */ --PUB-title: 'PUB Title'; --PUB-collective: 'Enter your collective here'; --PUB-year: '3000'; /* ************* F O N T S **************** */ --title-font: Serif; --body-font: Sans-serif; --code-font: Monospace; --quote-font: Serif; --footnote-font: Sanserif; --page-number-font: Monospace; --h1-font-size: 30pt; --h2-font-size: 24pt; --h3-font-size: 18pt; --p-font-size: 12pt; /* ************* C O L O R **************** */ --text-color: MediumSeaGreen; --highlight-color: Olive; --sparkling-color: LightCoral; } /* -------------- P A G E - B L O C K ----------- */ @page { size: var(--page-size); margin-top: 15mm; margin-bottom: 15mm; } @page:first{ @right-middle { content: none; } @right-top { content: none; } } @page:right { margin-left: var(--margin-inside); margin-right: var(--margin-outside); @right-middle { color: var(--sparkling-color); content: counter(page); font-family: var(--page-number-font); } @right-top { color: var(--text-color); content: var(--PUB-title); font-family: var(--code-font); margin-right: 0.8cm; writing-mode: vertical-rl; text-orientation: mixed; } } @page:left { margin-right: var(--margin-inside); margin-left: var(--margin-outside); @left-middle { color: var(--sparkling-color); content: counter(page); font-family: var(--page-number-font); } @left-top { color: var(--text-color); content: var(--PUB-title); font-family: var(--code-font); margin-right: 0.8cm; writing-mode: vertical-rl; text-orientation: mixed; } } .pagedjs_sheet { box-shadow: -5px 5px 12px 0px var(--color-pageSheet); } body{ background-color: var(--color-paper); } /* -------------- P A G E - B L O C K - E N D S ----------- */ /* -------------- T E X T - B L O C K --------------------- */ h1{ color: var(--highlight-color); font-family: var(--title-font); font-size: var(--h1-font-size); line-height: calc(var(--h1-font-size) + 1.5pt); text-wrap: pretty; } h2{ color: var(--highlight-color); font-family: var(--title-font); font-size: var(--h2-font-size); line-height: calc(var(--h2-font-size) + 1.5pt); text-wrap: pretty; } h3{ color: var(--highlight-color); font-family: var(--title-font); font-size: var(--h3-font-size); line-height: calc(var(--h3-font-size) + 1.5pt); text-wrap: pretty; } b{ color: var(--sparkling-color); } p{ color: var(--text-color); font-family: var(--body-font); font-size: var(--p-font-size); line-height: calc(var(--p-font-size) + 2pt); text-indent: calc(var(--p-font-size) + 2pt); text-wrap: pretty; } ul{ color: var(--text-color); font-family: var(--body-font); font-size: var(--p-font-size); line-height: calc(var(--p-font-size) + 2pt); } a{ color: var(--sparkling-color); } p:nth-of-type(3n) { border: 2px solid orange; margin-left: -10px; } /* -------------- T E X T - B L O C K - E N D S ----------- */