From 43a8f3364aff9e9cbb19a5e0193ea14aa0e59040 Mon Sep 17 00:00:00 2001 From: Anthony Ettinger Date: Wed, 14 Oct 2026 05:14:40 +0000 Subject: [PATCH] 0.13.1: paper skin uses a standard forum list instead of cards Categories become ruled boxes (serif title over an ink rule) with one row per forum: icon, name and description, topic/post counts and the latest post, hairlines between. Counts and the latest post drop out on narrow screens as in the modern sheet. Requested for w3bs.org/bbs. Co-Authored-By: Claude Opus 5.5 --- apps/cli/package.json | 2 +- apps/mcp/package.json | 2 +- apps/server/package.json | 2 +- apps/tui/package.json | 2 +- apps/worker/package.json | 2 +- docs/SKINS.md | 2 +- package.json | 2 +- packages/client/package.json | 2 +- packages/core/package.json | 2 +- packages/db/package.json | 2 +- packages/design-tokens/package.json | 2 +- packages/mail/package.json | 2 +- packages/markup/package.json | 2 +- packages/mcp/package.json | 2 +- packages/plugin-api/package.json | 2 +- packages/plugin-host/package.json | 2 +- packages/ui/package.json | 2 +- packages/ui/src/styles/paper.css | 103 ++++++++++++++++------------ 18 files changed, 75 insertions(+), 62 deletions(-) diff --git a/apps/cli/package.json b/apps/cli/package.json index 31beb27..f76ffb5 100644 --- a/apps/cli/package.json +++ b/apps/cli/package.json @@ -1,6 +1,6 @@ { "name": "@profullstack/tsbb", - "version": "0.13.0", + "version": "0.13.1", "description": "A TypeScript bulletin board. Forums, plugins, avatars, signatures and a terminal client.", "type": "module", "license": "MIT", diff --git a/apps/mcp/package.json b/apps/mcp/package.json index d1cbea3..75a1975 100644 --- a/apps/mcp/package.json +++ b/apps/mcp/package.json @@ -1,6 +1,6 @@ { "name": "@profullstack/tsbb-mcp", - "version": "0.13.0", + "version": "0.13.1", "description": "MCP server for a tsbb bulletin board. Lets an AI assistant read and post on any board, as the member whose token it holds.", "type": "module", "license": "MIT", diff --git a/apps/server/package.json b/apps/server/package.json index 5ef7a1a..e5872bc 100644 --- a/apps/server/package.json +++ b/apps/server/package.json @@ -1,6 +1,6 @@ { "name": "@tsbb/server", - "version": "0.13.0", + "version": "0.13.1", "private": true, "type": "module", "dependencies": { diff --git a/apps/tui/package.json b/apps/tui/package.json index 880b7bd..73f6d62 100644 --- a/apps/tui/package.json +++ b/apps/tui/package.json @@ -1,6 +1,6 @@ { "name": "@profullstack/tsbb-tui", - "version": "0.13.0", + "version": "0.13.1", "description": "Terminal client for a tsbb bulletin board. Reads and posts against any centralised install.", "type": "module", "license": "MIT", diff --git a/apps/worker/package.json b/apps/worker/package.json index 35d053c..bfd3145 100644 --- a/apps/worker/package.json +++ b/apps/worker/package.json @@ -1,6 +1,6 @@ { "name": "@tsbb/worker", - "version": "0.13.0", + "version": "0.13.1", "private": true, "type": "module", "dependencies": { diff --git a/docs/SKINS.md b/docs/SKINS.md index 5e67296..e4f4389 100644 --- a/docs/SKINS.md +++ b/docs/SKINS.md @@ -11,7 +11,7 @@ look and not another. | `classic` | A 2000s bulletin board: boxy, dense, gradient title bars, Verdana. | | `terminal` | Neutral surfaces, hairline rules, monospace chrome, window furniture on section headers. | | `deals` | A coupon and deal-sharing storefront: white surfaces, slate greys, the accent as a flat fill with white text, Geist (self-hosted), a dark footer. Made for a board that lives inside a deals site, like [c0upons.com/bbs](https://c0upons.com/bbs). | -| `paper` | Editorial: warm paper (`#f6f4ed`), green-black ink, sage hairlines, Georgia headlines, small mono capitals for labels, system fonts only. A 100px header ruled off by a hairline, forums as catalogue cards, topics as a ruled list, code as a dark terminal, a three-column site footer. **Light-only.** Made for a board that lives inside a publication-style site, like [w3bs.org/bbs](https://w3bs.org/bbs). | +| `paper` | Editorial: warm paper (`#f6f4ed`), green-black ink, sage hairlines, Georgia headlines, small mono capitals for labels, system fonts only. A 100px header ruled off by a hairline, a standard forum list (category boxes, one row per forum with counts and the latest post), topics as a ruled list, code as a dark terminal, a three-column site footer. **Light-only.** Made for a board that lives inside a publication-style site, like [w3bs.org/bbs](https://w3bs.org/bbs). | `classic`, `terminal`, `deals` and `paper` are **layers on top of** the modern sheet rather than replacements. A component's structure is defined in exactly diff --git a/package.json b/package.json index 6d6e030..fac5a7b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tsbb", - "version": "0.13.0", + "version": "0.13.1", "private": true, "type": "module", "packageManager": "pnpm@11.18.0", diff --git a/packages/client/package.json b/packages/client/package.json index 040b695..994f817 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -1,6 +1,6 @@ { "name": "@tsbb/client", - "version": "0.13.0", + "version": "0.13.1", "private": true, "type": "module", "exports": { diff --git a/packages/core/package.json b/packages/core/package.json index 5250878..f6c75fd 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@tsbb/core", - "version": "0.13.0", + "version": "0.13.1", "private": true, "type": "module", "exports": { diff --git a/packages/db/package.json b/packages/db/package.json index 74a8f8f..8350d32 100644 --- a/packages/db/package.json +++ b/packages/db/package.json @@ -1,6 +1,6 @@ { "name": "@tsbb/db", - "version": "0.13.0", + "version": "0.13.1", "private": true, "type": "module", "exports": { diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 03e3759..2c84ff7 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@tsbb/design-tokens", - "version": "0.13.0", + "version": "0.13.1", "private": true, "type": "module", "exports": { "./tokens.css": "./src/tokens.css" } diff --git a/packages/mail/package.json b/packages/mail/package.json index 582788e..45425eb 100644 --- a/packages/mail/package.json +++ b/packages/mail/package.json @@ -1,6 +1,6 @@ { "name": "@tsbb/mail", - "version": "0.13.0", + "version": "0.13.1", "private": true, "type": "module", "exports": { ".": "./src/index.ts" }, diff --git a/packages/markup/package.json b/packages/markup/package.json index 56e7ca7..0e0a9c0 100644 --- a/packages/markup/package.json +++ b/packages/markup/package.json @@ -1,6 +1,6 @@ { "name": "@tsbb/markup", - "version": "0.13.0", + "version": "0.13.1", "private": true, "type": "module", "exports": { ".": "./src/index.ts" } diff --git a/packages/mcp/package.json b/packages/mcp/package.json index b0e710a..a058697 100644 --- a/packages/mcp/package.json +++ b/packages/mcp/package.json @@ -1,6 +1,6 @@ { "name": "@tsbb/mcp", - "version": "0.13.0", + "version": "0.13.1", "private": true, "type": "module", "exports": { diff --git a/packages/plugin-api/package.json b/packages/plugin-api/package.json index a263b2f..14e4c60 100644 --- a/packages/plugin-api/package.json +++ b/packages/plugin-api/package.json @@ -1,6 +1,6 @@ { "name": "@tsbb/plugin-api", - "version": "0.13.0", + "version": "0.13.1", "private": true, "type": "module", "exports": { ".": "./src/index.ts" } diff --git a/packages/plugin-host/package.json b/packages/plugin-host/package.json index 98ffbe2..4f47197 100644 --- a/packages/plugin-host/package.json +++ b/packages/plugin-host/package.json @@ -1,6 +1,6 @@ { "name": "@tsbb/plugin-host", - "version": "0.13.0", + "version": "0.13.1", "private": true, "type": "module", "exports": { ".": "./src/index.ts" }, diff --git a/packages/ui/package.json b/packages/ui/package.json index b5263cb..9957b3d 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@tsbb/ui", - "version": "0.13.0", + "version": "0.13.1", "private": true, "type": "module", "exports": { ".": "./src/index.ts", "./styles": "./src/styles/index.ts" }, diff --git a/packages/ui/src/styles/paper.css b/packages/ui/src/styles/paper.css index 6148519..f312120 100644 --- a/packages/ui/src/styles/paper.css +++ b/packages/ui/src/styles/paper.css @@ -10,7 +10,8 @@ * for small-caps labels ("eyebrows"), counters and code * - a 100px header ruled off by a hairline, a wordmark that ends in a full * stop in the accent, plain-text navigation, one outlined call to action - * - forums as a grid of catalogue cards, topics as a ruled list + * - a standard forum list (category boxes, one row per forum), topics as a + * ruled list * - a three-column site footer * - the accent as a flat fill (primary buttons) and as text (links, the * current page); everything else is ink @@ -392,47 +393,57 @@ code, kbd, pre, samp { font-size: 0.88em; } .hero-compact { padding: 48px 0 24px; } .hero-compact .hero-tagline { font-size: 46px; } -/* --- Forum index: a catalogue of cards ------------------------------------ */ +/* --- Forum index: a standard forum list ---------------------------------- */ -.category { margin: 0; padding: 40px 0 0; } -.category-header { display: block; margin-bottom: 26px; padding: 0; } -.category-header::before { content: 'Forums'; display: block; color: var(--paper-ink); } +/* Each category is a ruled box: a serif title over an ink rule, then one row + * per forum (icon, name and description, counts, latest post), hairlines + * between. Counts and the latest post drop out on narrow screens exactly as + * in the modern sheet (forum.css). */ +.category { margin: 0; padding: 36px 0 0; } +.category-header { + display: flex; + align-items: baseline; + margin: 0; + padding: 0 0 12px; + border-bottom: 2px solid var(--paper-ink); +} .category-title { display: block; - margin-top: 15px; + margin: 0; color: var(--paper-ink); font-family: var(--paper-serif); - font-size: 47px; + font-size: 28px; font-weight: 400; - letter-spacing: -0.045em; - line-height: 1.04; + letter-spacing: -0.035em; + line-height: 1.1; text-transform: none; } .category-title::after { display: none; } -.category > .card { background: none; border: 0; border-radius: 0; overflow: visible; } -.category > .card > .card-content { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 18px; +.category > .card { + background: var(--paper-card); + border: 1px solid var(--paper-line); + border-top: 0; + border-radius: 0 0 7px 7px; + overflow: hidden; } -@media (max-width: 1000px) { .category > .card > .card-content { grid-template-columns: repeat(2, minmax(0, 1fr)); } } -@media (max-width: 720px) { .category > .card > .card-content { grid-template-columns: minmax(0, 1fr); } } +.category > .card > .card-content { display: block; padding: 0; } .forum-row { display: flex; - flex-direction: column; - align-items: stretch; - gap: 0; - padding: 23px 23px 0; - border: 1px solid var(--paper-line); - border-radius: 7px; - background: var(--paper-card); - transition: transform 0.15s, border-color 0.15s; + flex-direction: row; + align-items: center; + gap: 18px; + padding: 16px 20px; + border: 0; + border-bottom: 1px solid var(--paper-line); + border-radius: 0; + background: none; } -.forum-row:last-child { border-bottom: 1px solid var(--paper-line); } -.forum-row:hover { transform: translateY(-3px); border-color: #9aa98b; background: var(--paper-card); } +.forum-row:last-child { border-bottom: 0; } +.forum-row:hover { background: #f1f0e7; } .forum-row:hover .forum-icon { transform: none; } .forum-icon { + flex: none; width: 30px; height: 30px; border-radius: 3px; @@ -442,46 +453,48 @@ code, kbd, pre, samp { font-size: 0.88em; } font-size: 14px; } .forum-row.unread .forum-icon { background: var(--paper-accent); color: var(--paper-accent-ink); box-shadow: none; } -.forum-row > .grow { flex: 1; } +.forum-row > .grow { flex: 1; min-width: 0; } .forum-name { display: block; - margin: 29px 0 15px; + margin: 0 0 3px; color: var(--paper-ink); font-family: var(--paper-serif); - font-size: 26px; + font-size: 20px; font-weight: 400; - letter-spacing: -0.04em; - line-height: 1.1; + letter-spacing: -0.03em; + line-height: 1.2; } .forum-name:hover { color: var(--primary); } -.forum-row:hover .forum-name { color: var(--paper-ink); } -.forum-desc { margin: 0 0 22px; font-size: 13px; line-height: 1.7; color: var(--paper-muted); } +.forum-desc { margin: 0; font-size: 13px; line-height: 1.6; color: var(--paper-muted); } .forum-unread { border-radius: 3px; background: var(--paper-accent); color: var(--paper-accent-ink); box-shadow: none; font-family: var(--font-mono); font-size: 9px; } -/* Counts and the latest post along the card's foot, in the mono. */ +/* Counts as small columns, the latest post beside them, all in the mono. */ .forum-meta { display: flex; - align-items: baseline; - gap: 16px; - margin-top: 18px; - padding: 16px 0; - border-top: 1px solid var(--paper-line); + align-items: center; + gap: 22px; + margin: 0; + padding: 0; + border: 0; font-family: var(--font-mono); font-size: 10px; color: var(--paper-muted); - text-align: left; } -.forum-stat { display: block; min-width: 0; } +.forum-stat { min-width: 4rem; text-align: center; text-transform: uppercase; letter-spacing: 0.08em; font-size: 9px; } .forum-stat strong { + display: block; min-width: 0; padding: 0; - margin: 0 4px 0 0; + margin: 0 0 2px; background: none; color: var(--paper-ink); - font-size: 10px; - font-weight: 600; + font-family: var(--paper-serif); + font-size: 18px; + font-weight: 400; + letter-spacing: -0.02em; + text-transform: none; } -.forum-last { display: block; margin-left: auto; max-width: 11rem; text-align: right; } +.forum-last { width: 13rem; max-width: 13rem; margin-left: 0; text-align: left; } .forum-last-title { color: var(--paper-ink); font-family: var(--font-sans); font-size: 12px; font-weight: 600; } .forum-last .tiny, .forum-last.tiny { font-size: 10px; } .forum-last a { color: inherit; }