From 5101944c5716ceebcc1afd917c323c94cf29a69c Mon Sep 17 00:00:00 2001 From: adam <56338480+adastx@users.noreply.github.com> Date: Sun, 28 Aug 2022 07:16:20 +0200 Subject: css: colour variables --- src/styles/style.css | 36 ++++++++++++++++++++++++------------ 1 file changed, 24 insertions(+), 12 deletions(-) (limited to 'src/styles') diff --git a/src/styles/style.css b/src/styles/style.css index b20fd70..c5f9a89 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -1,6 +1,18 @@ +:root { + --bg: #181a1b; + --bg-light: #222; + --fg: #ddd; + --gray: #888; + --gray-light: #555; + --yellow: #fda; + --yellow-dark: #ca8; + --yellow-warm: #e6c79a; + --wine: #c65a5a +} + body { - background-color: #181a1b; - color: #ddd; + background-color: var(--bg); + color: var(--fg); font: 1em/1.8 'Open Sans', sans-serif; margin: 0 auto; max-width: 50em; @@ -10,7 +22,7 @@ body { header { margin-top: 1em; font-size: 2em; - color: #888; + color: var(--gray); } footer { @@ -18,17 +30,17 @@ footer { margin-bottom: 1.5em; text-align: center; font-size: 0.95em; - color: #888; + color: var(--gray); } a { - color: #fda; + color: var(--yellow); text-decoration: none; } a:hover { text-decoration: underline; - text-decoration-color: #ca8; + text-decoration-color: var(--yellow-dark); } pre > code { @@ -41,8 +53,8 @@ pre > code { pre, code { font-family: 'Fira Code', monospace; font-size: 0.98em; - color: #ddd; - background-color: #222; + color: var(--fg); + background-color: var(--bg-light); border-radius: 5px; } @@ -62,14 +74,14 @@ img { } blockquote { - background-color: #222; - border-left: 5px solid #e6c79a; + background-color: var(--bg-light); + border-left: 5px solid var(--yellow-warm); border-radius: 5px; margin: 0em 1em; padding-left: 1em; } .homepage-link { - color: rgb(198, 90, 90); - text-decoration-color: #555; + color: var(--wine); + text-decoration-color: var(--gray-light); } -- cgit v1.2.3-70-g09d2