| 1 | # styling guide
|
| 2 |
|
| 3 | to add a custom stylesheet, simply append a html
|
| 4 | `<link rel='stylesheet' src='custom.css'>` to the top of the page.
|
| 5 |
|
| 6 | ## the example block
|
| 7 |
|
| 8 | in order to show raw html in a standout way, use an example block:
|
| 9 |
|
| 10 | ````md
|
| 11 | ```html //example
|
| 12 | <button style="background: var(--button); color: var(--text)">click me</button>
|
| 13 | ```
|
| 14 | ````
|
| 15 |
|
| 16 | ```html //example
|
| 17 | <button style="background: var(--button); color: var(--text)">click me</button>
|
| 18 | ```
|
| 19 |
|
| 20 | ## theming - colours
|
| 21 |
|
| 22 | the theme is built with css variables, in order to be easily completely
|
| 23 | changed (colour-wise).
|
| 24 |
|
| 25 | to change a colour for the default (aka light theme), define it within the
|
| 26 | `:root` wrapper like so:
|
| 27 |
|
| 28 | ```css
|
| 29 | :root {
|
| 30 | --bg: #b6d2ca;
|
| 31 | }
|
| 32 | ```
|
| 33 |
|
| 34 | to change a colour for the dark theme, define it within the
|
| 35 | `@media (prefers-color-scheme: dark)` wrapper like so:
|
| 36 |
|
| 37 | ```css
|
| 38 | @media (prefers-color-scheme: dark) {
|
| 39 | :root {
|
| 40 | --button: #9d4f83;
|
| 41 | }
|
| 42 | }
|
| 43 | ```
|
| 44 |
|
| 45 | #### variables
|
| 46 |
|
| 47 | | variable | default (light) | default (dark) |
|
| 48 | | ------------------------------------------- | ------------------------------------------------------- | ------------------------------ |
|
| 49 | | `--primary` | defined in [the build/serve options](README.md#options) | - |
|
| 50 | | `--absolute` | `#000` | `#fff` |
|
| 51 | | `--contrast` | `#fff` | `#000` |
|
| 52 | | `--text` | `rgba(0, 0, 0, 0.84)` | `#ddd` |
|
| 53 | | `--link` | `--primary` | 22.5% lighter than `--primary` |
|
| 54 | | `--grey` | `#6f6f6f` | `#52555C` |
|
| 55 | | `--bg` | `#fbfcfc` | `#0e0f0f` |
|
| 56 | | `--box` | `#f2f3f4` | `#050505` |
|
| 57 | | `--code` | `#f7f9f9` | `#000` |
|
| 58 | | `--button` (for the page navigation arrows) | `#eee` | `#2d2d2d` |
|
| 59 | | `--border` | `#e5e7e9` | `#2d2e2f` |
|
| 60 | | `--shadow` | `#eee` | `#070707` |
|
| 61 | | `--glow` | `transparent` | `var(--primary)` |
|
| 62 | | `--scroll` | `#e9e9e9` | `#202225` |
|
| 63 | | `--hover` | `#dedede` | `#36393f` |
|
| 64 | | `--code-lang` | `#555` | `#ccc` |
|
| 65 | | `--hljs-html` | `#000080` | `#46db8c` |
|
| 66 | | `--hljs-attr` | `#008080` | `#dd1111` |
|
| 67 | | `--hljs-obj` | `#2c426b` | `#c6cbda` |
|
| 68 | | `--hljs-string` | `#d14` | `#abcdef` |
|
| 69 | | `--hljs-builtin` | `#0086b3` | `#b8528d` |
|
| 70 | | `--hljs-keyword` | `rgba(0, 0, 0, 0.84)` | `#2d8b59` |
|
| 71 | | `--hljs-selector` | `#900` | - |
|
| 72 | | `--hljs-type` | `#458` | - |
|
| 73 | | `--hljs-regex` | `#009926` | - |
|
| 74 | | `--hljs-symbol` | `#990073` | - |
|
| 75 | | `--hljs-meta` | `#999` | - |
|
| 76 | | `--hljs-comment` | `#707070` | `#a0a0a0` |
|
| 77 | | `--hljs-deletion` | `#e8b9b8` | `#4c232d` |
|
| 78 | | `--hljs-deletion-text` | `#4c232d` | `#e8b9b8` |
|
| 79 | | `--hljs-addition` | `#b9e0d3` | `#1e4839` |
|
| 80 | | `--hljs-addition-text` | `#1e4839` | `#b9e0d3` |
|
| 81 |
|
| 82 | ## theming - classes
|
| 83 |
|
| 84 | | class | connected element/s |
|
| 85 | | ------------------------------ | --------------------------------------------------------------------- |
|
| 86 | | `.title` | the (container for) the title in the sidebar |
|
| 87 | | `.icon` | the icon in the sidebar title |
|
| 88 | | `.active` | the currently focused/highlighted sidebar item |
|
| 89 | | `.level-N` (up to `.level-6` ) | sidebar items related to `## headers` on the page |
|
| 90 | | `.wrapper` | the combined container for the body and the mobile navbar |
|
| 91 | | `.documentative` | the page content |
|
| 92 | | `.blobk` | a section (a header + all content until the next header) |
|
| 93 | | `.example` | an [example block](#the-example-block) |
|
| 94 | | `.prev` | the previous page button: ᐊ |
|
| 95 | | `.next` | the previous page button: ᐅ |
|
| 96 | | `.footer` | the footer defined in [the build/serve options](README.md#options) |
|
| 97 | | `.toggle` | the mobile nav bar, inc. the hamburger button |
|
| 98 | | `.mobilemenu` | the class toggled on/off the body to open/close the sidebar on mobile |
|
| 99 |
|
| 100 | \+ the highlight.js classes (see [their docs](https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html))
|