randogoth/sites
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: make randogoth.com's bbs theme readable on narrow viewports

Browse source
This commit is contained in:
randogoth 2026-10-06 08:45:13 +03:00
parent 05be426f91
commit c3864287cf
11 changed files with 150 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

46
randogoth.com/bbs/static/bbs.css
View file

@ -69,7 +69,8 @@ body {
color: var(--grey);
font-family: 'Classic Console', ui-monospace, monospace;
/* clamp so 80ch always fits the viewport, phone to desktop */
font-size: clamp(7px, 2.32vw, 17px);
--cell: clamp(7px, 2.32vw, 17px);
font-size: var(--cell);
/* Exactly one cell per row. Each box row is its own <pre>, so any leading at
all opens a gap between them and the vertical box-drawing characters stop
meeting. Prose gets its leading back on .msgbody below. */
@ -180,6 +181,49 @@ a:visited { color: var(--lcyan); }
.msgbody hr { border: 0; border-top: 1px solid var(--blue); margin: 1.4em 0; }
.msgbody a { text-decoration: underline; }
/* ── mobile: read content is one size, not two ───────────────────────────
* 80 real characters cannot be legible and fit a phone's width at the same
* time, so below this breakpoint every piece of actual content (prose,
* the message header, the listing tables) renders at one fixed size
* instead of inheriting --cell. Box-drawn tables that packed two columns
* into 80 characters get a second, narrower rendering built for this
* width instead: see .desktop-only/.mobile-only below, toggled by the
* matching (min-width: 601px) block further down. The masthead logo and
* the plain ──── rule dividers are graphics, not content, and are left on
* --cell exactly as before.
*/
@media (max-width: 600px) {
.msgbody,
.cloud,
.pagehdr,
.sysline,
.tagline,
.prompt,
.mobile-only { font-size: 1rem; }
/* The desktop article header packs two fields per row with hand-counted
padding; the mobile rows (and a page's single Subj row) are one field
each, so they just need to wrap like normal text instead of running
off the edge under white-space: pre. The sysline, tagline and the
bottom command bar are actual words, not a repeating-character rule,
so they wrap too. */
.msghdr.mobile-only,
.pagehdr,
.sysline,
.tagline,
.prompt { white-space: normal; }
/* Box drawing embedded in prose (a pull-quote box, if one is ever used)
is a rigid character grid and must stay at the chrome size or its
columns stop lining up against their own border characters. */
.msgbody .box, .msgbody .gb-rule, .msgbody .rule { font-size: var(--cell); }
.desktop-only { display: none; }
}
@media (min-width: 601px) {
.mobile-only { display: none; }
}
/* the Fidonet tagline that closed every message */
.tagline { color: var(--dgrey); margin-top: 1.6em; }
.tagline .origin { color: var(--green); }