commit: d6cf00aec001aab7864367cd1efd3e06bde45cab
parent 08e6a75c6053ef9ac3858db5a994c866b5325356
Author: Haelwenn (lanodan) Monnier <contact@hacktivis.me>
Date: Sun, 20 Feb 2022 22:56:04 +0100
css: Initial support for prefers-color-scheme
Diffstat:
| M | css/colorscheme.css | 80 | +++++++++++++++++++++++++++++++++++++++++-------------------------------------- |
| M | css/index.css | 108 | +++++++++++++++++++++++++++++++++++++++++-------------------------------------- |
| M | css/mandoc.css | 90 | +++++++++++++++++++++++++++++++++++++++++-------------------------------------- |
3 files changed, 145 insertions(+), 133 deletions(-)
diff --git a/css/colorscheme.css b/css/colorscheme.css
@@ -1,43 +1,47 @@
-/* Used in: css/index.css (included) and /git/style.css */
+/* Used in: css/index.css, css/mandoc.css (included) and /git/style.css */
:root {
/* gruvbox dark */
- --dark-ansi00: #282828;
- --dark-ansi00-hard: #1d2021;
- --dark-ansi00-soft: #32302f;
- --dark-ansi01: #cc241d;
- --dark-ansi02: #98971a;
- --dark-ansi03: #d79921;
- --dark-ansi04: #458588;
- --dark-ansi05: #b16286;
- --dark-ansi06: #689d6a;
- --dark-ansi07: #a89984;
- --dark-ansi08: #928374;
- --dark-ansi09: #fb4934;
- --dark-ansi10: #b8bb26;
- --dark-ansi11: #fabd2f;
- --dark-ansi12: #83a598;
- --dark-ansi13: #d3869b;
- --dark-ansi14: #8ec07c;
- --dark-ansi15: #ebdbb2;
+ --ansi00: #282828;
+ --ansi00-hard: #1d2021;
+ --ansi00-soft: #32302f;
+ --ansi01: #cc241d;
+ --ansi02: #98971a;
+ --ansi03: #d79921;
+ --ansi04: #458588;
+ --ansi05: #b16286;
+ --ansi06: #689d6a;
+ --ansi07: #a89984;
+ --ansi08: #928374;
+ --ansi09: #fb4934;
+ --ansi10: #b8bb26;
+ --ansi11: #fabd2f;
+ --ansi12: #83a598;
+ --ansi13: #d3869b;
+ --ansi14: #8ec07c;
+ --ansi15: #ebdbb2;
+}
- /* gruvbox light */
- --light-ansi-00: #fbf1c7;
- --light-ansi-00-hard: #f9f5d7;
- --light-ansi-00-soft: #f2e5bc;
- --light-ansi-01: #cc241d;
- --light-ansi-02: #98971a;
- --light-ansi-03: #d79921;
- --light-ansi-04: #458588;
- --light-ansi-05: #b16286;
- --light-ansi-06: #689d6a;
- --light-ansi-07: #7c6f64;
- --light-ansi-08: #928374;
- --light-ansi-09: #9d0006;
- --light-ansi-10: #79740e;
- --light-ansi-11: #b57614;
- --light-ansi-12: #076678;
- --light-ansi-13: #8f3f71;
- --light-ansi-14: #427b58;
- --light-ansi-15: #3c3836;
+@media (prefers-color-scheme: light) {
+ :root {
+ /* gruvbox light */
+ --ansi00: #fbf1c7;
+ --ansi00-hard: #f9f5d7;
+ --ansi00-soft: #f2e5bc;
+ --ansi01: #cc241d;
+ --ansi02: #98971a;
+ --ansi03: #d79921;
+ --ansi04: #458588;
+ --ansi05: #b16286;
+ --ansi06: #689d6a;
+ --ansi07: #7c6f64;
+ --ansi08: #928374;
+ --ansi09: #9d0006;
+ --ansi10: #79740e;
+ --ansi11: #b57614;
+ --ansi12: #076678;
+ --ansi13: #8f3f71;
+ --ansi14: #427b58;
+ --ansi15: #3c3836;
+ }
}
diff --git a/css/index.css b/css/index.css
@@ -1,63 +1,67 @@
/* BEGIN css/colorscheme.css */
:root {
/* gruvbox dark */
- --dark-ansi00: #282828;
- --dark-ansi00-hard: #1d2021;
- --dark-ansi00-soft: #32302f;
- --dark-ansi01: #cc241d;
- --dark-ansi02: #98971a;
- --dark-ansi03: #d79921;
- --dark-ansi04: #458588;
- --dark-ansi05: #b16286;
- --dark-ansi06: #689d6a;
- --dark-ansi07: #a89984;
- --dark-ansi08: #928374;
- --dark-ansi09: #fb4934;
- --dark-ansi10: #b8bb26;
- --dark-ansi11: #fabd2f;
- --dark-ansi12: #83a598;
- --dark-ansi13: #d3869b;
- --dark-ansi14: #8ec07c;
- --dark-ansi15: #ebdbb2;
+ --ansi00: #282828;
+ --ansi00-hard: #1d2021;
+ --ansi00-soft: #32302f;
+ --ansi01: #cc241d;
+ --ansi02: #98971a;
+ --ansi03: #d79921;
+ --ansi04: #458588;
+ --ansi05: #b16286;
+ --ansi06: #689d6a;
+ --ansi07: #a89984;
+ --ansi08: #928374;
+ --ansi09: #fb4934;
+ --ansi10: #b8bb26;
+ --ansi11: #fabd2f;
+ --ansi12: #83a598;
+ --ansi13: #d3869b;
+ --ansi14: #8ec07c;
+ --ansi15: #ebdbb2;
+}
- /* gruvbox light */
- --light-ansi-00: #fbf1c7;
- --light-ansi-00-hard: #f9f5d7;
- --light-ansi-00-soft: #f2e5bc;
- --light-ansi-01: #cc241d;
- --light-ansi-02: #98971a;
- --light-ansi-03: #d79921;
- --light-ansi-04: #458588;
- --light-ansi-05: #b16286;
- --light-ansi-06: #689d6a;
- --light-ansi-07: #7c6f64;
- --light-ansi-08: #928374;
- --light-ansi-09: #9d0006;
- --light-ansi-10: #79740e;
- --light-ansi-11: #b57614;
- --light-ansi-12: #076678;
- --light-ansi-13: #8f3f71;
- --light-ansi-14: #427b58;
- --light-ansi-15: #3c3836;
+@media (prefers-color-scheme: light) {
+ :root {
+ /* gruvbox light */
+ --ansi00: #fbf1c7;
+ --ansi00-hard: #f9f5d7;
+ --ansi00-soft: #f2e5bc;
+ --ansi01: #cc241d;
+ --ansi02: #98971a;
+ --ansi03: #d79921;
+ --ansi04: #458588;
+ --ansi05: #b16286;
+ --ansi06: #689d6a;
+ --ansi07: #7c6f64;
+ --ansi08: #928374;
+ --ansi09: #9d0006;
+ --ansi10: #79740e;
+ --ansi11: #b57614;
+ --ansi12: #076678;
+ --ansi13: #8f3f71;
+ --ansi14: #427b58;
+ --ansi15: #3c3836;
+ }
}
/* END css/colorscheme.css */
/* elements */
a {
- color: var(--dark-ansi13);
+ color: var(--ansi13);
outline-color: invert;
- outline-color: var(--dark-ansi11);
+ outline-color: var(--ansi11);
}
summary { cursor: pointer; } /* for some reason this isn't in webkit */
abbr {
text-decoration: underline;
text-decoration: dotted underline;
- text-decoration-color: var(--dark-ansi02);
+ text-decoration-color: var(--ansi02);
cursor: help;
}
body, html {
- background-color: var(--dark-ansi00-hard);
- color: var(--dark-ansi15);
+ background-color: var(--ansi00-hard);
+ color: var(--ansi15);
margin: 0;
padding: 0;
}
@@ -66,8 +70,8 @@ blockquote {
padding-left: 0.5em;
}
code, pre {
- background-color: var(--dark-ansi00);
- color: var(--dark-ansi15);
+ background-color: var(--ansi00);
+ color: var(--ansi15);
font-family: monospace;
}
code { padding: 0 0.25em; }
@@ -91,7 +95,7 @@ article, main, .box-center {
}
article, section, main {
padding: 0.5rem;
- background-color: var(--dark-ansi00-soft);
+ background-color: var(--ansi00-soft);
display: table;
vertical-align: top;
}
@@ -125,10 +129,10 @@ kbd { font-weight: bold; }
/* selectors */
h1:target, h2:target, h3:target, h4:target, h5:target, h6:target {
- color: var(--dark-ansi03);
+ color: var(--ansi03);
}
section { border: 1px dashed transparent; }
-section:target { border: 1px dashed var(--dark-ansi03); }
+section:target { border: 1px dashed var(--ansi03); }
/* classes */
.select-all {
@@ -137,7 +141,7 @@ section:target { border: 1px dashed var(--dark-ansi03); }
-ms-user-select: all;
user-select: all;
}
-.warn { border-bottom: 1pt solid var(--dark-ansi01); }
+.warn { border-bottom: 1pt solid var(--ansi01); }
dl.list dt {
display: list-item;
list-style-type: disc;
@@ -176,14 +180,14 @@ figure {
}
nav, footer {
- background-color: var(--dark-ansi00);
- color: var(--dark-ansi07);
+ background-color: var(--ansi00);
+ color: var(--ansi07);
}
header {
text-align: center;
- background-color: var(--dark-ansi00);
- color: var(--dark-ansi06);
+ background-color: var(--ansi00);
+ color: var(--ansi06);
}
/* navbar */
diff --git a/css/mandoc.css b/css/mandoc.css
@@ -1,61 +1,65 @@
/* BEGIN css/colorscheme.css */
:root {
/* gruvbox dark */
- --dark-ansi00: #282828;
- --dark-ansi00-hard: #1d2021;
- --dark-ansi00-soft: #32302f;
- --dark-ansi01: #cc241d;
- --dark-ansi02: #98971a;
- --dark-ansi03: #d79921;
- --dark-ansi04: #458588;
- --dark-ansi05: #b16286;
- --dark-ansi06: #689d6a;
- --dark-ansi07: #a89984;
- --dark-ansi08: #928374;
- --dark-ansi09: #fb4934;
- --dark-ansi10: #b8bb26;
- --dark-ansi11: #fabd2f;
- --dark-ansi12: #83a598;
- --dark-ansi13: #d3869b;
- --dark-ansi14: #8ec07c;
- --dark-ansi15: #ebdbb2;
- /* gruvbox light */
- --light-ansi-00: #fbf1c7;
- --light-ansi-00-hard: #f9f5d7;
- --light-ansi-00-soft: #f2e5bc;
- --light-ansi-01: #cc241d;
- --light-ansi-02: #98971a;
- --light-ansi-03: #d79921;
- --light-ansi-04: #458588;
- --light-ansi-05: #b16286;
- --light-ansi-06: #689d6a;
- --light-ansi-07: #7c6f64;
- --light-ansi-08: #928374;
- --light-ansi-09: #9d0006;
- --light-ansi-10: #79740e;
- --light-ansi-11: #b57614;
- --light-ansi-12: #076678;
- --light-ansi-13: #8f3f71;
- --light-ansi-14: #427b58;
- --light-ansi-15: #3c3836;
+ --ansi00: #282828;
+ --ansi00-hard: #1d2021;
+ --ansi00-soft: #32302f;
+ --ansi01: #cc241d;
+ --ansi02: #98971a;
+ --ansi03: #d79921;
+ --ansi04: #458588;
+ --ansi05: #b16286;
+ --ansi06: #689d6a;
+ --ansi07: #a89984;
+ --ansi08: #928374;
+ --ansi09: #fb4934;
+ --ansi10: #b8bb26;
+ --ansi11: #fabd2f;
+ --ansi12: #83a598;
+ --ansi13: #d3869b;
+ --ansi14: #8ec07c;
+ --ansi15: #ebdbb2;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ /* gruvbox light */
+ --ansi00: #fbf1c7;
+ --ansi00-hard: #f9f5d7;
+ --ansi00-soft: #f2e5bc;
+ --ansi01: #cc241d;
+ --ansi02: #98971a;
+ --ansi03: #d79921;
+ --ansi04: #458588;
+ --ansi05: #b16286;
+ --ansi06: #689d6a;
+ --ansi07: #7c6f64;
+ --ansi08: #928374;
+ --ansi09: #9d0006;
+ --ansi10: #79740e;
+ --ansi11: #b57614;
+ --ansi12: #076678;
+ --ansi13: #8f3f71;
+ --ansi14: #427b58;
+ --ansi15: #3c3836;
+ }
}
/* END css/colorscheme.css */
-/* Global defaults. */
a[href] {
- color: var(--dark-ansi13);
+ color: var(--ansi13);
}
a {
outline-color: invert;
- outline-color: var(--dark-ansi11);
+ outline-color: var(--ansi11);
text-decoration: underline;
}
summary { cursor: pointer; } /* for some reason this isn't in webkit */
body, html {
- background-color: var(--dark-ansi00-hard);
- color: var(--dark-ansi15);
+ background-color: var(--ansi00-hard);
+ color: var(--ansi15);
margin: auto;
padding: 0;
max-width: 100ch;
@@ -283,7 +287,7 @@ code.In, .Fd, .Fn,
.Em {
font-style: italic;
font-weight: normal;
- color: var(--dark-ansi10);
+ color: var(--ansi10);
}
.Op {
