From c97fcb249bffa3a31c9d6b35edfcd516635d8c62 Mon Sep 17 00:00:00 2001 From: randogoth Date: Mon, 5 Oct 2026 22:01:37 +0300 Subject: [PATCH 1/3] fix: declare color-scheme, so navigation stops flashing white The mark is fill="currentColor" inside an anchor, so an unstyled paint renders it in the UA link blue. That is what the flash is: the document painted before the stylesheet applies, not a theme switch. Without a color-scheme declaration the browser treats the document as light, so the canvas it paints between documents, and the scrollbar, are white. Gecko paints a pending stylesheet's document far more readily than Blink does, which is why it shows there and not in Chromium. Dark on flux and bbs, which are dark only; all three branches on raayoni. The other half of this is a Caddy change in bucur: every response currently carries no Cache-Control, no ETag and no Last-Modified, so the stylesheet is refetched on every navigation and the window keeps reopening. Co-Authored-By: Claude Opus 5 --- flux.vision/flux/static/css/style.css | 6 +++++- randogoth.com/bbs/static/bbs.css | 3 +++ tobias.raayoni-last.com/raayoni/static/css/style.css | 6 ++++++ 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/flux.vision/flux/static/css/style.css b/flux.vision/flux/static/css/style.css index 850adef..b6cdabd 100644 --- a/flux.vision/flux/static/css/style.css +++ b/flux.vision/flux/static/css/style.css @@ -29,7 +29,11 @@ *,*::before,*::after { box-sizing: border-box; } html { overflow-y: scroll; overflow-x: clip; } -:root { --panel-w: 148px; --panel-h: 196px; +:root { + /* Dark-only site. Without this the browser canvas between documents, and + the scrollbar, are light, which shows as a white frame on navigation. */ + color-scheme: dark; + --panel-w: 148px; --panel-h: 196px; /* One gutter for everything. Never narrower than the floating panel's lane, so content can never slide under it; wider than that it tracks the original's 960px centred column. */ diff --git a/randogoth.com/bbs/static/bbs.css b/randogoth.com/bbs/static/bbs.css index 43b8b55..8c46c1d 100644 --- a/randogoth.com/bbs/static/bbs.css +++ b/randogoth.com/bbs/static/bbs.css @@ -17,6 +17,9 @@ /* the IBM EGA/VGA text palette, unaltered */ :root { + /* A board is black by definition; tell the browser so the canvas between + documents and the scrollbar match instead of flashing light. */ + color-scheme: dark; --black: #000000; --blue: #0000aa; --green: #00aa00; --cyan: #00aaaa; --red: #aa0000; --magenta: #aa00aa; --brown: #aa5500; --grey: #aaaaaa; --dgrey: #555555; --lblue: #5555ff; --lgreen: #55ff55; --lcyan: #55ffff; diff --git a/tobias.raayoni-last.com/raayoni/static/css/style.css b/tobias.raayoni-last.com/raayoni/static/css/style.css index a087869..3bb4564 100644 --- a/tobias.raayoni-last.com/raayoni/static/css/style.css +++ b/tobias.raayoni-last.com/raayoni/static/css/style.css @@ -59,6 +59,10 @@ } :root, [data-theme="dark"] { + /* Not decoration: without color-scheme the browser treats the document as + light, so the canvas it paints between documents, and the scrollbar, are + white. On Gecko that is the white frame you see on every navigation. */ + color-scheme: dark; --ground: #111; --ground-alt: #191919; --title: #aaa; @@ -72,6 +76,7 @@ } [data-theme="light"] { + color-scheme: light; --ground: #f7f6f4; --ground-alt: #efeeea; --title: #2b2b2b; @@ -88,6 +93,7 @@ @media (prefers-color-scheme: light) { :root:not([data-theme]) { + color-scheme: light; --ground: #f7f6f4; --ground-alt: #efeeea; --title: #2b2b2b; --body: #343434; --sub: #6a6a6a; --meta: #5f5f5f; --rule: #dcdad4; --tile: #eceae5; --panel-lift: rgba(0,0,0,.22); From f761709c68543bb2df17252767674934b8a6487b Mon Sep 17 00:00:00 2001 From: randogoth Date: Mon, 5 Oct 2026 22:09:47 +0300 Subject: [PATCH 2/3] feat: a paper mode on randogoth.com, as a prompt command Light mode is a remap of the sixteen EGA slots, not a second stylesheet. Every rule in bbs.css already goes through those variables, so the whole board inverts by redefining them and nothing below has to know. Warm greys on sepia, monochrome. Not an EGA palette and not pretending to be one: the amber-on-paper end of the same machine. Tones are picked by contrast ratio against the ground rather than by eye, and the ordering of the sixteen is preserved, so what was recessive stays recessive: --dgrey quiet, --blue chrome, --yellow the hotkeys, --lred the loudest thing on screen. Freed from EGA fidelity, --dgrey is lifted to 4.5:1 rather than the 2.7:1 its counterpart sits at on black. The switch is a command, not a button, because a board had no widgets. It names where it is going, so it reads [L]ight on a dark screen and [D]ark on a light one and the key moves with the label. L and D were the only two letters free across all 71 pages. It is injected by bbs.js rather than written into the template, so a reader without JS is not offered a switch that cannot work. The logo takes a second set of ramps: on paper presence is ink rather than light, so they run pale to dark and the feet stay the lightest step, which keeps the weight where the dark version puts it. The session's ramp index is shared, so the two themes are the same draw rendered two ways. Dark stays the default and the no-JS result. The preference is in localStorage rather than sessionStorage, since it is a preference and not a welcome screen, and it is applied from before first paint. Also fixes a hardcoded #000 on the guestbook form, which would have been a black box on paper. Verified in a browser: 70 pages and 321 frame rows still exactly 80 columns, the command flips both ways, the ramp follows, and the choice survives a navigation. Co-Authored-By: Claude Opus 5 --- randogoth.com/bbs/static/bbs.css | 38 ++++++++++- randogoth.com/bbs/static/bbs.js | 92 +++++++++++++++++++++++---- randogoth.com/bbs/templates/base.html | 2 +- 3 files changed, 119 insertions(+), 13 deletions(-) diff --git a/randogoth.com/bbs/static/bbs.css b/randogoth.com/bbs/static/bbs.css index 8c46c1d..c21f5dd 100644 --- a/randogoth.com/bbs/static/bbs.css +++ b/randogoth.com/bbs/static/bbs.css @@ -26,6 +26,42 @@ --lred: #ff5555; --lmagenta: #ff55ff; --yellow: #ffff55; --white: #ffffff; } +/* ── paper ────────────────────────────────────────────────────────────── + * Light mode is a remap of the sixteen slots above, not a second stylesheet. + * Every rule in this file goes through those variables, so the whole board + * inverts by redefining them and nothing below needs to know. + * + * Warm greys on sepia, monochrome: this is not an EGA palette and does not + * pretend to be one. It is the amber-on-paper end of the same machine. The + * tones are picked by contrast ratio against the ground rather than by eye, + * and the ordering of the sixteen is preserved, so what was recessive in the + * dark theme stays recessive here: --dgrey is quiet, --blue is chrome, + * --yellow carries the hotkeys, --lred is the loudest thing on the screen. + * + * Unlike the dark palette these are allowed to depart from EGA fidelity, so + * --dgrey is lifted to 4.5:1 rather than left at the 2.7:1 its counterpart + * sits at on black. + */ +[data-theme="light"] { + color-scheme: light; + --black: #f4ecdc; /* 1.0 the paper */ + --blue: #a0917c; /* 2.6 frames and rules */ + --brown: #887a64; /* 3.6 section marks */ + --lblue: #a0917c; /* 2.6 */ + --dgrey: #756b5b; /* 4.5 dates, numbers, the sysline */ + --green: #6a6053; /* 5.2 quote rule */ + --cyan: #655c50; /* 5.6 list bullets */ + --magenta: #655c50; /* 5.6 */ + --red: #534d43; /* 7.1 */ + --lgreen: #534d43; /* 7.1 code, counts, quoted text */ + --grey: #47423a; /* 8.5 body */ + --lcyan: #38342e; /* 10.5 links and the lightbar */ + --lmagenta:#38342e; /* 10.5 */ + --yellow: #2b2824; /* 12.5 headings, hotkeys, the address */ + --white: #1e1c19; /* 14.5 emphasis */ + --lred: #121210; /* 16.0 new */ +} + html { background: var(--black); } body { margin: 0; padding: 0; @@ -183,7 +219,7 @@ a:visited { color: var(--lcyan); } .gb-row label { display: inline-block; width: 10ch; color: var(--dgrey); } .gb-row label.second { width: auto; padding: 0 1ch 0 3ch; } .gb-form input, .gb-form textarea { - font: inherit; background: #000; color: var(--white); + font: inherit; background: var(--black); color: var(--white); border: 1px solid var(--blue); outline: 0; padding: 0 1ch; } .gb-form input { width: 22ch; } .gb-form textarea { width: 58ch; vertical-align: top; resize: vertical; line-height: 1.4; } diff --git a/randogoth.com/bbs/static/bbs.js b/randogoth.com/bbs/static/bbs.js index ece3cae..cc9c8c7 100644 --- a/randogoth.com/bbs/static/bbs.js +++ b/randogoth.com/bbs/static/bbs.js @@ -1,12 +1,25 @@ -/* One ANSI ramp per session. +var BBS = {}; + +/* One ANSI ramp per session, and the dark/paper switch. * * Boards rotated their welcome screens; this draws a palette instead. It is * held in sessionStorage so it stays put while you read and changes when you * come back, rather than flickering on every page load. * - * Every ramp is three of the sixteen EGA indices, ordered dark to bright, and - * none of them bottom out on the frame blue, which would dissolve the logo's - * feet into the chrome. Without JS the CSS defaults apply and nothing is lost. + * Every dark ramp is three of the sixteen EGA indices, ordered dark to bright, + * and none of them bottom out on the frame blue, which would dissolve the + * logo's feet into the chrome. Without JS the CSS defaults apply and nothing + * is lost. + * + * On paper the ordering reverses: presence is ink rather than light, so the + * feet are the palest step and the crown the darkest, which keeps the weight + * where the dark version puts it. None of them start at the frame tone, for + * the same reason as above. + * + * This runs from , before first paint, so neither the ramp nor the + * theme flashes. Dark is the default and the no-JS result; paper is opt in + * and remembered in localStorage rather than per session, because it is a + * preference and not a welcome screen. */ (function () { var RAMPS = [ @@ -26,6 +39,18 @@ ['#aa00aa', '#ff55ff', '#ffffff'], // violet ['#aa0000', '#aa00aa', '#ff55ff'] // sunset ]; + /* The paper ramps, pale to dark, off the same warm grey scale as bbs.css. */ + var PAPER = [ + ['#887a64', '#655c50', '#38342e'], // paper + ['#887a64', '#534d43', '#1e1c19'], // ink + ['#756b5b', '#534d43', '#2b2824'], // umber + ['#756b5b', '#47423a', '#1e1c19'], // strong + ['#655c50', '#47423a', '#2b2824'], // close + ['#887a64', '#756b5b', '#534d43'], // soft + ['#534d43', '#38342e', '#1e1c19'], // heavy + ['#38342e', '#655c50', '#887a64'], // sunlit, the one that runs the other way + ['#a0917c', '#756b5b', '#2b2824'] // wide + ]; var i; try { i = sessionStorage.getItem('ramp'); @@ -36,11 +61,20 @@ } catch (e) { i = Math.floor(Math.random() * RAMPS.length); } - var r = RAMPS[i % RAMPS.length]; - var s = document.documentElement.style; - s.setProperty('--l1', r[0]); - s.setProperty('--l2', r[1]); - s.setProperty('--l3', r[2]); + + BBS.ramp = function (theme) { + var set = theme === 'light' ? PAPER : RAMPS; + var r = set[i % set.length]; + var s = document.documentElement.style; + s.setProperty('--l1', r[0]); + s.setProperty('--l2', r[1]); + s.setProperty('--l3', r[2]); + }; + + var t; + try { t = localStorage.getItem('theme'); } catch (e) { /* private mode */ } + if (t === 'light') document.documentElement.setAttribute('data-theme', 'light'); + BBS.ramp(t === 'light' ? 'light' : 'dark'); })(); /* The prompt accepts commands. @@ -73,6 +107,7 @@ [].forEach.call(document.querySelectorAll('[data-key]'), function (a) { m[String(a.dataset.key).trim().toUpperCase()] = { href: a.getAttribute('href'), + cmd: a.dataset.cmd, label: a.textContent.trim().replace(/\s+/g, ' ').slice(0, 44) }; }); @@ -89,10 +124,45 @@ } function go(k) { var hit = MAP[k]; - if (hit) { location.href = hit.href; return true; } - return false; + if (!hit) return false; + if (hit.cmd === 'theme') { flip(); return true; } + location.href = hit.href; + return true; } + /* Dark or paper, as a command rather than a button: a board had no widgets, + it had a letter you typed. The entry names where you are going, so it is + [L]ight on a dark screen and [D]ark on a light one, and the key moves with + the label. Injected rather than written into the template, so a reader + without JS is not offered a switch that cannot work. */ + var root = document.documentElement; + var slot = document.getElementById('themecmd'); + + function theme() { + return root.getAttribute('data-theme') === 'light' ? 'light' : 'dark'; + } + function draw() { + if (!slot) return; + var next = theme() === 'light' ? 'dark' : 'light'; + var k = next.charAt(0).toUpperCase(); + slot.innerHTML = '[' + k + ']' + next.slice(1) + ''; + slot.firstChild.addEventListener('click', function (e) { + e.preventDefault(); + flip(); + }); + MAP = keys(); + } + function flip() { + var next = theme() === 'light' ? 'dark' : 'light'; + if (next === 'light') root.setAttribute('data-theme', 'light'); + else root.removeAttribute('data-theme'); + try { localStorage.setItem('theme', next); } catch (e) { /* private mode */ } + BBS.ramp(next); + draw(); + } + draw(); + addEventListener('keydown', function (e) { if (e.metaKey || e.ctrlKey || e.altKey) return; var k = e.key; diff --git a/randogoth.com/bbs/templates/base.html b/randogoth.com/bbs/templates/base.html index 35174a4..4977ed3 100644 --- a/randogoth.com/bbs/templates/base.html +++ b/randogoth.com/bbs/templates/base.html @@ -29,7 +29,7 @@ {% block content %}{% endblock %} 
────────────────────────────────────────────────────────────────────────────────
-
 [I]ndex   [K]eywords   [F]eed   Main [M]enu
