| … | … | @@ -737,8 +737,14 @@ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible, |
| 737 | 737 | --bg:#fff; --bg-soft:#f7f8fa; --line:#e6e8eb; --line-soft:#f0f1f3; |
| 738 | 738 | --accent:#1a56db; --like:#e0245e; --repost:#17bf63; |
| 739 | 739 | --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 */ |
| 742 | 748 | } |
| 743 | 749 | body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; |
| 744 | 750 | 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 |
| 796 | 802 | .focus{border-left-width:3px;border-color:var(--accent)} |
| 797 | 803 | /* Small screens: the page had desktop margins on a phone, wasting ~15% of a narrow viewport. */ |
| 798 | 804 | @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)} |
| 800 | 810 | h1{flex-wrap:wrap} |
| 801 | 811 | .who{margin-left:0;width:100%} |
| 802 | 812 | .post{padding:var(--s4) 0;border-radius:0} |