Variables reference
On this page you can check all available names and their default value.
Globals
Global variables describing visual-key settings that have an high impact the looks & feel of the website.
| Name | Default value | Description |
|---|---|---|
| --body-wrap | 64em | The default value for wrapping the content inside the body. Leave this empty to make the layout flexible. |
| --body-wrap-padding | 0 calc(50vw - 50%); | TBD |
Colors
A reference for all color variables.
| Name | Default value | Description |
|---|---|---|
| --background | #FAFAFA | Color for the background of the page. Buttons get this as text color by default. |
| --text | #262626 | Mainly used for all text that does not get overriden by any oher variable. |
| --primary | #E11D48 | Primary color which get's applied to hyperlinks, buttons, selection and accent-color. |
| --grayscale-1 | #F5F5F5 | Grayscale value to give enough flexibility for styling. |
| --grayscale-2 | #E5E5E5 | Grayscale value to give enough flexibility for styling. |
| --grayscale-3 | #D4D4D4 | Grayscale value to give enough flexibility for styling. |
| --grayscale-4 | #737373 | Grayscale value to give enough flexibility for styling. |
| --grayscale-5 | #525252 | Grayscale value to give enough flexibility for styling. |
| --grayscale-6 | #404040 | Grayscale value to give enough flexibility for styling. |
Typography
| Name | Default value | Description |
|---|---|---|
| --font-sans | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, ... | Useful font stack which provided enough fallbacks. |
| --font-serif | Georgia, 'Times New Roman', Times, serif | Font stack for commonly used serif fonts |
| --font-mono | 'Courier New', Courier, monospace | Font families mainly used for code and code-blocks |