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

Home page: screenshots in the dial's navy panel, the phone in a row of its own; analytics (#216)

Browse Source 
The desktop window was a 1440px window shown at 690px, unreadable, with the phone over the
corner that says the most. It is now a 1200px window shown near its size, in a navy panel like
the dial; the phone sits beside its own text, which leaves the feature list for Sign in your way.
On a phone the window shows its left part, larger. The CSP lets Cloudflare Web Analytics run.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-10-12 17:59:23 +00:00
parent 700037c368
commit 4cb2426b49
4 changed files with 33 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
site/site.css
View File

@@ -62,12 +62,16 @@ 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 desktop window, and the phone over its corner. */
/* 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. */
.shots{padding-block:4.5rem 0}
.screens{position:relative;margin:0 0 3rem;padding-right:clamp(0px,12%,9rem)}
.screens img{display:block;height:auto}
.desk{width:100%;border-radius:.9rem;border:1px solid var(--rule);box-shadow:0 1.5rem 3rem -1.5rem rgba(12,34,56,.45)}
.phone{position:absolute;right:0;bottom:-3rem;width:24%;max-width:15rem;border-radius:1.6rem;border:.4rem solid var(--navy);box-shadow:0 1.5rem 3rem -1rem rgba(12,34,56,.5)}
.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)}
.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}
.pocket p{margin:0;max-width:28rem;font-size:1.125rem}
h2{margin:0 0 1.5rem;color:var(--navy);font-weight:800;font-size:clamp(1.75rem,4vw,2.4rem);line-height:1.1;letter-spacing:-.02em}
.does,.then{padding-block:4rem 0}
@@ -85,8 +89,11 @@ footer p{margin:0}
.bar nav{gap:1rem}
.hero{padding-block:1.5rem 2rem}
.does dl{grid-template-columns:minmax(0,1fr);gap:1.75rem}
.screens{padding-right:0;margin-bottom:0}
.phone{position:static;width:62%;margin:1.5rem auto 0}
.window{margin-inline:-1rem;border-radius:0}
/* The whole window at this width is too small to read: its left part, larger. */
.window img{height:20rem;object-fit:cover;object-position:0 0}
.pocket{grid-template-columns:minmax(0,1fr);gap:1.5rem}
.pocket img{order:2;width:58%;max-width:14rem}
.dial{margin-inline:-1rem}
.scale{border-radius:0}
figcaption{padding-inline:1rem}