From a16c87ccdf40d367fe277007efc00f74c7dfc110 Mon Sep 17 00:00:00 2001 From: Case Duckworth Date: Sun, 24 Jul 2022 21:59:18 -0500 Subject: Variable-ize colors (thanks dozens!) --- style.css | 67 +++++++++++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 46 insertions(+), 21 deletions(-) diff --git a/style.css b/style.css index a6a11f9..0934393 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,21 @@ +:root { + --main-background: white; + --main-foreground: black; + --alt-background: #eee; + --alt-foreground: black; + --fresh-background: inherit; + --fresh-foreground: inherit; + --stale-background: inherit; + --stale-foreground: inherit; + --hover-background: yellow; + --hover-foreground: inherit; + --active-background: cyan; + --active-foreground: inherit; +} + body { + background: var(--main-background); + color: var(--main-foreground); font: 16px/1.2 sans-serif; } @@ -70,17 +87,22 @@ td { tr:nth-child(even), #feedlist li:nth-child(even) { - background: white; + background: var(--main-background); } tr:nth-child(even):last-child { - border-bottom: #eee; + border-bottom: 1px solid var(--alt-background); } tr:nth-child(odd), #feedlist li:nth-child(odd) { - background: #eee; + background: var(--alt-background); +} + +aside { + flex-grow: 1; + text-align: right; } aside li { @@ -89,10 +111,14 @@ aside li { .fresh { font-weight: bold; + background: var(--fresh-background); + color: var(--fresh-foreground); } .fresh nav, .stale { font-weight: normal; + background: var(--stale-background); + color: var(--stale-foreground); } a { @@ -108,11 +134,13 @@ a:link { a:visited { color: inherit; } a:hover { - background: yellow; + background: var(--hover-background); + color: var(--hover-foreground); } a:active { - background: cyan; + background: var(--active-background); + color: var(--active-foreground); } .yt a { color: #ff0000; } @@ -166,21 +194,18 @@ footer a:link { } @media screen and (prefers-color-scheme: dark) { - body {background: black; color: white; } - tr:nth-child(even), - #feedlist li:nth-child(even) - { - background: black; - } - tr:nth-child(even):last-child { - border-bottom: #222; - } - tr:nth-child(odd), - #feedlist li:nth-child(odd) - { - background: #222; + :root { + --main-background: black; + --main-foreground: white; + --alt-background: #222; + --alt-foreground: white; + --fresh-background: inherit; + --fresh-foreground: inherit; + --stale-background: inherit; + --stale-foreground: inherit; + --hover-background: inherit; + --hover-foreground: yellow; + --active-background: inherit; + --active-foreground: cyan; } - a:hover {color: yellow; background: inherit;} - a:active {color: cyan; background: inherit;} - .entry-extra a {color: cyan;} } -- cgit 1.4.1-21-gabe81