From 202813a1e6c33c5f041df9066ea2f928fcc603df Mon Sep 17 00:00:00 2001 From: surtic86 Date: Sat, 19 Sep 2026 07:45:40 +0200 Subject: [PATCH] Draw the hero phone's bezel at the phone's own scale A percentage padding is of the containing block's width, and the hero phone is positioned absolutely in the hero visual at a quarter of its width, so its 3.4% bezel came out four times too thick. The bezel is now the screen's margin, a percentage of the phone's own width wherever the phone sits; the gallery phones look as before. Co-Authored-By: Claude Opus 5 (1M context) --- website/css/device-frame.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/website/css/device-frame.css b/website/css/device-frame.css index 656dbed..c3362fc 100644 --- a/website/css/device-frame.css +++ b/website/css/device-frame.css @@ -113,14 +113,17 @@ /* ---------------------------------------------------------------- phone */ +/* The bezel is the screen's margin, not the phone's padding: a percentage margin is of the phone's + own width, where a padding would be of whatever the phone is positioned in (the hero). */ .device--phone { - padding: 3.4%; + display: flow-root; border-radius: 15% / 7%; background: var(--bezel); box-shadow: inset 0 0 0 2px var(--bezel-edge), 0 24px 48px -20px var(--device-shadow); } .device--phone .device__screen { + margin: 3.4%; aspect-ratio: 393 / 852; border-radius: 12.5% / 5.8%; }