UnfoldingCSS:StyleBox: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
(29 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
:root { | :root { | ||
/* ************* C O N T E N T ************ */ | /* ************* C O N T E N T ************ */ | ||
Line 18: | Line 11: | ||
--title-font: Serif; | --title-font: Serif; | ||
--body-font: | --body-font: Sans-serif; | ||
--code-font: Monospace; | --code-font: Monospace; | ||
--quote-font: Serif; | --quote-font: Serif; | ||
Line 24: | Line 17: | ||
--page-number-font: Monospace; | --page-number-font: Monospace; | ||
--h1-font-size: | --h1-font-size: 30pt; | ||
--h2-font-size: | --h2-font-size: 24pt; | ||
--h3-font-size: | --h3-font-size: 18pt; | ||
--p-font-size: 12pt; | --p-font-size: 12pt; | ||
Line 32: | Line 25: | ||
/* ************* C O L O R **************** */ | /* ************* C O L O R **************** */ | ||
--text-color: | --color-paper: HoneyDew; | ||
--highlight-color: | --text-color: MediumSeaGreen; | ||
--sparkling-color: | --highlight-color: Olive; | ||
--sparkling-color: LightCoral; | |||
} | } | ||
Line 40: | Line 34: | ||
/* -------------- P A G E - | /* -------------- P A G E - S T Y L E ------------ */ | ||
@page { | @page { | ||
size: | |||
margin-top: | /* Choose the size of the publication: A4, A5, A6 or "size: 12cm 5cm;", etc. */ | ||
margin-bottom: | |||
size: A4; | |||
margin-top: 15mm; | |||
margin-bottom: 15mm; | |||
} | } | ||
Line 58: | Line 56: | ||
content: none; | content: none; | ||
} | } | ||
} | } | ||
Line 67: | Line 64: | ||
@right-middle { | @right-middle { | ||
color: var(--sparkling-color); | |||
content: counter(page); | content: counter(page); | ||
font-family: var(--page-number-font); | font-family: var(--page-number-font); | ||
Line 72: | Line 70: | ||
@right-top { | @right-top { | ||
color: var(--text-color); | |||
content: var(--PUB-title); | content: var(--PUB-title); | ||
font-family: var(-- | font-family: var(--code-font); | ||
margin-right: 0.8cm; | margin-right: 0.8cm; | ||
writing-mode: vertical-rl; | writing-mode: vertical-rl; | ||
text-orientation: mixed; | text-orientation: mixed; | ||
} | } | ||
} | } | ||
Line 86: | Line 84: | ||
margin-right: 35mm; | margin-right: 35mm; | ||
margin-left: 20mm; | margin-left: 20mm; | ||
@left-middle { | @left-middle { | ||
color: var(--sparkling-color); | |||
content: counter(page); | content: counter(page); | ||
font-family: var(--page-number-font); | font-family: var(--page-number-font); | ||
Line 93: | Line 93: | ||
@left-top { | @left-top { | ||
color: var(--text-color); | |||
content: var(--PUB-title); | content: var(--PUB-title); | ||
font-family: var(-- | font-family: var(--code-font); | ||
margin-right: 0.8cm; | margin-right: 0.8cm; | ||
writing-mode: vertical-rl; | writing-mode: vertical-rl; | ||
text-orientation: mixed; | text-orientation: mixed; | ||
} | } | ||
} | } | ||
Line 110: | Line 110: | ||
} | } | ||
/* -------------- P A G E - | /* -------------- P A G E - S T Y L E - E N D S ----------- */ | ||
/* -------------- T E X T - S T Y L E --------------------- */ | |||
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{ | b{ | ||
color: var(--sparkling-color); | |||
} | } | ||
p{ | p{ | ||
color: var(--text-color); | color: var(--text-color); | ||
font-family: var(--body-font); | font-family: var(--body-font); | ||
font-size: var(--font-size); | font-size: var(--p-font-size); | ||
line-height: | line-height: calc(var(--p-font-size) + 2pt); | ||
text-indent: | text-indent: calc(var(--p-font-size) + 2pt); | ||
text-wrap: pretty; | 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); | |||
} | } | ||
Line 141: | Line 172: | ||
} | } | ||
/* -------------- | /* -------------- T E X T - B L O C K - E N D S ----------- */ |
Revision as of 11:57, 7 June 2024
:root { /* ************* 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 **************** */ --color-paper: HoneyDew; --text-color: MediumSeaGreen; --highlight-color: Olive; --sparkling-color: LightCoral; } /* -------------- P A G E - S T Y L E ------------ */ @page { /* Choose the size of the publication: A4, A5, A6 or "size: 12cm 5cm;", etc. */ size: A4; margin-top: 15mm; margin-bottom: 15mm; } @page:first{ @right-middle { content: none; } @right-top { content: none; } } @page:right { margin-left: 35mm; margin-right: 20mm; @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: 35mm; margin-left: 20mm; @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 - S T Y L E - E N D S ----------- */ /* -------------- T E X T - S T Y L E --------------------- */ 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 ----------- */