From 3cd08e87b583069e15df5b187e92eb1844de25d3 Mon Sep 17 00:00:00 2001 From: Mike Frysinger Date: Tue, 14 Nov 2023 11:16:01 -0500 Subject: [PATCH] css: merge light & dark into one file This relies on CSS variables, but all major browsers should support them since 2014-2016 timeframe. --- style-dark.css | 36 ----------------------------- style-light.css | 36 ----------------------------- style.css | 60 +++++++++++++++++++++++++++++++++++++++++++++++++ top.php | 3 +-- 4 files changed, 61 insertions(+), 74 deletions(-) delete mode 100644 style-dark.css delete mode 100644 style-light.css create mode 100644 style.css diff --git a/style-dark.css b/style-dark.css deleted file mode 100644 index 6e621b5..0000000 --- a/style-dark.css +++ /dev/null @@ -1,36 +0,0 @@ -/* - * The dark style when user prefers that in their browser/OS. - */ - -body { - color: #cc88ff; - background-color: #111; -} -.inverted { - color: white; - background-color: #9200ff; -} - -a { - color: #cc88ff; -} -a:visited { - color: #bb77ff; -} -a:active { - color: #FF0000; -} - -.inverted a { - color: white; -} - -* { - box-sizing: border-box; -} - -.onecolumn { - float: left; - width: 45%; - padding: 5%; -} diff --git a/style-light.css b/style-light.css deleted file mode 100644 index 7af7eb2..0000000 --- a/style-light.css +++ /dev/null @@ -1,36 +0,0 @@ -/* - * The default (light) style. - */ - -body { - color: #440077; - background-color: white; -} -.inverted { - color: white; - background-color: #440077; -} - -a { - color: #440077; -} -a:visited { - color: #51188E; -} -a:active { - color: #FF0000; -} - -.inverted a { - color: white; -} - -* { - box-sizing: border-box; -} - -.onecolumn { - float: left; - width: 45%; - padding: 5%; -} diff --git a/style.css b/style.css new file mode 100644 index 0000000..e9dcf1f --- /dev/null +++ b/style.css @@ -0,0 +1,60 @@ +@charset "utf-8"; + +/* Variables for light & dark modes. */ + +:root { + --nano-content-bg-color: #fff; + --nano-content-fg-color: #440077; + --nano-inverted-bg-color: #407; + --nano-inverted-fg-color: #fff; + --nano-a-color: #407; + --nano-a-visited-color: #51188E; + --nano-a-active-color: #F00; + --nano-a-inverted-color: #fff; +} + +@media (prefers-color-scheme: dark) { +:root { + --nano-content-bg-color: #111; + --nano-content-fg-color: #cc88ff; + --nano-inverted-bg-color: #9200ff; + --nano-inverted-fg-color: #fff; + --nano-a-color: #c8f; + --nano-a-visited-color: #b7f; + --nano-a-active-color: #F00; + --nano-a-inverted-color: #fff; +} +} + +body { + color: var(--nano-content-fg-color); + background-color: var(--nano-content-bg-color); +} +.inverted { + color: var(--nano-inverted-fg-color); + background-color: var(--nano-inverted-bg-color); +} + +a { + color: var(--nano-a-color); +} +a:visited { + color: var(--nano-a-visited-color); +} +a:active { + color: var(--nano-a-active-color); +} + +.inverted a { + color: var(--nano-a-inverted-color); +} + +* { + box-sizing: border-box; +} + +.onecolumn { + float: left; + width: 45%; + padding: 5%; +} diff --git a/top.php b/top.php index 0b0d162..8f613e1 100644 --- a/top.php +++ b/top.php @@ -9,8 +9,7 @@ - - + -- 2.39.5