OverviewFilesCommitsIssuesDocsReleasesPeers

favela-web commits / 499b327

render: land type and radius on whole pixels
The scale was on no grid: radii 6/10px and type 12.48/13.6/15.2/16.8/21.6px. That is what fractional rem buys you — sub-pixel text rendering, and no two components agreeing on a size. --r1/--r2 6/10px -> 8/12px --f0..--f4 12.48/13.6/15.2/16.8/21.6 -> 12/14/16/18/22 Read off bluesky-social/social-app's alf tokens (src/alf/tokens.ts at ef171e289, the last public copy before they moved to the @bsky.app/alf package): their radii are 2/4/8/12/16 and type 10/12/14/16/18/20/22/26/32/40. Ours is now a subset that lands on theirs. Kept in rem so a reader who raises their browser font size still gets it. Body text is now 16px at BOTH widths, which is bsky's `md` exactly. The mobile step-up to --f3 is removed: it was added when the base was 15.2px and read small on a phone, so with a correct 16px base it would have overshot to 18px — larger than any mainstream client sets body text. Its sibling padding reduction, which is what actually bought the space, stays. Measured (computed-style fingerprint): 105 properties moved, all downstream of font-size — 37 font-size, 35 line-height, 30 text-box width/height, 2 radius, 1 margin. No colour moved. No overflow at 360/390/768/1280. Phase 1b of the visual-parity order. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
499b3270847acf918470a963da48d00d725a11f6
by plankatron <fleeky@gmail.com> · 2026-08-24T14:02:50.000Z

Changed files (2) +14 -4

lib/render.js +13 -3
……@@ -737,8 +737,14 @@ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
737737 --bg:#fff; --bg-soft:#f7f8fa; --line:#e6e8eb; --line-soft:#f0f1f3;
738738 --accent:#1a56db; --like:#e0245e; --repost:#17bf63;
739739 --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem;
740 --r1:.375rem; --r2:.625rem; --r3:1rem;
741 --f0:.78rem; --f1:.85rem; --f2:.95rem; --f3:1.05rem; --f4:1.35rem;
740 /* Radii and type land on whole pixels at a 16px root. The previous values (6/10px, and
741 12.48/13.6/15.2/16.8/21.6px) were on no grid at all, which is what fractional rem buys you:
742 sub-pixel text rendering and no two components agreeing. Read off bluesky-social/social-app's
743 alf tokens, which are the closest thing to a reference for this kind of client — theirs are
744 radius 2/4/8/12/16 and type 10/12/14/16/18/20/22/26/32/40. Ours is a subset that lands on it.
745 Kept in rem, not px, so a reader who raises their browser font size still gets it. */
746 --r1:.5rem; --r2:.75rem; --r3:1rem; /* 8 / 12 / 16 */
747 --f0:.75rem; --f1:.875rem; --f2:1rem; --f3:1.125rem; --f4:1.375rem; /* 12 / 14 / 16 / 18 / 22 */
742748}
743749body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
744750 max-width:640px;margin:0 auto;padding:var(--s5) var(--s4) var(--s6);color:var(--fg);
……@@ -796,7 +802,11 @@ nav a[aria-current=page]{color:var(--fg);font-weight:600;border-bottom-color:var
796802.focus{border-left-width:3px;border-color:var(--accent)}
797803/* Small screens: the page had desktop margins on a phone, wasting ~15% of a narrow viewport. */
798804@media(max-width:640px){
799 body{padding:var(--s4) var(--s3) var(--s6);font-size:var(--f3)}
805 /* Body stays --f2 (16px) here rather than stepping up to --f3. The step-up was added when the base
806 was 15.2px and read small on a phone; now that the base IS 16px it would overshoot to 18px, which
807 is larger than any mainstream client sets body text. The padding reduction below is the part that
808 was actually buying the space. */
809 body{padding:var(--s4) var(--s3) var(--s6);font-size:var(--f2)}
800810 h1{flex-wrap:wrap}
801811 .who{margin-left:0;width:100%}
802812 .post{padding:var(--s4) 0;border-radius:0}
package.json +1 -1
……@@ -1,6 +1,6 @@
11{
22 "name": "favela-web",
3 "version": "0.3.66",
3 "version": "0.3.67",
44 "description": "favela-web — the web/SSR surface of Favela, the native P2P-local, community-owned social client + appview over the self-custody atproto stack (hyper-proto-peer). One of the Favela surfaces (alongside favela-cli and favela-native). bsky is an optional POSSE export, not the home. See DESIGN.md.",
55 "type": "module",
66 "main": "bin/favela-web.js",