From ba981d0e87f9009e3b60a9e54277840d7ae4d0bb Mon Sep 17 00:00:00 2001 From: Wynn Wolf Arbor Date: Sat, 13 Jun 2020 11:43:25 +0200 Subject: 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. --- scss/_vars.scss | 33 +++++++++++++++++++++++++++++++++ scss/style.scss | 35 +---------------------------------- 2 files changed, 34 insertions(+), 34 deletions(-) create mode 100644 scss/_vars.scss 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); -- cgit v1.2.3-2-gb3c3