feat(core): avatar + QR + restructured colophon byline
Three additions to the title/outro colophon:
1. Optional avatar (`avatar: <url>` in frontmatter). On the outro,
a large circular byline portrait sits at the top of the
right-column stack. On the title, a smaller circular avatar
pairs with the speaker name in a CSS grid: avatar in column 1,
name in column 2, byline and context hang-indented under the
name in column 2 so every text line shares the same left edge.
Avatar center y-aligns with name center y (1px optical match).
2. Optional QR code on the outro (`qr: true` for current-URL,
`qr: <url>` for a fixed canonical link). New <morkdeck-qr>
Lit component renders client-side via @levischuck/tiny-qr +
@levischuck/tiny-qr-svg — a dependency-free TypeScript
encoder so the runtime bundle stays clean of Node-only
modules. QR sits in the bottom-left of the outro grid below
the "Thank you" wordmark with a "scan for these slides"
label slotted in, left-aligned to match the rest of the
slide's editorial flow.
3. Colophon markup unification. Dropped the .colophon-attribution
wrapper. Avatar, speaker, byline, and context now live as
siblings inside .colophon-author, with per-layout CSS
arranging them: title uses a 2-column grid (avatar | text),
outro uses a flex column (avatar above text). Same DOM,
purposeful compositions.
Density tier overrides for .colophon-speaker / .colophon-byline /
.colophon-context margin: 0 with a 2-class selector
(`.colophon .colophon-speaker`) — the slide-wide
`[data-density="dense"] p` rule's margin-bottom was bleeding
into the colophon text and shifting each line's optical
position away from where align-self placed it.
examples/showcase.md gains `avatar` + `qr: true` so the demo
exercises both fields.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
graham.systems