199 lines
3.4 KiB
CSS
199 lines
3.4 KiB
CSS
|
body {
|
||
|
margin: 5%;
|
||
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||
|
Roboto, Oxygen, Ubuntu, Cantarell, "PT Sans", "Open Sans", "Fira Sans",
|
||
|
"Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||
|
font-size: medium;
|
||
|
line-height: 1.6;
|
||
|
}
|
||
|
code {
|
||
|
font-family: Consolas, "Lucida Console", Monaco, monospace;
|
||
|
}
|
||
|
|
||
|
/* 1.0 CSS to make A4 print preview as default web view */
|
||
|
@media screen {
|
||
|
.pagedjs_pages {
|
||
|
display: flex;
|
||
|
width: calc(var(--pagedjs-width));
|
||
|
flex: 0;
|
||
|
flex-wrap: wrap;
|
||
|
margin: 0 auto;
|
||
|
justify-content: center;
|
||
|
}
|
||
|
|
||
|
.pagedjs_page {
|
||
|
margin: 10mm;
|
||
|
border: solid 1px gray;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* 2.0 General Formatting */
|
||
|
h1 {
|
||
|
border-bottom: 1px solid black;
|
||
|
margin-bottom: 2rem;
|
||
|
padding-bottom: 0.5rem;
|
||
|
line-height: 1.2;
|
||
|
}
|
||
|
h2 {
|
||
|
border-bottom: 0.1875rem solid black;
|
||
|
margin-bottom: 1rem;
|
||
|
padding-bottom: 0.5rem;
|
||
|
line-height: 1.2;
|
||
|
}
|
||
|
h3 {
|
||
|
line-height: 1.2;
|
||
|
}
|
||
|
p {
|
||
|
text-align: justify;
|
||
|
hyphens: auto;
|
||
|
}
|
||
|
a {
|
||
|
color: #347dbd;
|
||
|
}
|
||
|
a:hover {
|
||
|
color: #fc814a;
|
||
|
}
|
||
|
mark {
|
||
|
color: purple;
|
||
|
background-color: inherit;
|
||
|
}
|
||
|
light-mark {
|
||
|
color: purple;
|
||
|
}
|
||
|
img {
|
||
|
max-width: calc(100% - 3rem);
|
||
|
border: 1px solid #eaeaea;
|
||
|
padding: 1rem;
|
||
|
}
|
||
|
.img-75mm {
|
||
|
height: 75mm;
|
||
|
}
|
||
|
|
||
|
center {
|
||
|
border: 0.5px solid gray;
|
||
|
padding: 1.5rem;
|
||
|
}
|
||
|
|
||
|
pre {
|
||
|
background-color: #f0f0f0;
|
||
|
padding: 1rem;
|
||
|
font-size: smaller;
|
||
|
white-space: pre-wrap;
|
||
|
}
|
||
|
code {
|
||
|
display: block;
|
||
|
}
|
||
|
figure {
|
||
|
margin-inline-start: 0rem;
|
||
|
margin-inline-end: 0rem;
|
||
|
break-inside: avoid;
|
||
|
}
|
||
|
figcaption {
|
||
|
caption-side: top;
|
||
|
color: gray;
|
||
|
}
|
||
|
|
||
|
/* 3.1 Page Size */
|
||
|
@page {
|
||
|
size: A4;
|
||
|
}
|
||
|
|
||
|
/* 3.2 Page Breaks */
|
||
|
.page-break {
|
||
|
break-after: page;
|
||
|
}
|
||
|
.avoid-break {
|
||
|
break-inside: avoid;
|
||
|
}
|
||
|
h2:not(.no-break) {
|
||
|
break-before: page;
|
||
|
margin-block-start: 0rem;
|
||
|
margin-block-end: 1.66rem;
|
||
|
}
|
||
|
h2.no-break:not(.top) {
|
||
|
margin-block-start: 3rem;
|
||
|
margin-block-end: 1.66rem;
|
||
|
}
|
||
|
h2.top {
|
||
|
margin-block-start: 0rem;
|
||
|
margin-block-end: 1.66rem;
|
||
|
}
|
||
|
|
||
|
h3:not(.top) {
|
||
|
margin-block-start: 2.49rem;
|
||
|
margin-block-end: 0.83rem;
|
||
|
}
|
||
|
h3.top {
|
||
|
margin-block-start: 1.66rem;
|
||
|
margin-block-end: 0.83rem;
|
||
|
}
|
||
|
|
||
|
/* 3.3 Page Numbers */
|
||
|
@page {
|
||
|
@bottom-right {
|
||
|
content: counter(page);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* We use the counter-reset class to prevent the page
|
||
|
numbers starting from the cover page, but rather
|
||
|
from the next page (table of contents) */
|
||
|
.counter-reset {
|
||
|
counter-reset: page 1;
|
||
|
}
|
||
|
|
||
|
/* 4.1 Automatic Counters */
|
||
|
body {
|
||
|
counter-reset: sectionNumber;
|
||
|
counter-reset: subsectionNumber;
|
||
|
counter-reset: figureNumber;
|
||
|
}
|
||
|
|
||
|
/* 4.2 Headers & Footers */
|
||
|
.footer {
|
||
|
position: running(footerRunning);
|
||
|
}
|
||
|
@page {
|
||
|
@bottom-left {
|
||
|
content: element(footerRunning);
|
||
|
width: 80mm;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
h2 {
|
||
|
string-set: section content(text);
|
||
|
}
|
||
|
h3 {
|
||
|
string-set: subsection content(text);
|
||
|
}
|
||
|
@page {
|
||
|
@top-right {
|
||
|
content: string(section);
|
||
|
/* ALT: content: string(section) " - " string(subsection); */
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* 4.3 Cover Pages */
|
||
|
.cover-page {
|
||
|
page: cover-page;
|
||
|
}
|
||
|
.cover-page h1 {
|
||
|
border-bottom: 0.25rem solid white;
|
||
|
}
|
||
|
.cover-page h3 {
|
||
|
font-weight: normal;
|
||
|
}
|
||
|
@page cover-page {
|
||
|
background-color: #2385fb; /*347dbd;*/
|
||
|
color: white;
|
||
|
@top-right {
|
||
|
content: none;
|
||
|
}
|
||
|
@bottom-left {
|
||
|
content: none;
|
||
|
}
|
||
|
@bottom-right {
|
||
|
content: none;
|
||
|
}
|
||
|
}
|