mix/selfpost
1
0
Fork 0
Code Issues Pull Requests Actions 21 Packages Projects Releases Wiki Activity
Files
4921416384623d37020e4e76007e1e0743fa6563
selfpost/docs/assets/panel-redesign/header/index.html
T
mixandClaude Fable 5.1 4921416384
test / test (push) Canceled after 0s
Details
docs: compare three panel headers against the current one 
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 around the name. The perforated edge under the bar was also drawn
inverted - round bumps with pointed gaps, where a real perforation is
round holes with flat teeth.

header/ puts the current header beside three replacements on a real
page: A, the wordmark alone with round holes of page colour bitten into
the bar at the mark's own hole-to-tooth ratio; B, the wordmark on a plain
bar; C, a stamp-paper header with an ink hairline, the mark's
perforation, and brick only behind the name. The wordmark files are the
stamp's own outlines, cut out of selfpost-stamp-compact.svg.

A comparison sheet pending the owner's choice; the 33 mockups and the
design contract are unchanged. Also tracks .claude/launch.json, the
local static server the mockups are previewed with.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-09-21 22:24:37 +03:00

82 lines
7.2 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Header variants · SelfPost</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3/dist/tabler-icons.min.css">
<link rel="stylesheet" href="../shared/brand.css">
<link rel="stylesheet" href="../panel/theme.css">
<link rel="stylesheet" href="variants.css">
</head>
<body>
<div class="hv-note"><h1>Header: the mark, the name, the edge</h1>
<p class="sp-muted">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.</p></div>
<div class="hv-label"><b>Now</b><span>the stamp at nav size, round bumps hanging off the bar</span></div>
<div class="hv-frame hv-0">
<nav class="navbar is-primary"><div class="container">
<div class="navbar-brand"><a class="navbar-item" href="#"><img src="../../selfpost-stamp-compact.svg" alt="SelfPost"></a></div>
<div class="navbar-menu is-active"><div class="navbar-start"><a class="navbar-item" href="#">Overview</a><a class="navbar-item sp-current" href="#">Outbound</a><a class="navbar-item" href="#">Inbound</a><a class="navbar-item" href="#">Server</a></div>
<div class="navbar-end"><a class="navbar-item" href="#"><i class="ti ti-user-circle"></i>&nbsp;admin</a></div></div>
</div></nav>
<div class="sp-perf"></div>
<div class="sp-subnav"><div class="container"><a href="#" aria-current="page"><i class="ti ti-world-upload"></i>Domains</a><a href="#"><i class="ti ti-list-details"></i>Log</a><a href="#"><i class="ti ti-stack-2"></i>Queue</a><a href="#"><i class="ti ti-report-analytics"></i>DMARC reports</a></div></div>
<div class="container"><div class="sp-head">
<div class="sp-postmark sp-fail"><span>DNS</span><b>FAIL</b><span>1 OF 3 RECORDS</span></div>
<div class="sp-grow"><p class="sp-kicker">Outbound domains /</p><h1 class="title is-3">example.org</h1><p class="sp-lead">1 284 messages in 30 days · peak 96 msg/h</p></div>
<div class="buttons"><a class="button" href="#"><i class="ti ti-refresh"></i>Re-check DNS</a><a class="button is-primary" href="#"><i class="ti ti-plus"></i>Add application</a></div>
</div></div>
</div>
<div class="hv-label"><b>A · name + real perforation</b><span>wordmark only; round holes of page colour bitten into the bar, the mark's own hole-to-tooth ratio</span></div>
<div class="hv-frame hv-a">
<nav class="navbar is-primary"><div class="container">
<div class="navbar-brand"><a class="navbar-item" href="#"><img class="hv-word" src="wordmark-cream.svg" alt="SelfPost"></a></div>
<div class="navbar-menu is-active"><div class="navbar-start"><a class="navbar-item" href="#">Overview</a><a class="navbar-item sp-current" href="#">Outbound</a><a class="navbar-item" href="#">Inbound</a><a class="navbar-item" href="#">Server</a></div>
<div class="navbar-end"><a class="navbar-item" href="#"><i class="ti ti-user-circle"></i>&nbsp;admin</a></div></div>
</div></nav>
<div class="hv-perf"></div>
<div class="sp-subnav"><div class="container"><a href="#" aria-current="page"><i class="ti ti-world-upload"></i>Domains</a><a href="#"><i class="ti ti-list-details"></i>Log</a><a href="#"><i class="ti ti-stack-2"></i>Queue</a><a href="#"><i class="ti ti-report-analytics"></i>DMARC reports</a></div></div>
<div class="container"><div class="sp-head">
<div class="sp-postmark sp-fail"><span>DNS</span><b>FAIL</b><span>1 OF 3 RECORDS</span></div>
<div class="sp-grow"><p class="sp-kicker">Outbound domains /</p><h1 class="title is-3">example.org</h1><p class="sp-lead">1 284 messages in 30 days · peak 96 msg/h</p></div>
<div class="buttons"><a class="button" href="#"><i class="ti ti-refresh"></i>Re-check DNS</a><a class="button is-primary" href="#"><i class="ti ti-plus"></i>Add application</a></div>
</div></div>
</div>
<div class="hv-label"><b>B · name, no edge</b><span>wordmark only, a plain bar; the stamp and its perforation stay on sign-in, setup and the favicon</span></div>
<div class="hv-frame hv-b">
<nav class="navbar is-primary"><div class="container">
<div class="navbar-brand"><a class="navbar-item" href="#"><img class="hv-word" src="wordmark-cream.svg" alt="SelfPost"></a></div>
<div class="navbar-menu is-active"><div class="navbar-start"><a class="navbar-item" href="#">Overview</a><a class="navbar-item sp-current" href="#">Outbound</a><a class="navbar-item" href="#">Inbound</a><a class="navbar-item" href="#">Server</a></div>
<div class="navbar-end"><a class="navbar-item" href="#"><i class="ti ti-user-circle"></i>&nbsp;admin</a></div></div>
</div></nav>
<div class="sp-subnav"><div class="container"><a href="#" aria-current="page"><i class="ti ti-world-upload"></i>Domains</a><a href="#"><i class="ti ti-list-details"></i>Log</a><a href="#"><i class="ti ti-stack-2"></i>Queue</a><a href="#"><i class="ti ti-report-analytics"></i>DMARC reports</a></div></div>
<div class="container"><div class="sp-head">
<div class="sp-postmark sp-fail"><span>DNS</span><b>FAIL</b><span>1 OF 3 RECORDS</span></div>
<div class="sp-grow"><p class="sp-kicker">Outbound domains /</p><h1 class="title is-3">example.org</h1><p class="sp-lead">1 284 messages in 30 days · peak 96 msg/h</p></div>
<div class="buttons"><a class="button" href="#"><i class="ti ti-refresh"></i>Re-check DNS</a><a class="button is-primary" href="#"><i class="ti ti-plus"></i>Add application</a></div>
</div></div>
</div>
<div class="hv-label"><b>C · the header is the stamp</b><span>stamp paper, ink hairline and the mark's perforation; brick only behind the name, as on the mark</span></div>
<div class="hv-frame hv-c">
<nav class="navbar"><div class="container">
<div class="navbar-brand"><a class="hv-brand" href="#"><img class="hv-word" src="wordmark-cream.svg" alt="SelfPost"></a></div>
<div class="navbar-menu is-active"><div class="navbar-start"><a class="navbar-item" href="#">Overview</a><a class="navbar-item hv-current" href="#">Outbound</a><a class="navbar-item" href="#">Inbound</a><a class="navbar-item" href="#">Server</a></div>
<div class="navbar-end"><a class="navbar-item" href="#"><i class="ti ti-user-circle"></i>&nbsp;admin</a></div></div>
</div></nav>
<div class="hv-perf"></div>
<div class="sp-subnav"><div class="container"><a href="#" aria-current="page"><i class="ti ti-world-upload"></i>Domains</a><a href="#"><i class="ti ti-list-details"></i>Log</a><a href="#"><i class="ti ti-stack-2"></i>Queue</a><a href="#"><i class="ti ti-report-analytics"></i>DMARC reports</a></div></div>
<div class="container"><div class="sp-head">
<div class="sp-postmark sp-fail"><span>DNS</span><b>FAIL</b><span>1 OF 3 RECORDS</span></div>
<div class="sp-grow"><p class="sp-kicker">Outbound domains /</p><h1 class="title is-3">example.org</h1><p class="sp-lead">1 284 messages in 30 days · peak 96 msg/h</p></div>
<div class="buttons"><a class="button" href="#"><i class="ti ti-refresh"></i>Re-check DNS</a><a class="button is-primary" href="#"><i class="ti ti-plus"></i>Add application</a></div>
</div></div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink