marius/risotto
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add colours to README

Browse source
This commit is contained in:
Joe Roe 2024-02-12 09:37:23 +01:00
parent 0d8a9293e6
commit e81c2f02ed
No known key found for this signature in database
GPG key ID: 032DAD09129ADB03
2 changed files with 52 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

34
README.md
View file

@ -65,23 +65,23 @@ The easiest way to use other base16 styles is to place .css file from https://gi
Or to define a wholly custom theme, you will need to define the following CSS variables for the following base16 colours (see [base16-dark.css](blob/main/static/css/palettes/base16-dark.css) for an example):
| 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 | | |
| ---- | ------------------------------------------ | ------------------- | ------------------------------------ |
| 00 | <span class="base00">Dark</span> | Background | Page background |
| 01 | <span class="base01">│</span> | Alt. background | Content background |
| 02 | <span class="base02">│</span> | In-text backgrounds | `<pre>`, `<code>`, `<kbd>`, `<samp>` |
| 03 | <span class="base03">│</span> | Muted text | `:before` & `:marker` symbols |
| 04 | <span class="base04">│</span> | Alt. foreground | Aside text |
| 05 | <span class="base05">│</span> | Foreground | Content text |
| 06 | <span class="base06">│</span> | | |
| 07 | <span class="base07">Light</span> | | |
| 08 | <span class="base08">Red</span> | | |
| 09 | <span class="base09">Orange</span> | | |
| 0A | <span class="base0A">Yellow</span> | Highlights | Selected text, `<mark>` |
| 0B | <span class="base0B">Green</span> | Primary accent | Logo |
| 0C | <span class="base0C">Cyan</span> | Active links | `a:active`, `a:hover` |
| 0D | <span class="base0D">Blue</span> | Links | `a:link`, `a:visited` |
| 0E | <span class="base0E">Magenta</span> | | |
| 0F | <span class="base0F">Brown</span> | | |
For light mode palettes, the sequence of 00–07 should be reversed (light to dark, not dark to light).
Note that not all colours are currently used in the theme.

34
static/css/typography.css
View file

@ -219,3 +219,37 @@ img {
height: auto;
}
/* Colour classes */
.base00 { color: var(--base00); }
.base01 { color: var(--base01); }
.base02 { color: var(--base02); }
.base03 { color: var(--base03); }
.base04 { color: var(--base04); }
.base05 { color: var(--base05); }
.base06 { color: var(--base06); }
.base07 { color: var(--base07); }
.base08 { color: var(--base08); }
.base09 { color: var(--base09); }
.base0A { color: var(--base0A); }
.base0B { color: var(--base0B); }
.base0C { color: var(--base0C); }
.base0D { color: var(--base0D); }
.base0E { color: var(--base0E); }
.base0F { color: var(--base0F); }
.bg-base00 { background-color: var(--base00); }
.bg-base01 { background-color: var(--base01); }
.bg-base02 { background-color: var(--base02); }
.bg-base03 { background-color: var(--base03); }
.bg-base04 { background-color: var(--base04); }
.bg-base05 { background-color: var(--base05); }
.bg-base06 { background-color: var(--base06); }
.bg-base07 { background-color: var(--base07); }
.bg-base08 { background-color: var(--base08); }
.bg-base09 { background-color: var(--base09); }
.bg-base0A { background-color: var(--base0A); }
.bg-base0B { background-color: var(--base0B); }
.bg-base0C { background-color: var(--base0C); }
.bg-base0D { background-color: var(--base0D); }
.bg-base0E { background-color: var(--base0E); }
.bg-base0F { background-color: var(--base0F); }