1 files changed, 87 insertions, 21 deletions

diff --git a/assets/index.css b/assets/index.css
index dff7a03..9d6fca2 100644
--- a/assets/index.css
+++ b/assets/index.css
@@ -1,3 +1,68 @@
+:root {
+  color-scheme: light dark;
+  --bg: #1d2021;
+  --bg-hard: #282828;
+  --bg1: #3c3836;
+  --bg2: #504945;
+  --bg3: #665c54;
+  --bg4: #7c6f64;
+  --fg: #f9f5d7;
+  --fg-hard: #fdf4c1;
+  --fg1: #ebdbb2;
+  --fg2: #d5c4a1;
+  --fg3: #bdae93;
+  --fg4: #a89984;
+  --red: #cc2412;
+  --green: #98971a;
+  --yellow: #d79921;
+  --blue: #458588;
+  --purple: #b16286;
+  --cyan: #689d6a;
+  --gray: #a89984;
+  --orange: #d65d0e;
+  --bright-red: #fb4934;
+  --bright-green: #b8bb26;
+  --bright-yellow: #fabd2f;
+  --bright-blue: #83a598;
+  --bright-purple: #d3869b;
+  --bright-cyan: #8ec07c;
+  --bright-gray: #928374;
+  --bright-orange: #fe8019;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg: #f9f5d7;
+    --bg-hard: #fdf4c1;
+    --bg1: #ebdbb2;
+    --bg2: #d5c4a1;
+    --bg3: #bdae93;
+    --bg4: #a89984;
+    --fg: #1d2021;
+    --fg-hard: #282828;
+    --fg1: #3c3836;
+    --fg2: #504945;
+    --fg3: #665c54;
+    --fg4: #7c6f64;
+    --red: #9d0006;
+    --green: #79740e;
+    --yellow: #b57614;
+    --blue: #076678;
+    --purple: #8f3f71;
+    --cyan: #427b58;
+    --orange: #af3a03;
+    --gray: #928374;
+    --bright-red: #cc2412;
+    --bright-green: #98971a;
+    --bright-yellow: #d79921;
+    --bright-blue: #458598;
+    --bright-purple: #b16286;
+    --bright-cyan: #689d6a;
+    --bright-orange: #d65d0e;
+    --bright-gray: #7c6f64;
+  }
+}
+
 html {
   background: var(--bg);
   color: var(--fg);
@@ -11,7 +76,6 @@ body {
   width: calc(100vw - 4rem);
   max-width: 640px;
   margin: 0 2rem 1rem;
-  line-height: 1.4;
   align-self: center;
 }
 main {
@@ -21,14 +85,19 @@ main {
 hgroup {
   text-align: center;
 }
+hr {
+  border-width: 0;
+}
 table {
   width: 100%;
   max-width: 500px;
   align-self: center;
   border-collapse: collapse;
+  background: var(--bg1);
+  color: var(--fg1);
 }
-tr {
-  border: 2px solid #ddd;
+tbody {
+  border: 2px solid var(--bg4);
 }
 td {
   padding: 5px;
@@ -37,32 +106,29 @@ td {
 td:first-of-type + td {
   text-align: right;
 }
-td > details > summary {
-  text-align: right;
-}
-td > details {
-  text-align: left;
+tr:first-of-type + tr {
+  border-top: 1px solid var(--bg3);
 }
+
 .ok {
-  color: #228b22;
+  color: var(--bright-green);
 }
 .warning {
-  color: #ff8c00;
+  color: var(--bright-yellow);
 }
 .error {
-  color: #dc143c;
+  color: var(--bright-red);
 }
 
-#status {
-  color: #fff;
-  background: #228b22;
-}
-#status.ok {
-  background: #228b22;
+.details {
+  visibility: collapse;
+  font-size: 8pt;
+  color: var(--fg-hard);
+  background: var(--bg-hard);
 }
-#status.warning {
-  background: #ff8c00;
+:hover + .details {
+  visibility: visible;
 }
-#status.error {
-  background: #dc143c;
+:hover {
+  visibility: visible;
 }