feat(web): darker dark theme and a hermit-by-the-fire logo

commit: bcc3a129a8c4193ac1ca6140080162032c1c8c0b
author: brice · 11d ago · 2026-10-11 12:39 UTC
parent: 11c083a
signature: GPG VerifiedCD88F9E564E0102646FB6077A1A07C7C7C3E349D · arch-gpg Verified for the committer email

5 files · +53 -20

M internal/adapters/web/ASSETS.md +1 -1


@@ -13,7 +13,7 @@ content-hashed names. Nothing is fetched at runtime.
13	13		\| `static/css/*.css` \| native CSS, served as one stylesheet in name order; relative `url(fonts/…)` and `url(icons/…)` become hashed URLs \| written here \| \|
14	14		\| `static/fonts/atkinson-next.woff2`, `atkinson-next-italic.woff2` \| Atkinson Hyperlegible Next, variable weight, latin subset (SIL OFL 1.1, `static/fonts/OFL-next.txt`) \| Google Fonts \| `18b2a1a39a2fa298b0ba5390aca68462669826c90925656f1c1f6796e0e1bbaf`, `4a5037bfaf6680f40147407407ec09fa42925774bde809a579283d27f9f08106` \|
15	15		\| `static/fonts/atkinson-mono.woff2` \| Atkinson Hyperlegible Mono, variable weight, latin subset (SIL OFL 1.1, `static/fonts/OFL-mono.txt`) \| Google Fonts \| `2706b1ee4f452e744ea91f7e4908cbde9c5d35521bf5ffffc71a382a2de89613` \|
16		-	\| `static/icons/*.svg` \| interface icons, used as CSS masks \| written here \| \|
	16	+	\| `static/icons/*.svg` \| interface icons, used as CSS masks; `brand.svg` is a grey picture shown as is \| written here \| \|
17	17		\| `static/rules.json` \| speculation rules: prefetch same-origin pages on hover (`Speculation-Rules` header) \| written here \| \|
18	18
19	19		The three htmx files are the exact files the approved mockup was built with.


@@ -13,7 +13,7 @@ content-hashed names. Nothing is fetched at runtime.
13		\| `static/css/*.css` \| native CSS, served as one stylesheet in name order; relative `url(fonts/…)` and `url(icons/…)` become hashed URLs \| written here \| \|	13		\| `static/css/*.css` \| native CSS, served as one stylesheet in name order; relative `url(fonts/…)` and `url(icons/…)` become hashed URLs \| written here \| \|
14		\| `static/fonts/atkinson-next.woff2`, `atkinson-next-italic.woff2` \| Atkinson Hyperlegible Next, variable weight, latin subset (SIL OFL 1.1, `static/fonts/OFL-next.txt`) \| Google Fonts \| `18b2a1a39a2fa298b0ba5390aca68462669826c90925656f1c1f6796e0e1bbaf`, `4a5037bfaf6680f40147407407ec09fa42925774bde809a579283d27f9f08106` \|	14		\| `static/fonts/atkinson-next.woff2`, `atkinson-next-italic.woff2` \| Atkinson Hyperlegible Next, variable weight, latin subset (SIL OFL 1.1, `static/fonts/OFL-next.txt`) \| Google Fonts \| `18b2a1a39a2fa298b0ba5390aca68462669826c90925656f1c1f6796e0e1bbaf`, `4a5037bfaf6680f40147407407ec09fa42925774bde809a579283d27f9f08106` \|
15		\| `static/fonts/atkinson-mono.woff2` \| Atkinson Hyperlegible Mono, variable weight, latin subset (SIL OFL 1.1, `static/fonts/OFL-mono.txt`) \| Google Fonts \| `2706b1ee4f452e744ea91f7e4908cbde9c5d35521bf5ffffc71a382a2de89613` \|	15		\| `static/fonts/atkinson-mono.woff2` \| Atkinson Hyperlegible Mono, variable weight, latin subset (SIL OFL 1.1, `static/fonts/OFL-mono.txt`) \| Google Fonts \| `2706b1ee4f452e744ea91f7e4908cbde9c5d35521bf5ffffc71a382a2de89613` \|
16	-	\| `static/icons/*.svg` \| interface icons, used as CSS masks \| written here \| \|	16	+	\| `static/icons/*.svg` \| interface icons, used as CSS masks; `brand.svg` is a grey picture shown as is \| written here \| \|
17		\| `static/rules.json` \| speculation rules: prefetch same-origin pages on hover (`Speculation-Rules` header) \| written here \| \|	17		\| `static/rules.json` \| speculation rules: prefetch same-origin pages on hover (`Speculation-Rules` header) \| written here \| \|
18			18
19		The three htmx files are the exact files the approved mockup was built with.	19		The three htmx files are the exact files the approved mockup was built with.

