commit: 92d12a2bac14913dde3ea88985e8ef597cca04e9
parent fbf9d1a3ab29ad0300798a5c6d3e6e7fdb312260
Author: Haelwenn (lanodan) Monnier <contact@hacktivis.me>
Date: Wed, 8 May 2024 21:43:00 +0200
css/index.css: Provide graceful fallback from CSS variables
Diffstat:
7 files changed, 289 insertions(+), 256 deletions(-)
diff --git a/anybrowser.shtml b/anybrowser.shtml
@@ -15,7 +15,7 @@
<dd>Works greatly, supports everything used</dd>
<dt>Netsurf</dt>
- <dd>Only lacks colors because my CSS theming uses variables</dd>
+ <dd>Renders quite closely to the mainstream ones</dd>
<dt>w3m, lynx, links, elinks, Dillo, abaco, Kristall</dt>
<dd>Works fine</dd>
diff --git a/build.ninja b/build.ninja
@@ -19,6 +19,9 @@ rule dot
rule brotli
command = brotli -k -f -Z -o $out $in && touch $out
+rule colorscheme
+ command = css/colorscheme.sh <$in >$out
+
include config.ninja
build bookmarks.html: xslt bookmarks.xsl bookmarks.xbel
@@ -44,3 +47,5 @@ build images/linux-audio-output-current.png: dot images/linux-audio-output-curre
format = png
build images/linux-audio-output-current.svg: dot images/linux-audio-output-current.dot
format = svg
+
+build css/index.css: colorscheme css/index.in.css
diff --git a/css/colorscheme.sh b/css/colorscheme.sh
@@ -0,0 +1,3 @@
+#!/bin/sh
+set -- $(sed -E -n 's|^\t--(ansi[^:]*): (#[a-zA-Z0-9]*);$|-e s;@\1@;\2;|p' css/colorscheme.css)
+exec sed "$@"
diff --git a/css/index.css b/css/index.css
@@ -1,253 +0,0 @@
-/* BEGIN css/colorscheme.css */
-:root {
- /* gruvbox dark */
- --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 */
-
-/* Because sometimes non-semantic colors happens
- * Like in /notes/vocabulary-jp: Tetris-CC-Sakura-EH.xhtml
- */
-font[color=green] { color: var(--ansi10) }
-
-/* elements */
-a {
- color: var(--ansi13);
- outline-color: invert;
- 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(--ansi02);
- cursor: help;
-}
-body, html {
- background-color: var(--ansi00-hard);
- color: var(--ansi15);
- margin: 0;
- padding: 0;
-}
-blockquote {
- border-left: 0.1em solid;
- padding-left: 0.5em;
-}
-code, pre {
- background-color: var(--ansi00);
- color: var(--ansi15);
- font-family: monospace;
-}
-code { padding: 0 0.25em; }
-pre {
- display: table;
- /* pre-wrap is there for legacy reasons as break-spaces is recent */
- white-space: pre-wrap;
- white-space: break-spaces;
- word-break: break-all;
-}
-.inline-sections article,
-.inline-sections section {
- display: inline-table;
-}
-.box-center h1,
-.box-center h2 {
- text-align: center;
-}
-article, main, .box-center {
- margin: 1.5rem auto;
-}
-article, body > section, main {
- padding: 0.5rem;
- background-color: var(--ansi00-soft);
- display: table;
- vertical-align: top;
-}
-article, main, body > section { max-width: 80em; }
-
-article .timestamps { font-size: small; }
-
-section h1, section h2, section h3, section h4, section h5, section h6 {
- margin-block: 0.25em;
-}
-
-table {
- border-collapse: collapse;
-}
-thead {
- position: sticky;
- top: 0;
- color: var(--ansi15);
- background-color: var(--ansi00-hard);
-}
-td, th {
- border: 2pt solid var(--ansi00-hard);
- padding: 0.25em;
-}
-tbody tr:nth-child(odd) {
- background-color: var(--ansi00-soft);
-}
-tbody tr:nth-child(even) {
- background-color: var(--ansi00);
-}
-thead td, thead th {
- border: none;
-}
-
-td.date, th.date {
- /* YYYY-MM-DD -> 10 characters, of roughly the width of '0' */
- min-width: 10ch;
-}
-
-rt,rp { font-size: 75%; }
-
-kbd, samp {
- user-select: all;
- user-select: contain;
-}
-kbd { font-weight: bold; }
-
-/* selectors */
-h1:target, h2:target, h3:target, h4:target, h5:target, h6:target {
- color: var(--ansi03);
-}
-section { border: 1px dashed transparent; }
-section:target { border: 1px dashed var(--ansi03); }
-
-/* classes */
-.select-all {
- user-select: all;
-}
-.warn { border-bottom: 1pt solid var(--ansi01); }
-dl.list dt {
- display: list-item;
- list-style-type: disc;
- list-style-position: inside;
-}
-
-dl[compact] dt,
-dl[compact] dd {
- display: inline;
-}
-dl[compact] dt { font-weight: bold; }
-dl[compact] dd { margin-inline-start: 2em; }
-
-/* break between items */
-dl[compact] dt:before {
- content: ' ';
- display: block;
-}
-
-img.thumb_inline {
- max-width: 45%;
- object-fit: contain;
- margin: 0.5em;
-}
-.math {
- font-family: math, "CMU Typewriter Text", "STIX Two Math", "Lucida Math", monospace;
-}
-.right { float: right; }
-
-/* footnote */
-.fn {
- font-size: small;
- vertical-align: super;
-}
-
-/* ids */
-#bio { clear: both; }
-#avatar {
- float: left;
- margin: 1em;
- margin-right: 2em;
-}
-
-/* Images/Figures */
-figure {
- text-align: center;
- margin: auto;
-}
-figcaption {
- display: table;
- margin: auto;
-}
-#art {
- border: none;
- text-align: center;
-}
-#art img, figure img {
- max-width: 100%;
- max-height: 100%;
- object-fit: scale-down;
-}
-
-nav, footer {
- background-color: var(--ansi00);
- color: var(--ansi15);
-}
-
-header {
- text-align: center;
- background-color: var(--ansi00);
- color: var(--ansi06);
-}
-
-/* navbar */
-nav {
- font-size: larger;
- font-weight: bold;
- margin: 0 0 1rem 1rem;
- float: right;
-}
-nav, .indexlist {
- line-height: 1.5;
-}
-
-/* footer */
-footer {
- margin-top: 1rem;
- padding: 0.5em 0;
- text-align: center;
- clear: both;
-}
diff --git a/css/index.in.css b/css/index.in.css
@@ -0,0 +1,278 @@
+/* BEGIN css/colorscheme.css */
+:root {
+ /* gruvbox dark */
+ --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 */
+
+/* Because sometimes non-semantic colors happens
+ * Like in /notes/vocabulary-jp: Tetris-CC-Sakura-EH.xhtml
+ */
+font[color=green] {
+ color: @ansi10@;
+ color: var(--ansi10);
+}
+
+/* elements */
+a {
+ color: @ansi13@;
+ color: var(--ansi13);
+ outline-color: invert;
+ 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(--ansi02);
+ cursor: help;
+}
+body, html {
+ background-color: @ansi00-hard@;
+ background-color: var(--ansi00-hard);
+ color: @ansi15@;
+ color: var(--ansi15);
+ margin: 0;
+ padding: 0;
+}
+blockquote {
+ border-left: 0.1em solid;
+ padding-left: 0.5em;
+}
+code, pre {
+ background-color: @ansi00@;
+ background-color: var(--ansi00);
+ color: @ansi15@;
+ color: var(--ansi15);
+ font-family: monospace;
+}
+code { padding: 0 0.25em; }
+pre {
+ display: table;
+ /* pre-wrap is there for legacy reasons as break-spaces is recent */
+ white-space: pre-wrap;
+ white-space: break-spaces;
+ word-break: break-all;
+}
+.inline-sections article,
+.inline-sections section {
+ display: inline-table;
+}
+.box-center h1,
+.box-center h2 {
+ text-align: center;
+}
+article, main, .box-center {
+ margin: 1.5rem auto;
+}
+article, body > section, main {
+ padding: 0.5rem;
+ background-color: @ansi00-soft@;
+ background-color: var(--ansi00-soft);
+ display: table;
+ vertical-align: top;
+}
+article, main, body > section { max-width: 80em; }
+
+article .timestamps { font-size: small; }
+
+section h1, section h2, section h3, section h4, section h5, section h6 {
+ margin-block: 0.25em;
+}
+
+table {
+ border-collapse: collapse;
+}
+thead {
+ position: sticky;
+ top: 0;
+ color: @ansi15@;
+ color: var(--ansi15);
+ background-color: @ansi00-hard@;
+ background-color: var(--ansi00-hard);
+}
+td, th {
+ border: 2pt solid @ansi00-hard@;
+ border: 2pt solid var(--ansi00-hard);
+ padding: 0.25em;
+}
+tbody tr:nth-child(odd) {
+ background-color: @ansi00-soft@;
+ background-color: var(--ansi00-soft);
+}
+tbody tr:nth-child(even) {
+ background-color: @ansi00@;
+ background-color: var(--ansi00);
+}
+thead td, thead th {
+ border: none;
+}
+
+td.date, th.date {
+ /* YYYY-MM-DD -> 10 characters, of roughly the width of '0' */
+ min-width: 10ch;
+}
+
+rt,rp { font-size: 75%; }
+
+kbd, samp {
+ user-select: all;
+ user-select: contain;
+}
+kbd { font-weight: bold; }
+
+/* selectors */
+h1:target, h2:target, h3:target, h4:target, h5:target, h6:target {
+ color: @ansi03@;
+ color: var(--ansi03);
+}
+section { border: 1px dashed transparent; }
+section:target {
+ border: 1px dashed @ansi03@;
+ border: 1px dashed var(--ansi03);
+}
+
+/* classes */
+.select-all {
+ user-select: all;
+}
+.warn {
+ border-bottom: 1pt solid @ansi01@;
+ border-bottom: 1pt solid var(--ansi01);
+}
+dl.list dt {
+ display: list-item;
+ list-style-type: disc;
+ list-style-position: inside;
+}
+
+dl[compact] dt,
+dl[compact] dd {
+ display: inline;
+}
+dl[compact] dt { font-weight: bold; }
+dl[compact] dd { margin-inline-start: 2em; }
+
+/* break between items */
+dl[compact] dt:before {
+ content: ' ';
+ display: block;
+}
+
+img.thumb_inline {
+ max-width: 45%;
+ object-fit: contain;
+ margin: 0.5em;
+}
+.math {
+ font-family: math, "CMU Typewriter Text", "STIX Two Math", "Lucida Math", monospace;
+}
+.right { float: right; }
+
+/* footnote */
+.fn {
+ font-size: small;
+ vertical-align: super;
+}
+
+/* ids */
+#bio { clear: both; }
+#avatar {
+ float: left;
+ margin: 1em;
+ margin-right: 2em;
+}
+
+/* Images/Figures */
+figure {
+ text-align: center;
+ margin: auto;
+}
+figcaption {
+ display: table;
+ margin: auto;
+}
+#art {
+ border: none;
+ text-align: center;
+}
+#art img, figure img {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: scale-down;
+}
+
+nav, footer {
+ background-color: @ansi00@;
+ background-color: var(--ansi00);
+ color: @ansi15@;
+ color: var(--ansi15);
+}
+
+header {
+ text-align: center;
+ background-color: @ansi00@;
+ background-color: var(--ansi00);
+ color: @ansi06@;
+ color: var(--ansi06);
+}
+
+/* navbar */
+nav {
+ font-size: larger;
+ font-weight: bold;
+ margin: 0 0 1rem 1rem;
+ float: right;
+}
+nav, .indexlist {
+ line-height: 1.5;
+}
+
+/* footer */
+footer {
+ margin-top: 1rem;
+ padding: 0.5em 0;
+ text-align: center;
+ clear: both;
+}
diff --git a/templates/head.shtml b/templates/head.shtml
@@ -1,5 +1,5 @@
<meta charset="utf-8"/>
- <link rel="stylesheet" type="text/css" href="/css/index.css?serial=2024041001"/>
+ <link rel="stylesheet" type="text/css" href="/css/index.css?serial=2024050801"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="vcs-git" href="https://hacktivis.me/git/blog/"/>
<link rel="icon" type="text/css" href="/images/favicon.png?serial=2020111201"/>
diff --git a/templates/head.xml b/templates/head.xml
@@ -1,6 +1,6 @@
<xml>
<meta charset="utf-8"/>
- <link rel="stylesheet" type="text/css" href="/css/index.css?serial=2024020901"/>
+ <link rel="stylesheet" type="text/css" href="/css/index.css?serial=2024050801"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="vcs-git" href="https://hacktivis.me/git/blog/"/>
<link rel="icon" type="text/css" href="/images/favicon.png?serial=2020111201"/>
