Use base16 framework for palettes

This commit is contained in:
Joe Roe 2022-09-30 12:54:31 +02:00
parent c94228ed2a
commit a181c69fd6
18 changed files with 158 additions and 106 deletions

View file

@ -18,12 +18,6 @@ If your site is already a git repository, you can add the theme as a submodule i
git submodule add https://github.com/joeroe/risotto.git themes/risotto
```
## Configure
To use the theme, add `theme = risotto` to your site's `config.toml` or `config.yaml`.
See `exampleSite/config.toml` for the theme-specific parameters you need to add to your site's `config.toml` or `config.yaml` to configure the theme.
## Update
If you installed the theme using `git clone`, pull the repository to get the latest version:
@ -39,3 +33,33 @@ Or, if you added it as a git submodule:
git submodule update --remote
```
## Configure
To use the theme, add `theme = risotto` to your site's `config.toml` or `config.yaml`.
See `exampleSite/config.toml` for the theme-specific parameters you need to add to your site's `config.toml` or `config.yaml` to configure the theme.
### Colour palettes
Colour palettes for the theme are defined using the [base16 system](https://github.com/chriskempson/base16):
| Base | Default colour | Used for | Examples |
| ---- | -------------- | -------- | -------- |
| 00 | Dark | Background | Page background |
| 01 | │ | Alt. background | Content background |
| 02 | │ | In-text backgrounds | `<pre>`, `<code>`, `<kbd>`, `<samp>` |
| 03 | │ | Muted text | `:before` & `:marker` symbols |
| 04 | │ | Alt. foreground | Aside text |
| 05 | │ | Foreground | Content text |
| 06 | │ | | |
| 07 | Light | | |
| 08 | Red | | |
| 09 | Orange | | |
| 0A | Yellow | Highlights | Selected text, `<mark>` |
| 0B | Green | Primary accent | Logo |
| 0C | Cyan | Active links | `a:active`, `a:hover` |
| 0D | Blue | Links | `a:link`, `a:visited` |
| 0E | Magenta | | |
| 0F | Brown | | |
For light mode palettes, the sequence of 0007 should be reversed (light to dark, not dark to light).