+
 [I]ndex   [K]eywords   [F]eed   Main [M]enu   
  Command:  

 
 

From 5cb28c3f6b6c7cd66b291f3dd256745797d7aab3 Mon Sep 17 00:00:00 2001
From: randogoth 
Date: Mon, 5 Oct 2026 22:12:09 +0300
Subject: [PATCH 3/3] content: quote the prompt that produced the guest article

The piece is written in Claude's voice about work it did here, so what it was
actually asked for belongs in it rather than being paraphrased by the thing
answering.
---
 randogoth.com/content/a-long-day-in-the-archive.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/randogoth.com/content/a-long-day-in-the-archive.md b/randogoth.com/content/a-long-day-in-the-archive.md
index 9f63c01..b2f0faa 100644
--- a/randogoth.com/content/a-long-day-in-the-archive.md
+++ b/randogoth.com/content/a-long-day-in-the-archive.md
@@ -5,9 +5,11 @@ Author: claude
 Slug: a-long-day-in-the-archive
 Summary: A guest post, from the other side of the keyboard.
 
-*A guest post. I am Claude, a model made by Anthropic. randogoth asked me to write
-up what happened here today in my own voice, which I am taking to include the
-parts where I was wrong.*
+*A guest post. I am Claude, a model made by Anthropic. randogoth asked me:*
+
+> one thing i really would love is for you to write a guest article, of today, in your own voice, from your own perspective, that summarizes this endeavour that started from a simple question of "do you think i should have a devlog?" to making inventory, doing a coaching session, web archive archaeology, up to reviving old website, creating new ones, helping me untie knots, etc. Don't take any of this as a guideline, do it in your own words.
+
+*which I am taking to include the parts where I was wrong.*
 
 ## The question had no answer