diff options
| author | Wynn Wolf Arbor | 2020-06-13 11:43:25 +0200 |
|---|---|---|
| committer | Wynn Wolf Arbor | 2020-06-13 16:42:26 +0200 |
| commit | ba981d0e87f9009e3b60a9e54277840d7ae4d0bb (patch) | |
| tree | 9df19326a04088107df9f3d8588a88385744a331 | |
| parent | 34622cf451566f7e91731a45e300cb8b2ca23d72 (diff) | |
| download | site-ba981d0e87f9009e3b60a9e54277840d7ae4d0bb.tar.gz | |
css: Move custom properties to their own file
In preparation for making man.css respect prefers-color-scheme, move all
custom properties to their own file so they can be included easily.
| -rw-r--r-- | scss/_vars.scss | 33 | ||||
| -rw-r--r-- | scss/style.scss | 35 |
2 files changed, 34 insertions, 34 deletions
diff --git a/scss/_vars.scss b/scss/_vars.scss new file mode 100644 index 0000000..7ce46a8 --- /dev/null +++ b/scss/_vars.scss @@ -0,0 +1,33 @@ +:root { + --font-sans: Alegreya Sans, sans; + --font-serif: Alegreya, serif; + --font-mono: Iosevka, Inconsolata, monospace; + + --font-size-pre: 85%; + + --fg-color: black; + --fg-color-canary: #191900; + --fg-color-mute: #5a5a5a; + --fg-href: #0000ee; + --fg-href-visited: #551a8b; + + --bg-color: white; + --bg-color-canary: #ffffc3; + --bg-color-yellow: #ffd400; + + --border-color-light: lightgrey; + --border-color-dark: darkgrey; +} + +@media (prefers-color-scheme: dark) { + :root { + --fg-color: #f0f0f0; + --fg-color-canary: #e9e9f0; + --fg-color-mute: #7a7a7a; + --fg-href: #6464ff; + --fg-href-visited: #9547dd; + + --bg-color: #1c1c1c; + --bg-color-canary: #323232; + } +} diff --git a/scss/style.scss b/scss/style.scss index d5bd770..e56b390 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -1,39 +1,6 @@ @import '_webfonts'; @import '_responsive_fonts'; - -:root { - --font-sans: Alegreya Sans, sans; - --font-serif: Alegreya, serif; - --font-mono: Iosevka, Inconsolata, monospace; - - --font-size-pre: 85%; - - --fg-color: black; - --fg-color-canary: #191900; - --fg-color-mute: #5a5a5a; - --fg-href: #0000ee; - --fg-href-visited: #551a8b; - - --bg-color: white; - --bg-color-canary: #ffffc3; - --bg-color-yellow: #ffd400; - - --border-color-light: lightgrey; - --border-color-dark: darkgrey; -} - -@media (prefers-color-scheme: dark) { - :root { - --fg-color: #f0f0f0; - --fg-color-canary: #e9e9f0; - --fg-color-mute: #7a7a7a; - --fg-href: #6464ff; - --fg-href-visited: #9547dd; - - --bg-color: #1c1c1c; - --bg-color-canary: #323232; - } -} +@import '_vars'; a { color: var(--fg-href); |