rays/ipx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

Home page: the screenshot's panel frames it evenly on all four sides (#216)

Browse Source 
With no padding at the bottom, so the window would seem to rise out of the panel, it read as a
border missing a side.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-10-12 18:02:19 +00:00
parent 4cb2426b49
commit 8d5a86d02a
2 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
site/site.css
View File

@@ -62,12 +62,12 @@ h1{margin:0;color:var(--navy);font-weight:900;font-size:clamp(6.5rem,24vw,15rem)
@media (prefers-reduced-motion:reduce){.needle,.stations .tuned{animation-duration:0s;animation-delay:0s}}
figcaption{margin:.7rem 0 0;color:var(--muted);font-size:.9rem}
/* The app as it looks. The window in a navy panel, the dial's material, rising out of its bottom
edge; the phone in a row of its own beside what it shows, not over the window's corner. */
/* The app as it looks. The window framed in a navy panel, the dial's material, even on every
side; the phone in a row of its own beside what it shows, not over the window's corner. */
.shots{padding-block:4.5rem 0}
.shotlede{max-width:40rem;margin:-.5rem 0 1.75rem}
.window{margin:0;padding:clamp(1rem,3.2vw,2.5rem) clamp(1rem,3.2vw,2.5rem) 0;background:var(--navy);border-radius:1.25rem;overflow:hidden}
.window img{display:block;width:100%;height:auto;border-radius:.6rem .6rem 0 0;box-shadow:0 0 0 1px rgba(143,194,234,.22)}
.window{margin:0;padding:clamp(1rem,3.2vw,2.5rem);background:var(--navy);border-radius:1.25rem}
.window img{display:block;width:100%;height:auto;border-radius:.6rem;box-shadow:0 0 0 1px rgba(143,194,234,.22)}
.pocket{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:clamp(2rem,7vw,5.5rem);align-items:center;padding-block:4rem 0}
.pocket img{display:block;width:100%;height:auto;border-radius:1.9rem;border:.45rem solid var(--navy)}
.pocket h2{margin-bottom:.75rem}