From d83d326217c0128271eadfdceef2de35eccaa527 Mon Sep 17 00:00:00 2001 From: Mix Date: Tue, 22 Sep 2026 00:05:32 +0300 Subject: [PATCH] docs: panel header, type scale, account e-mail and the fixes of a full review Header. The navbar carries the wordmark instead of the stamp - at nav size the stamp dissolves into the brick bar - and under the bar runs the stamp's paper margin with the perforation along its outer edge: round holes, flat teeth, ink hairline, 8px under a 60px bar as on the mark. docs/assets/selfpost-wordmark.svg and -ink are the stamp's own outlines; the header comparison sheet is removed. Type and tables. About 40 % of the text measured under 13px. Body is 16px with two tokens under it, 14px for supporting text and 13px for upper-case mono labels and tags; Bulma's small sizes are overridden or dropped (sp-small replaces is-size-7, is-small only on a progress bar). Every table sits in a table-container, addresses break after the @, and all screens fit without scrolling at 1280px and up. Contrast. A sweep of every text node against its real ground found the solid red button at 3:1, the muted grey at 4.1:1, the amber postmark and Bulma's menu labels just under 4.5. All 33 screens now measure 4.5:1 or better. The sweep is kept as panel/audit.js and its clean output joins the evidence a restyle step must show. Account and roles. A user's e-mail is its own field (users.email in the 2.0 baseline), edited under Account and seen by the global user on the user form and list. The DMARC default report address is a user's setting, not the server's: it moves to Account with its authorization record, and a domain follows the default of a named user. Roles are labelled by reach - global, domain - and each assignment list gains All, a per-user flag that covers domains added later. Account gains Notifications for the new roadmap candidate panel-notifications; password-reset is added as a candidate too. Also: the inbound spam filter is visible where a domain user looks (a box on each inbound domain, a tag on the list, its socket on Health); the health row is compact again and splits 6/3/2; a read-only value is as tall as its Copy button; Preflight and Account lose boxes that only filled space, and the plan's layout rule and contract now forbid them. check.py gains the type floor, the table-container rule and the is-small rule, and no longer counts min-width: 0 as setting a width. Co-Authored-By: Claude Fable 5.1 --- CHANGELOG.md | 54 +++++++ docs/assets/panel-redesign/header/index.html | 81 ----------- .../panel-redesign/header/perf-edge.svg | 4 - .../assets/panel-redesign/header/variants.css | 33 ----- docs/assets/panel-redesign/index.html | 2 +- docs/assets/panel-redesign/panel/account.html | 79 +++++++++-- docs/assets/panel-redesign/panel/audit.js | 55 ++++++++ docs/assets/panel-redesign/panel/backup.html | 2 +- docs/assets/panel-redesign/panel/build.py | 2 +- docs/assets/panel-redesign/panel/check.py | 20 ++- .../panel-redesign/panel/components.html | 55 ++++++-- .../panel-redesign/panel/dmarc-domain.html | 20 +-- .../panel-redesign/panel/dmarc-report.html | 14 +- docs/assets/panel-redesign/panel/dmarc.html | 14 +- docs/assets/panel-redesign/panel/health.html | 19 +-- docs/assets/panel-redesign/panel/help.html | 2 +- .../panel/in-domain-delete.html | 2 +- .../panel-redesign/panel/in-domain.html | 15 +- .../panel-redesign/panel/in-domains.html | 8 +- .../panel-redesign/panel/in-filter-lists.html | 24 ++-- docs/assets/panel-redesign/panel/in-log.html | 30 ++-- .../panel/in-quarantine-message.html | 12 +- .../panel-redesign/panel/in-quarantine.html | 16 +-- .../assets/panel-redesign/panel/in-queue.html | 2 +- .../panel-redesign/panel/out-app-created.html | 2 +- docs/assets/panel-redesign/panel/out-app.html | 2 +- .../panel/out-domain-delete.html | 2 +- .../panel/out-domain-settings.html | 7 +- .../panel-redesign/panel/out-domain.html | 8 +- .../panel-redesign/panel/out-domains.html | 6 +- docs/assets/panel-redesign/panel/out-log.html | 26 ++-- .../panel-redesign/panel/out-message.html | 2 +- .../panel-redesign/panel/out-queue.html | 8 +- .../assets/panel-redesign/panel/outlines.json | 38 ++--- .../assets/panel-redesign/panel/overview.html | 28 ++-- .../assets/panel-redesign/panel/perf-edge.svg | 6 + .../panel-redesign/panel/preflight.html | 48 +++---- .../assets/panel-redesign/panel/settings.html | 39 ++--- .../panel-redesign/panel/src/account.html | 77 ++++++++-- .../panel-redesign/panel/src/components.html | 53 +++++-- .../panel/src/dmarc-domain.html | 18 +-- .../panel/src/dmarc-report.html | 12 +- .../panel-redesign/panel/src/dmarc.html | 12 +- .../panel-redesign/panel/src/health.html | 17 +-- .../panel-redesign/panel/src/in-domain.html | 13 ++ .../panel-redesign/panel/src/in-domains.html | 6 +- .../panel/src/in-filter-lists.html | 22 +-- .../panel-redesign/panel/src/in-log.html | 28 ++-- .../panel/src/in-quarantine-message.html | 10 +- .../panel/src/in-quarantine.html | 14 +- .../panel/src/out-domain-settings.html | 5 +- .../panel-redesign/panel/src/out-domain.html | 6 +- .../panel-redesign/panel/src/out-domains.html | 4 +- .../panel-redesign/panel/src/out-log.html | 24 ++-- .../panel-redesign/panel/src/out-queue.html | 6 +- .../panel-redesign/panel/src/overview.html | 26 ++-- .../panel-redesign/panel/src/preflight.html | 46 +++--- .../panel-redesign/panel/src/settings.html | 37 ++--- .../panel-redesign/panel/src/user-delete.html | 2 +- .../assets/panel-redesign/panel/src/user.html | 19 ++- .../panel-redesign/panel/src/users.html | 14 +- .../panel-redesign/panel/system-log.html | 2 +- docs/assets/panel-redesign/panel/theme.css | 133 ++++++++++++------ .../panel-redesign/panel/user-delete.html | 4 +- docs/assets/panel-redesign/panel/user.html | 21 +-- docs/assets/panel-redesign/panel/users.html | 16 +-- docs/assets/panel-redesign/shared/brand.css | 2 +- ...mark-ink.svg => selfpost-wordmark-ink.svg} | 0 ...rdmark-cream.svg => selfpost-wordmark.svg} | 0 docs/plans/panel-redesign.md | 105 ++++++++++++-- docs/product.md | 1 + docs/roadmap.md | 52 +++++++ 72 files changed, 970 insertions(+), 624 deletions(-) delete mode 100644 docs/assets/panel-redesign/header/index.html delete mode 100644 docs/assets/panel-redesign/header/perf-edge.svg delete mode 100644 docs/assets/panel-redesign/header/variants.css create mode 100644 docs/assets/panel-redesign/panel/audit.js create mode 100644 docs/assets/panel-redesign/panel/perf-edge.svg rename docs/assets/{panel-redesign/header/wordmark-ink.svg => selfpost-wordmark-ink.svg} (100%) rename docs/assets/{panel-redesign/header/wordmark-cream.svg => selfpost-wordmark.svg} (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3acbac6..7a33c1c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,60 @@ document is not part of the release. ### Added +- Panel redesign, account e-mail and notifications: a user's e-mail is its own + field (2.0 baseline `users.email`, today `dmarc_report_email`) — edited under + **Account**, seen and set by the global administrator on the user form and in + the users list; DMARC may *use* it, as one choice beside the hosted address, + another address or none (Settings and domain settings). **Account** gains a + Notifications box and **Settings** a switch for the new roadmap candidate + `panel-notifications`; `password-reset` is added as a candidate too. The + inbound spam filter becomes visible: a *Spam filter* box on every inbound + domain, a tag on the inbound domains list, its socket among the milter + sockets. Preflight loses a box that only filled space — the test form now + shares its box with its result — and the plan's layout rule and contract say + so: what stands beside a form must be real. The role is labelled by its reach, + `global` or `domain` — everyone in the panel is an administrator — and each + assignment list on the user form gains **All**, a per-user flag that covers + domains added later. The DMARC default report address is a **user's** + setting, not the server's: it moves from Server › Settings to **Account** + with its report-authorization record, and a domain follows the default of a + *named* user, so two people sharing a domain never pull it two ways. +- Panel redesign, contrast: a sweep of every text node against its real ground + found the solid red button at 3:1 (Bulma derives a solid button's text from + the fill's lightness; brick had been patched, red had not), the muted grey + at 4.1:1, the amber postmark at 4.0 and Bulma's menu labels at 4.2. Solid + buttons are white on colour, muted is `#5c6774`, the postmark uses the warn + token; all 33 screens now measure 4.5:1 or better. The sweep is kept as + `panel/audit.js` — text size, contrast, overflow, clipped values, missing + icons — and its clean output joins the evidence a restyle step must show. +- Panel redesign, header (owner's choice: variant A, with the perforation on a + light edge as on the mark): the navbar carries the **wordmark** instead of + the stamp — `docs/assets/selfpost-wordmark.svg` and `-ink`, the stamp's own + outlines, recorded in `docs/product.md` — and under the brick bar runs the + stamp's paper margin with the perforation along its outer edge: round holes, + flat teeth, the ink hairline (`panel/perf-edge.svg`). All 33 screens rebuilt; + the components page documents the shell; the comparison sheet is removed. + The six health cards now split into six, three or two columns, so one card + is never left alone on a row. Three corrections after the owner's review: + the paper edge is 8px under the 60px bar — it had been scaled from the hole + size to 16px, where the mark's margin is a tenth of the brick field; the + health row is compact again (71px: smaller icons, each line a block with its + own line height, a verdict never wraps and stretches the row); and a + read-only value is as tall as the Copy button joined to it. `check.py` no + longer counts `min-width: 0` as setting a width. Text sizes: the filter + controls in a box head and the navbar's dropdown entries are 15px like the + bar itself (they had Bulma's `is-small` and its .875rem dropdown); `check.py` + now rejects `is-small` on anything but a progress bar. +- Panel redesign, type scale: about 40 % of the panel's text measured under + 13px (labels 11.7, table heads 10.5, fact labels 10.2, tags and help 11.3). + Body is now 16px with two tokens under it — `--sp-fs-s` 14px for supporting + text and `--sp-fs-xs` 13px for upper-case mono labels and tags; Bulma's + small sizes are overridden or dropped (`sp-small` replaces `is-size-7`), and + `check.py` fails any font size under the floor. Every table now sits in a + `table-container` (enforced), addresses in tables break after the `@`, the + inbound log folds the client IP under the sender; all screens fit without + scrolling at 1280px and up. Documented on the components page and in the + plan (§ Type and tables). - Panel redesign, header comparison sheet ([docs/assets/panel-redesign/header/](docs/assets/panel-redesign/header/index.html)): at nav size the stamp dissolves into the brick bar and the perforated edge diff --git a/docs/assets/panel-redesign/header/index.html b/docs/assets/panel-redesign/header/index.html deleted file mode 100644 index 1fd49ce..0000000 --- a/docs/assets/panel-redesign/header/index.html +++ /dev/null @@ -1,81 +0,0 @@ - - - - - -Header variants · SelfPost - - - - - - - -

Header: the mark, the name, the edge

-

At nav size the stamp cannot carry itself: its perforation is under a pixel and its brick field dissolves into the brick bar, leaving a thin frame. And the current edge is inverted — a real perforation is round holes with flat teeth, not round bumps.

- -
Nowthe stamp at nav size, round bumps hanging off the bar
-
- -
-
DomainsLogQueueDMARC reports
-
-
DNSFAIL1 OF 3 RECORDS
-

Outbound domains /

example.org

1 284 messages in 30 days · peak 96 msg/h

-
Re-check DNSAdd application
-
-
- -
A · name + real perforationwordmark only; round holes of page colour bitten into the bar, the mark's own hole-to-tooth ratio
-
- -
-
DomainsLogQueueDMARC reports
-
-
DNSFAIL1 OF 3 RECORDS
-

Outbound domains /

example.org

1 284 messages in 30 days · peak 96 msg/h

-
Re-check DNSAdd application
-
-
- -
B · name, no edgewordmark only, a plain bar; the stamp and its perforation stay on sign-in, setup and the favicon
-
- -
DomainsLogQueueDMARC reports
-
-
DNSFAIL1 OF 3 RECORDS
-

Outbound domains /

example.org

1 284 messages in 30 days · peak 96 msg/h

-
Re-check DNSAdd application
-
-
- -
C · the header is the stampstamp paper, ink hairline and the mark's perforation; brick only behind the name, as on the mark
-
- -
-
DomainsLogQueueDMARC reports
-
-
DNSFAIL1 OF 3 RECORDS
-

Outbound domains /

example.org

1 284 messages in 30 days · peak 96 msg/h

-
Re-check DNSAdd application
-
-
- - - diff --git a/docs/assets/panel-redesign/header/perf-edge.svg b/docs/assets/panel-redesign/header/perf-edge.svg deleted file mode 100644 index da265f6..0000000 --- a/docs/assets/panel-redesign/header/perf-edge.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/docs/assets/panel-redesign/header/variants.css b/docs/assets/panel-redesign/header/variants.css deleted file mode 100644 index decb5f5..0000000 --- a/docs/assets/panel-redesign/header/variants.css +++ /dev/null @@ -1,33 +0,0 @@ -/* Three takes on the panel header, on top of panel/theme.css. A comparison - sheet, not part of the design contract: the chosen one moves into - panel/theme.css and build.py, the rest is deleted. */ -body { display: block; } -.hv-note { max-width: 60rem; margin: 2rem auto 0; padding: 0 1.5rem; } -.hv-note h1 { font-size: 1.6rem; font-weight: 600; margin-bottom: .4rem; } -.hv-label { max-width: 1344px; margin: 2.6rem auto .6rem; padding: 0 1.5rem; display: flex; gap: 1rem; align-items: baseline; } -.hv-label b { font-family: var(--sp-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-brick); } -.hv-label span { color: var(--sp-muted); } -.hv-frame { border-block: 1px solid var(--sp-rule); background: var(--sp-paper); padding-bottom: 1.5rem; } -.hv-frame .sp-head { margin: 1.6rem 0 0; } - -.hv-word { width: auto; display: block; } -.navbar-brand img.hv-word { max-height: none; height: 1.45rem; } - -/* A — brick bar, wordmark, the stamp's real edge: round holes of page colour - bitten into the bar, hole wider than tooth (r / pitch = 5 / 16, the mark's - 2.2 / 7.03). */ -.hv-a .hv-perf { - height: 5px; margin-top: -5px; position: relative; z-index: 31; /* above Bulma's navbar (30) */ - background: radial-gradient(circle at 8px 5px, var(--sp-paper) 5px, transparent 5.6px); - background-size: 16px 5px; background-repeat: repeat-x; -} - -/* C — the header is the stamp: its paper, its ink hairline, its perforation; - brick is only the block behind the name, as on the mark. */ -.hv-c .navbar { background: var(--sp-stamp-paper); --bulma-navbar-height: 4rem; } -.hv-c .navbar-item, .hv-c .navbar-link { color: var(--sp-ink); font-weight: 500; } -.hv-c .navbar-link::after { border-color: var(--sp-brick); } -.hv-c .hv-brand { background: var(--sp-brick); padding: .7rem 1.1rem; margin-block: .55rem; margin-right: 1rem; display: flex; align-items: center; } -.hv-c .hv-current { box-shadow: inset 0 -3px 0 var(--sp-brick); color: var(--sp-brick); } -.hv-c .hv-perf { height: 7px; background: url("perf-edge.svg") repeat-x; background-size: 16px 7px; } -.hv-b .sp-subnav, .hv-a .sp-subnav, .hv-c .sp-subnav { margin-top: 0; } diff --git a/docs/assets/panel-redesign/index.html b/docs/assets/panel-redesign/index.html index a4ce82b..2e4d2d5 100644 --- a/docs/assets/panel-redesign/index.html +++ b/docs/assets/panel-redesign/index.html @@ -13,7 +13,7 @@

The accepted direction, every screen

Direction C (Bulma) was picked as the base: the important things in view, details one or two clicks away. It takes the postal signature of A — the postmark verdict, numbered mono section - heads, the stamp's perforated edge — and the icons of B. Thirty-three screens and a components page live in + heads, the stamp's perforated paper edge under a brick bar that carries the wordmark — and the icons of B. Thirty-three screens and a components page live in panel/. Serve this folder from the repository root: the pages load the panel's own fonts and mark by relative path.

diff --git a/docs/assets/panel-redesign/panel/account.html b/docs/assets/panel-redesign/panel/account.html index 788f0ab..60e6ab7 100644 --- a/docs/assets/panel-redesign/panel/account.html +++ b/docs/assets/panel-redesign/panel/account.html @@ -12,7 +12,7 @@