summaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
authorWynn Wolf Arbor2020-06-12 15:40:02 +0200
committerWynn Wolf Arbor2020-06-12 15:47:27 +0200
commit6d584e253c117722d822b6e8f66e58ebdc23a57b (patch)
tree9b885777683cd9cf2992c45976049c41d2be79ea
parent0a40688e5ea11b40782f19713aa093714ce52a14 (diff)
downloadsite-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.
-rw-r--r--scss/style.scss19
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; }