diff --git a/.claude/launch.json b/.claude/launch.json new file mode 100644 index 0000000..9d019d3 --- /dev/null +++ b/.claude/launch.json @@ -0,0 +1,11 @@ +{ + "version": "0.0.1", + "configurations": [ + { + "name": "mockups", + "runtimeExecutable": "python", + "runtimeArgs": ["-m", "http.server", "8765", "--bind", "127.0.0.1"], + "port": 8765 + } + ] +} diff --git a/CHANGELOG.md b/CHANGELOG.md index cdbce4e..3acbac6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,16 @@ document is not part of the release. ### Added +- 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 + was drawn inverted (round bumps instead of round holes). Three replacements + beside the current header — **A** wordmark with the stamp's real hole-to-tooth + perforation bitten into the bar, **B** wordmark on a plain bar, **C** a + stamp-paper header with an ink hairline and brick only behind the name. The + wordmark is cut from the stamp's own outlines. Pending the owner's choice; + the mockups are unchanged. `.claude/launch.json` serves the mockups locally + (`python -m http.server 8765` from the repository root). - Panel redesign, the roadmap's screens: **Inbound › Filter lists** and the adjusted **Inbound › Log** (client, decision, engine and reason; *Allow / Deny sender*) for inbound-antispam-panel, **Inbound › Quarantine** (list and diff --git a/docs/assets/panel-redesign/header/index.html b/docs/assets/panel-redesign/header/index.html new file mode 100644 index 0000000..1fd49ce --- /dev/null +++ b/docs/assets/panel-redesign/header/index.html @@ -0,0 +1,81 @@ + + + + + +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 new file mode 100644 index 0000000..da265f6 --- /dev/null +++ b/docs/assets/panel-redesign/header/perf-edge.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/assets/panel-redesign/header/variants.css b/docs/assets/panel-redesign/header/variants.css new file mode 100644 index 0000000..decb5f5 --- /dev/null +++ b/docs/assets/panel-redesign/header/variants.css @@ -0,0 +1,33 @@ +/* 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/header/wordmark-cream.svg b/docs/assets/panel-redesign/header/wordmark-cream.svg new file mode 100644 index 0000000..d6443e6 --- /dev/null +++ b/docs/assets/panel-redesign/header/wordmark-cream.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/assets/panel-redesign/header/wordmark-ink.svg b/docs/assets/panel-redesign/header/wordmark-ink.svg new file mode 100644 index 0000000..420a542 --- /dev/null +++ b/docs/assets/panel-redesign/header/wordmark-ink.svg @@ -0,0 +1,4 @@ + + + +