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

36
README.md
View file

@ -64,24 +64,24 @@ 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): 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 | | Base | Default colour | Used for | Examples |
| ---- | -------------- | -------- | -------- | | ---- | ------------------------------------------ | ------------------- | ------------------------------------ |
| 00 | Dark | Background | Page background | | 00 | <span class="base00">Dark</span> | Background | Page background |
| 01 | │ | Alt. background | Content background | | 01 | <span class="base01">│</span> | Alt. background | Content background |
| 02 | │ | In-text backgrounds | `<pre>`, `<code>`, `<kbd>`, `<samp>` | | 02 | <span class="base02">│</span> | In-text backgrounds | `<pre>`, `<code>`, `<kbd>`, `<samp>` |
| 03 | │ | Muted text | `:before` & `:marker` symbols | | 03 | <span class="base03">│</span> | Muted text | `:before` & `:marker` symbols |
| 04 | │ | Alt. foreground | Aside text | | 04 | <span class="base04">│</span> | Alt. foreground | Aside text |
| 05 | │ | Foreground | Content text | | 05 | <span class="base05">│</span> | Foreground | Content text |
| 06 | │ | | | | 06 | <span class="base06">│</span> | | |
| 07 | Light | | | | 07 | <span class="base07">Light</span> | | |
| 08 | Red | | | | 08 | <span class="base08">Red</span> | | |
| 09 | Orange | | | | 09 | <span class="base09">Orange</span> | | |
| 0A | Yellow | Highlights | Selected text, `<mark>` | | 0A | <span class="base0A">Yellow</span> | Highlights | Selected text, `<mark>` |
| 0B | Green | Primary accent | Logo | | 0B | <span class="base0B">Green</span> | Primary accent | Logo |
| 0C | Cyan | Active links | `a:active`, `a:hover` | | 0C | <span class="base0C">Cyan</span> | Active links | `a:active`, `a:hover` |
| 0D | Blue | Links | `a:link`, `a:visited` | | 0D | <span class="base0D">Blue</span> | Links | `a:link`, `a:visited` |
| 0E | Magenta | | | | 0E | <span class="base0E">Magenta</span> | | |
| 0F | Brown | | | | 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). 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. 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; 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); }