randogoth/sites
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
sites/randogoth.com/bbs/templates/base.html
randogoth f761709c68 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 <head> 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 <noreply@anthropic.com>
2026-10-05 22:09:47 +03:00

37 lines
9.1 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="{{ DEFAULT_LANG }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{{ SITENAME }}{% endblock %}</title>
<link rel="stylesheet" href="{{ SITEURL }}/theme/bbs.css">
<link rel="me" href="https://mas.to/@randogoth">
{% if FEED_ALL_ATOM %}<link href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Atom">{% endif %}
{% if FEED_ALL_RSS %}<link href="{{ FEED_DOMAIN }}/{{ FEED_ALL_RSS }}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} RSS">{% endif %}
<script src="{{ SITEURL }}/theme/bbs.js"></script>
</head>
<body>
<div id="screen">
<pre class="logo" id="logo"> <span class="f3">█████▄</span> <span class="f3">▄█</span><span class="f3 b2">█</span><span class="f3">█▄</span> <span class="f3 b2">█▓</span><span class="f3">▄</span><span class="f3 b2">██</span><span class="f3">▄</span> <span class="f3 b2">█▓█</span><span class="f3">██▄</span> <span class="f3">▄█</span><span class="f3 b2">█</span><span class="f3">█▄</span> <span class="f3">▄█</span><span class="f3 b2">█</span><span class="f3">███</span> <span class="f3">▄█</span><span class="f3 b2">█</span><span class="f3">█▄</span> <span class="f3 b2">█</span><span class="f3">█</span><span class="f3 b2">█▓█</span><span class="f3">█</span> <span class="f3">██</span> <span class="f3">██</span>
<span class="f3 b2">▓▒</span> <span class="f3">▀</span><span class="f3 b2">▒▓</span> <span class="f3 b2">▓▒</span><span class="f3">▀</span> <span class="f3">▀</span><span class="f3 b2">▒▓</span> <span class="f3 b2">▓▒</span><span class="f3">▀</span> <span class="f3">▀</span><span class="f3 b2">▒▓</span> <span class="f3 b2">▓▒</span> <span class="f3">▀</span><span class="f3 b2">▒▓</span> <span class="f3 b2">▓▒</span><span class="f3">▀</span> <span class="f3">▀</span><span class="f3 b2">▒▓</span> <span class="f3 b2">▓▒</span><span class="f3">▀</span> <span class="f3">█</span><span class="f3 b2">▒</span> <span class="f3 b2">▓▒</span><span class="f3">▀</span> <span class="f3">▀</span><span class="f3 b2">▒▓</span> <span class="f3 b2">▓▒</span> <span class="f3 b2">▓▒</span> <span class="f3 b2">▒▓</span>
<span class="f3 b2">▒░</span> <span class="f3 b2">░▒</span> <span class="f3 b2">▒░</span> <span class="f3 b2">░▒</span> <span class="f3 b2">▒░</span> <span class="f3 b2">░▒</span> <span class="f3 b2">▒░</span> <span class="f3 b2">░▒</span> <span class="f3 b2">▒░</span> <span class="f3 b2">░▒</span> <span class="f3 b2">▒░</span> <span class="f3 b2">▒░</span> <span class="f3 b2">░▒</span> <span class="f3 b2">▒░</span> <span class="f3 b2">▒░</span> <span class="f3 b2">░▒</span>
<span class="f3 b2">░</span><span class="b2"> </span> <span class="f2">▄</span><span class="b2"> </span><span class="f2">▀</span> <span class="f3 b2">░</span><span class="b2"> </span> <span class="b2"> </span><span class="f3 b2">░</span> <span class="f3 b2">░</span><span class="b2"> </span> <span class="b2"> </span><span class="f3 b2">░</span> <span class="f3 b2">░</span><span class="b2"> </span> <span class="b2"> </span><span class="f3 b2">░</span> <span class="f3 b2">░</span><span class="b2"> </span> <span class="b2"> </span><span class="f3 b2">░</span> <span class="f3 b2">░</span><span class="b2"> </span> <span class="f2">██</span><span class="f3 b2">░</span><span class="b2"> </span> <span class="f3 b2">░</span><span class="b2"> </span> <span class="b2"> </span><span class="f3 b2">░</span> <span class="f3 b2">░</span><span class="b2"> </span> <span class="f3 b2">░</span><span class="b2"> </span> <span class="b2"> </span><span class="f3 b2">░</span>
<span class="b2"> </span><span class="f1 b2">░</span><span class="b2"> </span><span class="f2">▄</span> <span class="b2"> </span><span class="f1 b2">░</span><span class="b2"> </span><span class="f1 b2">░</span><span class="b2"> </span> <span class="b2"> </span><span class="f1 b2">░</span> <span class="f1 b2">░</span><span class="b2"> </span> <span class="b2"> </span><span class="f1 b2">░</span> <span class="f1 b2">░</span><span class="b2"> </span> <span class="b2"> </span><span class="f1 b2">░</span> <span class="f1 b2">░</span><span class="b2"> </span> <span class="b2"> </span><span class="f1 b2">░</span> <span class="b2"> </span><span class="f1 b2">░</span> <span class="b2"> </span><span class="f1 b2">░</span> <span class="f1 b2">░</span><span class="b2"> </span> <span class="b2"> </span><span class="f1 b2">░</span> <span class="b2"> </span><span class="f1 b2">░</span><span class="b2"> </span><span class="f1 b2">░</span><span class="b2"> </span>
<span class="f1 b2">░▒</span> <span class="f2">▀</span><span class="f1 b2">▒░</span> <span class="f1 b2">░▒</span> <span class="f1 b2">▒░</span> <span class="f1 b2">░▒</span> <span class="f1 b2">▒░</span> <span class="f1 b2">░▒</span> <span class="f1 b2">▒░</span> <span class="f1 b2">░▒</span> <span class="f1 b2">▒░</span> <span class="f1 b2">░▒</span> <span class="f1 b2">░▒</span> <span class="f1 b2">░▒</span> <span class="f1 b2">▒░</span> <span class="f1 b2">░▒</span> <span class="f1 b2">░▒</span> <span class="f1 b2">▒░</span>
<span class="f1 b2">▒▓</span> <span class="f1 b2">▓▒</span> <span class="f1 b2">▒▓</span> <span class="f1 b2">▓▒</span> <span class="f1 b2">▒▓</span> <span class="f1 b2">▓▒</span> <span class="f1 b2">▒▓</span> <span class="f1 b2">▓▒</span> <span class="f1 b2">▒▓</span> <span class="f1 b2">▓▒</span> <span class="f1 b2">▒▓</span> <span class="f1 b2">▓▒</span> <span class="f1 b2">▒▓</span> <span class="f1 b2">▓▒</span> <span class="f1 b2">▒▓</span> <span class="f1 b2">▒▓</span> <span class="f1 b2">▓▒</span>
<span class="f1 b2">▓</span><span class="f1">█</span> <span class="f1 b2">█▓</span> <span class="f1 b2">▓</span><span class="f1">█</span> <span class="f1 b2">█▓</span> <span class="f1 b2">▓</span><span class="f1">█</span> <span class="f1">█</span><span class="f1 b2">▓</span> <span class="f1 b2">▓</span><span class="f1">█</span> <span class="f1">▄█</span><span class="f1 b2">▓</span> <span class="f1 b2">▓█</span><span class="f1">▄</span> <span class="f1">▄</span><span class="f1 b2">█▓</span> <span class="f1 b2">▓</span><span class="f1">█▄</span> <span class="f1 b2">█▓</span> <span class="f1 b2">▓█</span><span class="f1">▄</span> <span class="f1">▄</span><span class="f1 b2">█▓</span> <span class="f1 b2">▓</span><span class="f1">█</span> <span class="f1 b2">▓</span><span class="f1">█</span> <span class="f1 b2">█▓</span>
<span class="f1">██</span> <span class="f1">██</span> <span class="f1">██</span> <span class="f1">██</span> <span class="f1">██</span> <span class="f1">██</span> <span class="f1">██████▀</span> <span class="f1">▀███▀</span> <span class="f1">▀█████</span> <span class="f1">▀███▀</span> <span class="f1">██</span> <span class="f1">██</span> <span class="f1">██</span> </pre>
<pre class="rule">════════════════════════════════════════════════════════════════════════════════</pre>
<pre class="sysline"> Node <b>1</b> <span class="rule">·</span> <b>2400</b> baud <span class="rule">·</span> <b>{{ articles|length }}</b> msgs in <b>{{ categories|length }}</b> areas <span class="rule">·</span> sysop <b>randogoth</b></pre>
<pre class="rule">════════════════════════════════════════════════════════════════════════════════</pre>
{% 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>
Command: <span id="typed"></span><span class="cursor"> </span></pre>
</div>
</body>
</html>
Reference in a new issue View git blame Copy permalink