www: stack logo vertically — wordmark on top, λ mark beneath

λ in front was reading as a "Y" attached to the wordmark ("ylumbda.").
Move the mark under the wordmark as a standalone logo below the name.
Sitting alone, the flipped λ doesn't get recruited into the first
letter and reads as its own glyph — a lambda turned on its head.
This commit is contained in:
russell@unturf.com 2026-04-19 17:20:24 -04:00
parent f0dbf62cef
commit 2fccdddf44
2 changed files with 9 additions and 16 deletions

View file

@ -11,10 +11,8 @@
<body>
<header>
<div class="logo-row">
<span class="lambda-mark" aria-hidden="true">&lambda;</span>
<h1 aria-label="lumbda.">lumbda<span class="period" aria-hidden="true">.</span></h1>
</div>
<h1 aria-label="lumbda.">lumbda<span class="period" aria-hidden="true">.</span></h1>
<div class="lambda-mark" aria-hidden="true">&lambda;</div>
<p class="tagline">feedback as a primitive</p>
</header>

View file

@ -53,23 +53,18 @@ header {
margin-bottom: 2rem;
}
/* Logo row: flipped-λ brand mark sits beside the wordmark, not inside it. */
header .logo-row {
display: flex;
align-items: baseline;
gap: 0.6rem;
}
/* Brand mark — a distinct, oversized λ rotated upside-down. Readable
as a logo separate from the "lumbda" word; the inversion reads as a
play on "lambda" the primitive, turned on its head. */
/* Brand mark — an oversized λ rotated upside-down, sitting UNDER the
wordmark. Placed in front it read as a "Y" smashed against the text
("ylumbda"); underneath it stands alone as a logo symbol and doesn't
hijack the first letter. */
header .lambda-mark {
display: inline-block;
transform: scaleY(-1);
font-family: 'chunkfive', Georgia, serif;
font-size: 5rem;
line-height: 0.9;
color: var(--green);
transform: scaleY(-1);
transform-origin: center;
margin: 0.2rem 0 0.4rem;
}
header h1 {