M internal/adapters/web/static/css/00-tokens.css +12 -12


@@ -28,23 +28,23 @@
28	28		color-scheme: light dark;
29	29
30	30		/* surfaces, bottom to top */
31		-	--bg-canvas: light-dark(#f3f3f3, #0c0c0c); /* the page */
32		-	--bg-inset: light-dark(#f8f8f8, #080808); /* code, fields: sunk into a surface */
33		-	--bg-surface:light-dark(#ffffff, #141414); /* cards, header, rail blocks */
34		-	--bg-raised: light-dark(#ececec, #1d1d1d); /* hover, buttons, panel rows */
35		-	--bg-strong: light-dark(#dedede, #292929); /* selected row, pressed button */
36		-	--bg-overlay:light-dark(#ffffff, #171717); /* dialogs */
37		-	--backdrop: light-dark(rgb(0 0 0 / .25), rgb(0 0 0 / .6));
	31	+	--bg-canvas: light-dark(#f3f3f3, #050505); /* the page */
	32	+	--bg-inset: light-dark(#f8f8f8, #020202); /* code, fields: sunk into a surface */
	33	+	--bg-surface:light-dark(#ffffff, #0c0c0c); /* cards, header, rail blocks */
	34	+	--bg-raised: light-dark(#ececec, #151515); /* hover, buttons, panel rows */
	35	+	--bg-strong: light-dark(#dedede, #212121); /* selected row, pressed button */
	36	+	--bg-overlay:light-dark(#ffffff, #0f0f0f); /* dialogs */
	37	+	--backdrop: light-dark(rgb(0 0 0 / .25), rgb(0 0 0 / .7));
38	38
39		-	--border: light-dark(#dddddd, #242424);
40		-	--border-strong: light-dark(#c2c2c2, #383838);
	39	+	--border: light-dark(#dddddd, #1c1c1c);
	40	+	--border-strong: light-dark(#c2c2c2, #303030);
41	41
42	42		--ink: light-dark(#1b1b1b, #d6d6d6);
43	43		--ink-hi: light-dark(#000000, #fafafa);
44	44		--ink-dim: light-dark(#4d4d4d, #a3a3a3);
45	45		--ink-mute: light-dark(#616161, #8c8c8c);
46	46		--focus: light-dark(#000000, #ffffff);
47		-	--on-ink: light-dark(#ffffff, #0c0c0c); /* text on a filled ink button */
	47	+	--on-ink: light-dark(#ffffff, #050505); /* text on a filled ink button */
48	48
49	49		/* Colour, sparingly, from the owner's Despair theme: only code, diffs and
50	50		verdicts carry hue. Light values are the same hues darkened to AA. */

@@ -62,8 +62,8 @@
62	62		--syn-type: var(--teal-2);
63	63		--syn-punct: var(--ink-dim);
64	64
65		-	--add: light-dark(#dcebeb, #111b1b);
66		-	--del: light-dark(#f2dfe1, #231315);
	65	+	--add: light-dark(#dcebeb, #0c1616);
	66	+	--del: light-dark(#f2dfe1, #1d0e10);
67	67
68	68		--font: "Atkinson Hyperlegible Next", system-ui, sans-serif;
69	69		--mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;


@@ -28,23 +28,23 @@
28		color-scheme: light dark;	28		color-scheme: light dark;
29			29
30		/* surfaces, bottom to top */	30		/* surfaces, bottom to top */
31	-	--bg-canvas: light-dark(#f3f3f3, #0c0c0c); /* the page */	31	+	--bg-canvas: light-dark(#f3f3f3, #050505); /* the page */
32	-	--bg-inset: light-dark(#f8f8f8, #080808); /* code, fields: sunk into a surface */	32	+	--bg-inset: light-dark(#f8f8f8, #020202); /* code, fields: sunk into a surface */
33	-	--bg-surface:light-dark(#ffffff, #141414); /* cards, header, rail blocks */	33	+	--bg-surface:light-dark(#ffffff, #0c0c0c); /* cards, header, rail blocks */
34	-	--bg-raised: light-dark(#ececec, #1d1d1d); /* hover, buttons, panel rows */	34	+	--bg-raised: light-dark(#ececec, #151515); /* hover, buttons, panel rows */
35	-	--bg-strong: light-dark(#dedede, #292929); /* selected row, pressed button */	35	+	--bg-strong: light-dark(#dedede, #212121); /* selected row, pressed button */
36	-	--bg-overlay:light-dark(#ffffff, #171717); /* dialogs */	36	+	--bg-overlay:light-dark(#ffffff, #0f0f0f); /* dialogs */
37	-	--backdrop: light-dark(rgb(0 0 0 / .25), rgb(0 0 0 / .6));	37	+	--backdrop: light-dark(rgb(0 0 0 / .25), rgb(0 0 0 / .7));
38			38
39	-	--border: light-dark(#dddddd, #242424);	39	+	--border: light-dark(#dddddd, #1c1c1c);
40	-	--border-strong: light-dark(#c2c2c2, #383838);	40	+	--border-strong: light-dark(#c2c2c2, #303030);
41			41
42		--ink: light-dark(#1b1b1b, #d6d6d6);	42		--ink: light-dark(#1b1b1b, #d6d6d6);
43		--ink-hi: light-dark(#000000, #fafafa);	43		--ink-hi: light-dark(#000000, #fafafa);
44		--ink-dim: light-dark(#4d4d4d, #a3a3a3);	44		--ink-dim: light-dark(#4d4d4d, #a3a3a3);
45		--ink-mute: light-dark(#616161, #8c8c8c);	45		--ink-mute: light-dark(#616161, #8c8c8c);
46		--focus: light-dark(#000000, #ffffff);	46		--focus: light-dark(#000000, #ffffff);
47	-	--on-ink: light-dark(#ffffff, #0c0c0c); /* text on a filled ink button */	47	+	--on-ink: light-dark(#ffffff, #050505); /* text on a filled ink button */
48			48
49		/* Colour, sparingly, from the owner's Despair theme: only code, diffs and	49		/* Colour, sparingly, from the owner's Despair theme: only code, diffs and
50		verdicts carry hue. Light values are the same hues darkened to AA. */	50		verdicts carry hue. Light values are the same hues darkened to AA. */

@@ -62,8 +62,8 @@
62		--syn-type: var(--teal-2);	62		--syn-type: var(--teal-2);
63		--syn-punct: var(--ink-dim);	63		--syn-punct: var(--ink-dim);
64			64
65	-	--add: light-dark(#dcebeb, #111b1b);	65	+	--add: light-dark(#dcebeb, #0c1616);
66	-	--del: light-dark(#f2dfe1, #231315);	66	+	--del: light-dark(#f2dfe1, #1d0e10);
67			67
68		--font: "Atkinson Hyperlegible Next", system-ui, sans-serif;	68		--font: "Atkinson Hyperlegible Next", system-ui, sans-serif;
69		--mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;	69		--mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;

M internal/adapters/web/static/css/20-shell.css +2 -5


@@ -52,11 +52,8 @@
52	52		& .brand-name { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
53	53		&:hover { text-decoration: none; }
54	54		}
55		-	.brand-mark {
56		-	position: relative; width: 28px; height: 28px; flex: none;
57		-	background: var(--ink-hi); border-radius: var(--r-s);
58		-	&::after { content: ""; position: absolute; inset: 6px; background: var(--on-ink); mask: url(icons/brand.svg) center / contain no-repeat; }
59		-	}
	55	+	/* the hermit by his fire: a grey picture in its own rounded square */
	56	+	.brand-mark { width: 32px; height: 32px; flex: none; background: url(icons/brand.svg) center / contain no-repeat; }
60	57		.crumbs {
61	58		min-width: 0; flex: 1 1 auto; overflow: hidden;
62	59		& ol { display: flex; align-items: center; min-width: 0; font-family: var(--mono); font-size: var(--fs); }

     & .brand-name { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     &:hover { text-decoration: none; }
   }
-  .brand-mark {
+  /* the hermit by his fire: a grey picture in its own rounded square */
-    position: relative; width: 28px; height: 28px; flex: none;
+  .brand-mark { width: 32px; height: 32px; flex: none; background: url(icons/brand.svg) center / contain no-repeat; }
-    background: var(--ink-hi); border-radius: var(--r-s);
-    &::after { content: ""; position: absolute; inset: 6px; background: var(--on-ink); mask: url(icons/brand.svg) center / contain no-repeat; }
-  }
   .crumbs {
     min-width: 0; flex: 1 1 auto; overflow: hidden;
     & ol { display: flex; align-items: center; min-width: 0; font-family: var(--mono); font-size: var(--fs); }

M internal/adapters/web/static/icon.svg +19 -1

@@ -1,1 +1,19 @@
1		-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect width="16" height="16" fill="#161616"/><path d="M4 4h8M4 8h6M4 12h8M4 4v8" stroke="#d0d0d0" stroke-width="2" fill="none"/></svg>
	1	+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
	2	+	<rect x=".5" y=".5" width="31" height="31" rx="7" fill="#181818" stroke="#2c2c2c"/>
	3	+	<circle cx="22.5" cy="20" r="9" fill="#fff" opacity=".06"/>
	4	+	<circle cx="6" cy="6.5" r=".7" fill="#5a5a5a"/>
	5	+	<circle cx="15" cy="4.5" r=".55" fill="#4a4a4a"/>
	6	+	<rect x="3" y="25.6" width="26" height="1.2" rx=".6" fill="#333"/>
	7	+	<rect x="4" y="21.4" width="8" height="4.2" rx="1.6" fill="#555"/>
	8	+	<g fill="none" stroke="#cfcfcf" stroke-linecap="round" stroke-linejoin="round">
	9	+	<path stroke-width="4.4" d="M10.6 13.2 Q8.2 16.4 8.6 20.4"/>
	10	+	<path stroke-width="3.4" d="M8.8 20.2 L14.4 19.2 L15 25"/>
	11	+	<path stroke-width="2.2" d="M10.8 14.6 Q14 17.6 17 17"/>
	12	+	</g>
	13	+	<circle cx="11.6" cy="9.8" r="2.6" fill="#cfcfcf"/>
	14	+	<path stroke="#6e6e6e" stroke-width="1.6" stroke-linecap="round" d="M18.8 25.4 L26.4 23.4 M18.8 23.4 L26.4 25.4"/>
	15	+	<path fill="#f2f2f2" d="M22.6 23.6 C19.6 22.6 19.7 19.2 21.5 16.4 C21.7 18.2 22.6 18.8 23.2 17.5 C23.4 15.8 22.9 14.6 22.4 13.8 C25.2 15.2 27.2 18.8 25.7 21.8 C25.2 22.8 24 23.6 22.6 23.6 Z"/>
	16	+	<path fill="#8a8a8a" d="M22.7 23.2 C21.4 22.7 21.4 21 22.5 19.6 C22.7 20.6 23.4 20.8 23.8 20.2 C24.7 21.5 24.2 23.1 22.7 23.2 Z"/>
	17	+	<circle cx="20.6" cy="12.6" r=".55" fill="#9a9a9a"/>
	18	+	<circle cx="25.2" cy="11.2" r=".45" fill="#777"/>
	19	+	</svg>

@@ -1,1 +1,19 @@
1	-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect width="16" height="16" fill="#161616"/><path d="M4 4h8M4 8h6M4 12h8M4 4v8" stroke="#d0d0d0" stroke-width="2" fill="none"/></svg>	1	+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
			2	+	<rect x=".5" y=".5" width="31" height="31" rx="7" fill="#181818" stroke="#2c2c2c"/>
			3	+	<circle cx="22.5" cy="20" r="9" fill="#fff" opacity=".06"/>
			4	+	<circle cx="6" cy="6.5" r=".7" fill="#5a5a5a"/>
			5	+	<circle cx="15" cy="4.5" r=".55" fill="#4a4a4a"/>
			6	+	<rect x="3" y="25.6" width="26" height="1.2" rx=".6" fill="#333"/>
			7	+	<rect x="4" y="21.4" width="8" height="4.2" rx="1.6" fill="#555"/>
			8	+	<g fill="none" stroke="#cfcfcf" stroke-linecap="round" stroke-linejoin="round">
			9	+	<path stroke-width="4.4" d="M10.6 13.2 Q8.2 16.4 8.6 20.4"/>
			10	+	<path stroke-width="3.4" d="M8.8 20.2 L14.4 19.2 L15 25"/>
			11	+	<path stroke-width="2.2" d="M10.8 14.6 Q14 17.6 17 17"/>
			12	+	</g>
			13	+	<circle cx="11.6" cy="9.8" r="2.6" fill="#cfcfcf"/>
			14	+	<path stroke="#6e6e6e" stroke-width="1.6" stroke-linecap="round" d="M18.8 25.4 L26.4 23.4 M18.8 23.4 L26.4 25.4"/>
			15	+	<path fill="#f2f2f2" d="M22.6 23.6 C19.6 22.6 19.7 19.2 21.5 16.4 C21.7 18.2 22.6 18.8 23.2 17.5 C23.4 15.8 22.9 14.6 22.4 13.8 C25.2 15.2 27.2 18.8 25.7 21.8 C25.2 22.8 24 23.6 22.6 23.6 Z"/>
			16	+	<path fill="#8a8a8a" d="M22.7 23.2 C21.4 22.7 21.4 21 22.5 19.6 C22.7 20.6 23.4 20.8 23.8 20.2 C24.7 21.5 24.2 23.1 22.7 23.2 Z"/>
			17	+	<circle cx="20.6" cy="12.6" r=".55" fill="#9a9a9a"/>
			18	+	<circle cx="25.2" cy="11.2" r=".45" fill="#777"/>
			19	+	</svg>

M internal/adapters/web/static/icons/brand.svg +19 -1

@@ -1,1 +1,19 @@
1		-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="#000" stroke-width="2" stroke-linecap="square"><path d="M4 4h8M4 8h6M4 12h8M4 4v8"/></svg>⏎̸
	1	+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
	2	+	<rect x=".5" y=".5" width="31" height="31" rx="7" fill="#181818" stroke="#2c2c2c"/>
	3	+	<circle cx="22.5" cy="20" r="9" fill="#fff" opacity=".06"/>
	4	+	<circle cx="6" cy="6.5" r=".7" fill="#5a5a5a"/>
	5	+	<circle cx="15" cy="4.5" r=".55" fill="#4a4a4a"/>
	6	+	<rect x="3" y="25.6" width="26" height="1.2" rx=".6" fill="#333"/>
	7	+	<rect x="4" y="21.4" width="8" height="4.2" rx="1.6" fill="#555"/>
	8	+	<g fill="none" stroke="#cfcfcf" stroke-linecap="round" stroke-linejoin="round">
	9	+	<path stroke-width="4.4" d="M10.6 13.2 Q8.2 16.4 8.6 20.4"/>
	10	+	<path stroke-width="3.4" d="M8.8 20.2 L14.4 19.2 L15 25"/>
	11	+	<path stroke-width="2.2" d="M10.8 14.6 Q14 17.6 17 17"/>
	12	+	</g>
	13	+	<circle cx="11.6" cy="9.8" r="2.6" fill="#cfcfcf"/>
	14	+	<path stroke="#6e6e6e" stroke-width="1.6" stroke-linecap="round" d="M18.8 25.4 L26.4 23.4 M18.8 23.4 L26.4 25.4"/>
	15	+	<path fill="#f2f2f2" d="M22.6 23.6 C19.6 22.6 19.7 19.2 21.5 16.4 C21.7 18.2 22.6 18.8 23.2 17.5 C23.4 15.8 22.9 14.6 22.4 13.8 C25.2 15.2 27.2 18.8 25.7 21.8 C25.2 22.8 24 23.6 22.6 23.6 Z"/>
	16	+	<path fill="#8a8a8a" d="M22.7 23.2 C21.4 22.7 21.4 21 22.5 19.6 C22.7 20.6 23.4 20.8 23.8 20.2 C24.7 21.5 24.2 23.1 22.7 23.2 Z"/>
	17	+	<circle cx="20.6" cy="12.6" r=".55" fill="#9a9a9a"/>
	18	+	<circle cx="25.2" cy="11.2" r=".45" fill="#777"/>
	19	+	</svg>

@@ -1,1 +1,19 @@
1	-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="#000" stroke-width="2" stroke-linecap="square"><path d="M4 4h8M4 8h6M4 12h8M4 4v8"/></svg>⏎̸	1	+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
			2	+	<rect x=".5" y=".5" width="31" height="31" rx="7" fill="#181818" stroke="#2c2c2c"/>
			3	+	<circle cx="22.5" cy="20" r="9" fill="#fff" opacity=".06"/>
			4	+	<circle cx="6" cy="6.5" r=".7" fill="#5a5a5a"/>
			5	+	<circle cx="15" cy="4.5" r=".55" fill="#4a4a4a"/>
			6	+	<rect x="3" y="25.6" width="26" height="1.2" rx=".6" fill="#333"/>
			7	+	<rect x="4" y="21.4" width="8" height="4.2" rx="1.6" fill="#555"/>
			8	+	<g fill="none" stroke="#cfcfcf" stroke-linecap="round" stroke-linejoin="round">
			9	+	<path stroke-width="4.4" d="M10.6 13.2 Q8.2 16.4 8.6 20.4"/>
			10	+	<path stroke-width="3.4" d="M8.8 20.2 L14.4 19.2 L15 25"/>
			11	+	<path stroke-width="2.2" d="M10.8 14.6 Q14 17.6 17 17"/>
			12	+	</g>
			13	+	<circle cx="11.6" cy="9.8" r="2.6" fill="#cfcfcf"/>
			14	+	<path stroke="#6e6e6e" stroke-width="1.6" stroke-linecap="round" d="M18.8 25.4 L26.4 23.4 M18.8 23.4 L26.4 25.4"/>
			15	+	<path fill="#f2f2f2" d="M22.6 23.6 C19.6 22.6 19.7 19.2 21.5 16.4 C21.7 18.2 22.6 18.8 23.2 17.5 C23.4 15.8 22.9 14.6 22.4 13.8 C25.2 15.2 27.2 18.8 25.7 21.8 C25.2 22.8 24 23.6 22.6 23.6 Z"/>
			16	+	<path fill="#8a8a8a" d="M22.7 23.2 C21.4 22.7 21.4 21 22.5 19.6 C22.7 20.6 23.4 20.8 23.8 20.2 C24.7 21.5 24.2 23.1 22.7 23.2 Z"/>
			17	+	<circle cx="20.6" cy="12.6" r=".55" fill="#9a9a9a"/>
			18	+	<circle cx="25.2" cy="11.2" r=".45" fill="#777"/>
			19	+	</svg>