/* =================================== Load fonts from folder =================================== */ @font-face { font-family: Gentium; src: url("fonts/Gentium/GenBasR.ttf"); } @font-face { font-family: Gentium; font-weight: bold; src: url("fonts/Gentium/GenBasB.ttf"); } @font-face { font-family: Gentium; font-style: italic; src: url("fonts/Gentium/GenBasI.ttf"); } @font-face { font-family: Gentium; font-weight: bold; font-style: italic; src: url("fonts/Gentium/GenBasBI.ttf"); } @font-face { font-family: Sans; src: url("fonts/OpenSans/OpenSans-Regular.ttf"); } @font-face { font-family: Sans; font-weight: bold; src: url("fonts/OpenSans/OpenSans-Bold.ttf"); } @font-face { font-family: Sans; font-style: italic; src: url("fonts/OpenSans/OpenSans-Italic.ttf"); } @font-face { font-family: Sans; font-weight: bold; font-style: italic; src: url("fonts/OpenSans/OpenSans-BoldItalic.ttf"); } @font-face { font-family: 'courier prime'; src: url(../resources/fnt/courierprime/Courier%20Prime.ttf); } @font-face { font-family: 'courier prime'; font-weight: bold; src: url(../resources/fnt/courierprime/Courier%20Prime%20Bold.ttf); } @font-face { font-family: 'courier prime'; font-style: italic; src: url(../resources/fnt/courierprime/Courier%20Prime%20Italic.ttf); } @font-face { font-family: 'courier prime'; font-weight: bold; font-style: italic; src: url(../resources/fnt/courierprime/Courier%20Prime%20Bold%20Italic.ttf); } /* =================================== Page Styles =================================== */ /* Set up the the page styles that are the same for all pages */ @page { @top-left { border-bottom: 15px solid yellowgreen; /* The green line in the header */ } @top-right { border-bottom: 15px solid yellowgreen; /* The green line in the header */ } size: A4; margin: 1.5cm; padding-top: 5mm; } /* The settings of the page named landscape */ @page landscape { size: A4 landscape; /* The page should be landscape and of the size A4 */ /* Remove the header for this page */ @top-left { border:none; content: ""; background: none; } @top-right { border:none; content: ""; background: none; } margin-left: 5mm; padding-left: 5mm; margin-right: 5mm; padding-right: 5mm; } @page landscape:right { margin-top: 2cm; } @page landscape:left { margin-bottom: 2cm; } /* Styles of the first page, aka the cover */ @page:first { /* No page counter for first page */ counter-increment: page 0; /* Remove the header */ @top-left { border:none; content: ""; background: none; } @top-right { border:none; content: ""; background: none; } /* Set the gradient on the page background */ background-image: radial-gradient(circle farthest-corner at 40% 40%, beige, yellowgreen); /* Remove the page margin as it is not needed and should not intervene the gradient */ margin: 0; padding: 0; } /* Set the styles for all pages on the left */ @page:left { /* Set up the styles of the page numbering */ @top-left { padding-top: 6mm; padding-left: 2mm; content: counter(page); font-size: 20pt; font-family: Sans, sans-serif; } /* Set up the styles of the chapter titles */ @top-right { content: string(chaptertitle) " - " string(subchaptertitle); font-family: Sans, sans-serif; font-style: italic; padding-top: 5mm; margin-right: 1cm; } /* Set the paddings on the sides */ padding-right: 2cm; padding-left: 1.5cm; } /* Set the styles for all pages on the right */ @page:right { /* Set up the styles of the page numbering */ @top-right { padding-top: 6mm; padding-right: 2mm; content: counter(page); font-size: 20pt; font-family: Sans, sans-serif; } /* Set up the styles of the chapter titles */ @top-left { content: string(chaptertitle) " - " string(subchaptertitle); font-family: Sans, sans-serif; font-style: italic; padding-top: 5mm; margin-left: 1cm; } /* Set the paddings on the sides */ padding-right: 1.5cm; padding-left: 2cm; } @page:-ro-nth(1 of chapter) { @top-left-corner { content: none; } @top-left { content: none; } @top-right { content: none; } @top-right-corner { content: none; } } /* Set the styles for the last page */ @page:-ro-last { margin-bottom: 10cm; @bottom-center { content: element(disclaimer); background-color: beige; border-top: 2cm solid yellowgreen; -ro-pdf-tag-type: "Div"; } @bottom-left-corner { content: ""; background-color: beige; border-top: 2cm solid yellowgreen; } @bottom-right-corner { content: ""; background-color: beige; border-top: 2cm solid yellowgreen; } } /* Styles used by the cover */ #coverList p { padding: 1mm 0mm 1mm 2mm; margin: 1mm; text-align: left; color: darkslategrey; } #coverList a { color: darkslategrey; text-decoration: none; } p.coverPage { text-shadow: 8pt 8pt 8pt rgba(0, 0, 0, 0.5); } /* =================================== Media Styles =================================== */ /* When opened in a browser, some elements on the cover page like the picture should be hidden. */ @media screen { body > h1 { padding-top: 1cm; } .coverPage, #coverList { display: none; } } /* =================================== Chapter Styles =================================== */ body > h1 { margin-top: 0; padding-top: 3.9cm; counter-increment: h1 1; counter-reset: h2 0; font-size: 40pt; font-family: Sans, sans-serif; line-height: 1.5; text-align: center; text-shadow: 4pt 4pt 3pt rgba(0, 0, 0, 0.3); } body > section { page: chapter; } body > section > h1 { break-before: left; /* The chapter should always start on a new page */ counter-increment: h2 1; /* Increment the chapter counter named h2 */ counter-reset: h3 0 figures 0; /* Reset counters named h3 and figures */ string-set: chaptertitle self; /* Set the current chapter title as string for the header */ font-size: 3rem; margin-top: 2cm; margin-bottom: 2cm; font-style: italic; text-align: left; text-shadow: 0.05em 0.05em 2pt rgba(0, 0, 0, 0.5); } body > section > h1::before { content: counter(h2, upper-latin) " "; /* Add the chapter number */ position: absolute; -ro-position-origin: -ro-page-box; right: 0; top: 0; padding: 0; margin: 0; font-size: 3em; z-index: -1; color: white !important; background-color: yellowgreen; height: 6cm; width: 6cm; text-align: center; font-style: initial; align-content: center; } body > section > h1::after { content: ""; position: absolute; -ro-position-origin: -ro-page-box; top: calc(6cm - 2pt); left: 0; right: 0; border-bottom: 2pt solid yellowgreen; z-index: -1; } body > section > section > h1 { counter-increment: h3 1; /* Increase the counter for numbering of the sub-chapters */ string-set: subchaptertitle self; font-size: 16pt; padding-top: 0.2cm; clear: both; } body > section > section > h1::before { content: counter(h2, upper-latin) "." counter(h3) " "; /* Add the Chapter and the Sub-Chapter numbers */ padding-right: 2mm; } body > section > h1, body > section > section > h1 { font-family: Sans, sans-serif; } body > section > h1::before, body > section > section > h1::before { color: yellowgreen; text-shadow: none; } /* =================================== Boxes =================================== */ /* The Important Box (e.g. Summary) */ figure.important { border:2px solid yellowgreen; break-inside: avoid-page; } figure.important > figcaption { background-color: yellowgreen; color: white; padding: 1mm 1mm 1mm 2mm; font-weight: bold; font-family: Sans, sans-serif; font-size: 14pt; } figure.important > div { break-before: avoid-page; margin: 2mm; } /* The image box with caption */ figure.image { break-inside: avoid-page; margin: 0mm 5mm 2mm 5mm; counter-increment: figures; } figure.image > img { box-shadow: 1mm 1mm 1mm #00000088; } figure.image > figcaption { padding: 2mm 1mm 2mm 3mm; font-family: Sans, sans-serif; font-size: 9pt; text-align: left; } figure.image > figcaption::before { content: "Fig. " counter(h2, upper-latin) "." counter(figures) " "; /* Add figure numbering */ font-weight: bold; } /* Table captions */ caption { font-family: Sans, sans-serif; font-size: 1rem; font-style: italic; text-align: left; } /* Floats used by the image boxes */ .floatl { float:left; margin-left: 0 !important; } .floatr { float:right; margin-right: 0 !important; } /* Code Box */ div.note { clear: both; background-color: beige; margin-top: 12pt; margin-bottom: 12pt; padding: 1mm 5mm 1mm 5mm; border-top: 4px solid yellowgreen; border-bottom: 4px solid yellowgreen; break-inside: avoid-page; break-before: avoid-page; } div.note strong { color: crimson; } /* Note Box */ /* Note that the same class is used for two different elements. The class styles depend on the element */ p.note { background-color: beige; margin-top: 5mm; position: relative; padding: 4mm; clear: both; } p.note::before { content: "NOTE: "; position: absolute; left: 1mm; top: -3mm; font-weight: bold; font-family: Sans, sans-serif; } /* =================================== Tables =================================== */ table { clear: both; /* Make sure that there are no floats to the side of the table */ } table.wide { page: landscape; /* Set the name of the page containing this table */ } table td { padding: 2mm 4mm 2mm 4mm; vertical-align: top; break-inside: avoid-page; /* There should not be a page break inside a table cell */ } /* Styles of table header cells */ table th { padding: 1mm 2mm 1mm 2mm; text-align: inherit; } /* The other table styles */ table.styled { border: 2px solid yellowgreen; margin: 2mm 0; border-collapse: collapse; } /* Style the table header row */ table.styled thead { background-color: yellowgreen; color:white; font-family: Sans, sans-serif; } /* Have alternating colors for the rows */ table.styled tr:nth-child(even) { background-color: beige; } table.styled td:first-child { white-space: nowrap; } /* =================================== Disclaimer =================================== */ #disclaimer { position: running(disclaimer); font-size: 14pt; padding: 1cm 1cm; } #disclaimer li { list-style-image: url(resources/box.svg); } /* =================================== General Styles =================================== */ html { font-family: Gentium; -ro-line-grid: create; } p { text-align: justify; hyphens: auto; } strong { color: green; } sup { font-size: 0.6em; } pre { font-family: 'courier prime', monospace; } /* =================================== Preferences =================================== */ @-ro-preferences { first-page-side: right; page-layout: 1 column; initial-zoom: fit-page; }