mixandClaude Fable 5.1
4921416384
test / test (push) Canceled after 0s
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>
34 lines
2.1 KiB
CSS
34 lines
2.1 KiB
CSS
/* 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; }
|