Add colours to README

joeroe · Feb 12, 2024 · e81c2f0 · e81c2f0
1 parent 0d8a929
commit e81c2f0
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -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):
 
-| 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          |          |          |
+| Base | Default colour                             | Used for            | Examples                             |
+| ---- | ------------------------------------------ | ------------------- | ------------------------------------ |
+| 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.

diff --git a/static/css/typography.css b/static/css/typography.css
@@ -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); }