Skip to content

Design Guides

We provide many useful default styles in our base.css. You can import them to your report's CSS using:

1
@import "/assets/global/base.css"

If you want to customize the styles (like fonts, code blocks, etc.), have a look at the following chapters.

Use the following snippets as a guide how to override the base styles.

You do not need them, if you imported the base styles and don't need further customization.

Headings

1
2
3
4
5
/* Avoid page breaks in headlines */
h1, h2, h3, h4, h5, h6 {
  break-inside: avoid;
  break-after: avoid;
}

Code

  • code: code block and inline code
  • pre code: code block
  • .code-block: code block rendered from markdown
  • .code-inline: inline code rendered from markdown
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
pre code {
  display: block !important;
  border: 1px solid black;
  padding: 0.2em;
}
code {
    background-color: whitesmoke;
}

/* Allow line wrapping in code blocks: prevent code from overflowing page */
pre {
  white-space: pre-wrap;
}

Prevent page overflow of long texts

1
2
3
html {
  overflow-wrap: break-word;
}

Justified texts

1
2
3
4
p {
  text-align: justify;
  text-align-last: start;
}

Lists

Style list marker separately with ::marker 

1
2
3
li::marker {
  color: red;
}

Fonts

Fonts can be used in elements with the CSS rule font-family.

Following example uses two fonts for the document: Roboto for regular text (set for the whole html document) and the monospace font Source Code Pro for code blocks.

1
2
3
4
5
6
7
8
html {
  font-family: "Noto Sans", sans-serif;
  font-size: 10pt;
}

code {
  font-family: "Noto Sans Mono", monospace;
}

We provide a range of fonts ready to use. Following fonts are available:

Monospace fonts (for code blocks):

*Deprecated, replaced by similar-looking fonts

Custom Fonts

Custom fonts can be added with CSS @font-face rules. Requests to external systems are blocked. Therefore you have to upload font files as assets and include them with their relative asset URL starting with /asset/name/<filename>.

For google fonts you can generate the font files with this tool: https://google-webfonts-helper.herokuapp.com/fonts/ This generates all CSS rules and provides font files for download.

It is possible to upload the @font-face CSS rules in a separate file and include it in the main stylesheet with their asset URLs.

1
2
3
4
5
@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  src: url('/assets/name/roboto-regular.woff2')
}