diff options
| author | Wynn Wolf Arbor | 2020-06-12 15:40:02 +0200 |
|---|---|---|
| committer | Wynn Wolf Arbor | 2020-06-12 15:47:27 +0200 |
| commit | 6d584e253c117722d822b6e8f66e58ebdc23a57b (patch) | |
| tree | 9b885777683cd9cf2992c45976049c41d2be79ea /scss | |
| parent | 0a40688e5ea11b40782f19713aa093714ce52a14 (diff) | |
| download | site-6d584e253c117722d822b6e8f66e58ebdc23a57b.tar.gz | |
css: Introduce variables for various colours
Currently, colours are set per element. In preparation of the support of
prefers-color-scheme, use variables instead so they can be modified in
one place.
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/style.scss | 19 |
1 files changed, 12 insertions, 7 deletions
diff --git a/scss/style.scss b/scss/style.scss index 84b88f1..2e7df1f 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -8,16 +8,21 @@ --font-size-pre: 85%; + --fg-color: black; --fg-color-canary: #191900; --fg-color-mute: #5a5a5a; + --bg-color: white; --bg-color-canary: #ffffc3; --bg-color-yellow: #ffd400; + + --border-color-light: lightgrey; + --border-color-dark: darkgrey; } body { - background-color: white; - color: black; + background-color: var(--bg-color); + color: var(--fg-color); line-height: 1.3; max-width: 1024px; @@ -38,7 +43,7 @@ body.frontpage { hr { border: none; - border-top: 3px double darkgrey; + border-top: 3px double var(--border-color-dark); } } @@ -61,13 +66,13 @@ pre { } pre.clear { - background-color: white; + background-color: var(--bg-color); } pre.indent { font-size: var(--font-size-pre); - border-left: 4px solid lightgrey; + border-left: 4px solid var(--border-color-light); margin-left: 1.5rem; padding-left: 1.5rem; @@ -111,7 +116,7 @@ nav li > article { header.post { font-size: 1.5rem; - border-bottom: 1px solid darkgrey; + border-bottom: 1px solid var(--border-color-dark); a { font-weight: bold; @@ -135,7 +140,7 @@ section.post { hr { border: none; - border-top: 3px double darkgrey; + border-top: 3px double var(--border-color-dark); } ul { list-style: square; } |