summaryrefslogtreecommitdiffstatshomepage
path: root/scss
diff options
context:
space:
mode:
authorWynn Wolf Arbor2020-06-12 15:23:07 +0200
committerWynn Wolf Arbor2020-06-12 15:33:42 +0200
commit583576e120da2971e1d2c83d46b4954340606987 (patch)
treee260c010b5e092c2f3d70c8028ef1ae3dbe8c11c /scss
parenta211596cfba8ed71e56cf60ae76bcbaf07bbd5d2 (diff)
downloadsite-583576e120da2971e1d2c83d46b4954340606987.tar.gz
css: Use CSS custom properties instead of Sass variables
In preparation for the support of prefers-color-scheme, convert all presently used Sass variables to CSS custom properties. This will enable us in an upcoming commit to define different values per media query. While at it, use a better name for variables holding colours.
Diffstat (limited to '')
-rw-r--r--scss/style.scss37
1 files changed, 20 insertions, 17 deletions
diff --git a/scss/style.scss b/scss/style.scss
index ff443b9..29c7226 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -1,16 +1,19 @@
@import '_webfonts';
@import '_responsive_fonts';
-$font-sans: Alegreya Sans, sans;
-$font-serif: Alegreya, serif;
-$font-mono: Iosevka, Inconsolata, monospace;
+:root {
+ --font-sans: Alegreya Sans, sans;
+ --font-serif: Alegreya, serif;
+ --font-mono: Iosevka, Inconsolata, monospace;
-$font-size-pre: 85%;
+ --font-size-pre: 85%;
-$yellow: #ffd400;
-$canary: #ffffc3;
-$canary-text: #191900;
-$mute-text: #5a5a5a;
+ --fg-color-canary: #191900;
+ --fg-color-mute: #5a5a5a;
+
+ --bg-color-canary: #ffffc3;
+ --bg-color-yellow: #ffd400;
+}
body {
background-color: white;
@@ -21,7 +24,7 @@ body {
margin: 1rem auto;
padding: 0 1rem;
- font-family: $font-sans;
+ font-family: var(--font-sans);
font-size: 1.3rem;
}
@@ -46,13 +49,13 @@ h1 {
}
code {
- font-family: $font-mono;
- font-size: $font-size-pre;
+ font-family: var(--font-mono);
+ font-size: var(--font-size-pre);
}
pre {
- background-color: $canary;
- color: $canary-text;
+ background-color: var(--bg-color-canary);
+ color: var(--fg-color-canary);
overflow: auto;
padding: .7rem;
}
@@ -62,7 +65,7 @@ pre.clear {
}
pre.indent {
- font-size: $font-size-pre;
+ font-size: var(--font-size-pre);
border-left: 4px solid lightgrey;
@@ -71,7 +74,7 @@ pre.indent {
}
blockquote {
- background-color: $canary;
+ background-color: var(--bg-color-canary);
padding: .7rem;
}
@@ -100,7 +103,7 @@ nav li > article {
display: flex;
font-size: 60%;
- color: $mute-text;
+ color: var(--fg-color-mute);
}
a { align-self: flex-start; }
@@ -152,7 +155,7 @@ section.post {
figure {
figcaption {
- color: $mute-text;
+ color: var(--fg-color-mute);
text-align: center;
font-size: smaller;