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
-
- -
-
-
-
DNSFAIL1 OF 3 RECORDS
-

Outbound domains /

example.org

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

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

Outbound domains /

example.org

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

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

Outbound domains /

example.org

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

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

Outbound domains /

example.org

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

- -
-
- - - 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 @@