Compare commits

..

No commits in common. "5cb28c3f6b6c7cd66b291f3dd256745797d7aab3" and "8505b7e9e0384a56f75d5aed4f0bb0b6aa4e9ef2" have entirely different histories.

6 changed files with 17 additions and 138 deletions

View file

@ -29,11 +29,7 @@
*,*::before,*::after { box-sizing: border-box; }
html { overflow-y: scroll; overflow-x: clip; }
: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;
:root { --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. */

View file

@ -17,51 +17,12 @@
/* 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;
--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;
@ -219,7 +180,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: var(--black); color: var(--white);
font: inherit; background: #000; 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; }

View file

@ -1,25 +1,12 @@
var BBS = {};
/* One ANSI ramp per session, and the dark/paper switch.
/* One ANSI ramp per session.
*
* 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 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 <head>, 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.
* 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.
*/
(function () {
var RAMPS = [
@ -39,18 +26,6 @@ var BBS = {};
['#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');
@ -61,20 +36,11 @@ var BBS = {};
} catch (e) {
i = Math.floor(Math.random() * RAMPS.length);
}
BBS.ramp = function (theme) {
var set = theme === 'light' ? PAPER : RAMPS;
var r = set[i % set.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]);
};
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.
@ -107,7 +73,6 @@ var BBS = {};
[].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)
};
});
@ -124,45 +89,10 @@ var BBS = {};
}
function go(k) {
var hit = MAP[k];
if (!hit) return false;
if (hit.cmd === 'theme') { flip(); return true; }
location.href = hit.href;
return true;
if (hit) { location.href = hit.href; return true; }
return false;
}
/* 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 = '<a href="#" data-cmd="theme" data-key="' + k +
'"><span class="key">[<b>' + k + '</b>]</span>' + next.slice(1) + '</a>';
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;

View file

@ -29,7 +29,7 @@
{% block content %}{% endblock %}
<pre class="rule">────────────────────────────────────────────────────────────────────────────────</pre>
<pre class="prompt"> <a data-key="I" href="{{ SITEURL }}/archives.html"><span class="key">[<b>I</b>]</span>ndex</a> <a data-key="K" href="{{ SITEURL }}/tags.html"><span class="key">[<b>K</b>]</span>eywords</a> <a data-key="F" href="{{ FEED_DOMAIN }}/{{ FEED_ALL_RSS }}"><span class="key">[<b>F</b>]</span>eed</a> <a data-key="M" href="{{ SITEURL }}/">Main <span class="key">[<b>M</b>]</span>enu</a> <span id="themecmd"></span>
<pre class="prompt"> <a data-key="I" href="{{ SITEURL }}/archives.html"><span class="key">[<b>I</b>]</span>ndex</a> <a data-key="K" href="{{ SITEURL }}/tags.html"><span class="key">[<b>K</b>]</span>eywords</a> <a data-key="F" href="{{ FEED_DOMAIN }}/{{ FEED_ALL_RSS }}"><span class="key">[<b>F</b>]</span>eed</a> <a data-key="M" href="{{ SITEURL }}/">Main <span class="key">[<b>M</b>]</span>enu</a>
Command: <span id="typed"></span><span class="cursor"> </span></pre>
</div>

View file

@ -5,11 +5,9 @@ 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:*
> 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.*
*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.*
## The question had no answer

View file

@ -59,10 +59,6 @@
}
: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;
@ -76,7 +72,6 @@
}
[data-theme="light"] {
color-scheme: light;
--ground: #f7f6f4;
--ground-alt: #efeeea;
--title: #2b2b2b;
@ -93,7 +88,6 @@
@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);