swap friend SVGs for wizard emoji, 2-up shorter project cards on phones

This commit is contained in:
Martin Dvořák 2026-09-30 21:20:05 +00:00
commit 6827ca6ed1
9 changed files with 41 additions and 19815 deletions

View file

@ -129,11 +129,11 @@ Themes: `web` = default frosted-glass website (sidebar + content, light/dark),
content column of `.glass` panels: hero (with a compact "Find me" socials row),
a `.web-quick` 2-up ("Right now" + "Gym PRs"), then services, activity,
projects, hardware, features (Revival/RustyWolf) and friends. Friend cards are
**text-only** (name + domain — the web theme does not render `Friend.img`
avatars) in a `.friends-grid` that collapses to a 2×2 grid on phones.
Projects/hardware
use a CSS multi-column **masonry** gallery (`.project-grid`) so short cards
don't leave half-empty grid slots. The two feature panels (`.web-split`) stretch
**text-only** (name + domain) in a `.friends-grid` that collapses to a 2×2
grid on phones; the desktop friend icons use a 🧙 emoji glyph (the old
per-friend SVGs are gone). Projects/hardware use a CSS multi-column
**masonry** gallery (`.project-grid`) so short cards don't leave half-empty
grid slots; on phones it drops to 2 columns with a shorter card image. The two feature panels (`.web-split`) stretch
to equal height and share a fixed `16 / 10` `.web-shot` frame with
`object-fit: cover` (+ `object-position: center top`), so source images with
different aspect ratios still line up. The old stacked TUI panel layout and the
@ -245,12 +245,11 @@ with icons, it's almost certainly here.
exceeded" (this bug has already happened once — see history below).
### Gotcha: native drag hijacks the pointer gesture
Icons whose glyph is an `<img>` (the friend shortcuts that carry `Friend.img`,
e.g. `/skopec.svg`, `/bukovina.svg`, `/vlcak.svg`) can start the browser's
**native image drag**, which fires `pointercancel` and kills the custom drag.
Emoji-based icons are unaffected — including a friend with no `img` (`Friend.img`
is optional now; it falls back to the 🫂 glyph), which makes this look like
"only some icons don't drag".
Icons whose glyph is an `<img>` can start the browser's **native image drag**,
which fires `pointercancel` and kills the custom drag, while emoji-based icons
are unaffected (looks like "only some icons don't drag"). No desktop icon uses
an `<img>` glyph now — the friends are 🧙 emoji like the rest — but the guard
below is kept in case an image glyph is reintroduced.
Guard (already in place, keep it that way):
- `draggable={false}` on the `<Image>` in `renderIcon`.
@ -381,8 +380,8 @@ knows about icon ids, via `APP_BY_ID`.
two differ. `bukovinafilip.com`, `vlcak.me` and `k0t4tkos-portfolio.com` send
no framing headers, so they frame the live site. `skopec.dev` sends
`X-Frame-Options: SAMEORIGIN` on every path, so `friend.proxy` routes it
through `/api/frame`. `Friend.img` is optional and only feeds the desktop icon
/ FriendsApp avatar — the web theme's friends section is text-only.
through `/api/frame`. Friend icons are a 🧙 emoji everywhere (no per-friend
images); the web theme's friends section is text-only.
- `/api/frame` is a **host-allowlisted** header-stripping proxy for sites that
refuse framing. It fetches the HTML server-side (so the upstream
`X-Frame-Options` never reaches the browser), injects `<base href="origin/">`
@ -412,7 +411,7 @@ knows about icon ids, via `APP_BY_ID`.
Theme + scheme are read pre-paint from `localStorage.theme` / `.scheme`, so a
quick check is to set those in devtools and reload.
- `next/image` is lazy by default, so a headless full-page screenshot shows the
below-the-fold feature shots and friend avatars as blank boxes. Scroll the page
below-the-fold feature shots as blank boxes. Scroll the page
slowly first and they load; this is a capture artifact, not a bug. Headless
Chromium lives at `~/.cache/ms-playwright/chromium-*/chrome-linux64/chrome`
(drive it with `--headless=new --remote-debugging-port=…` and CDP).