Install-as-app guide and iPhone safe-area support
Publish Container / publish (push) Successful in 2m51s
Publish Container / publish (push) Successful in 2m51s
- Install banner (phones), Settings guide and dialog with iPhone/iPad and Android steps, native Install button where supported; steps also on the dashboard Account page - apple-touch-icon now a PNG (iOS ignores SVG icons) - Shared pwa-safe.css: dark cap behind the status bar/Dynamic Island in the installed app, inset-aware offline banner, pull-to-refresh, bottom bars, full-screen map, dialogs - Landscape-aware content gutters; measured top-bar height; viewport-fit=cover on every page Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Nate EmmertandClaude Sonnet 5.5 committed
1 parent
114386a1b2
commit
5ed673bacc
11 files changed
+223
-14
No files matched your search
+41
-8
@@ -2,7 +2,8 @@
|
||||
:root {
|
||||
--sky-text: #ffffff;
|
||||
--blue-grad: linear-gradient(160deg, #2563eb 0%, #3b82f6 55%, #93c5fd 100%);
|
||||
--topbar-h: 58px;
|
||||
--topbar-h: calc(58px + env(safe-area-inset-top, 0px));
|
||||
--gutter: 1rem;
|
||||
}
|
||||
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
|
||||
/* on <html> (the viewport): putting this on <body> can block wheel scrolling when body is a scroll container */
|
||||
@@ -10,20 +11,20 @@ html { overscroll-behavior-y: none; }
|
||||
button, a, summary { touch-action: manipulation; }
|
||||
|
||||
/* ── Layout ── */
|
||||
.app { max-width: 980px; padding: 0 1rem 4rem; }
|
||||
@media (min-width: 900px) { .app { padding: 0 1.5rem 4rem; } }
|
||||
.app { max-width: 980px; padding: 0 var(--gutter) 4rem; }
|
||||
@media (min-width: 900px) { :root { --gutter: 1.5rem; } }
|
||||
|
||||
/* ── Slim top bar ── */
|
||||
.topbar {
|
||||
position: sticky; top: 0; z-index: 200;
|
||||
display: flex; align-items: center; gap: 0.75rem;
|
||||
margin: 0 -1rem 1rem; padding: calc(0.55rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) 0.55rem calc(1rem + env(safe-area-inset-left, 0px));
|
||||
margin: 0 calc(-1 * var(--gutter)) 1rem; padding: calc(0.55rem + env(safe-area-inset-top, 0px)) calc(var(--gutter) + env(safe-area-inset-right, 0px)) 0.55rem calc(var(--gutter) + env(safe-area-inset-left, 0px));
|
||||
min-height: var(--topbar-h);
|
||||
background: color-mix(in srgb, var(--paper) 86%, transparent);
|
||||
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
@media (min-width: 900px) { .topbar { margin: 0 -1.5rem 1.25rem; padding-left: 1.5rem; padding-right: 1.5rem; } }
|
||||
@media (min-width: 900px) { .topbar { margin-bottom: 1.25rem; } }
|
||||
.brand { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--ink); font-weight: 800; letter-spacing: -0.01em; font-size: 1.05rem; flex-shrink: 0; }
|
||||
.brand-mark { color: var(--accent); font-size: 1.3rem; line-height: 1; }
|
||||
.topbar .tabs { border: none; border-radius: 999px; background: var(--paper-dark); padding: 3px; gap: 2px; margin: 0 auto; overflow: visible; }
|
||||
@@ -47,8 +48,9 @@ button, a, summary { touch-action: manipulation; }
|
||||
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
|
||||
.icon-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
|
||||
@media (max-width: 640px) {
|
||||
.app { padding: 0 0.9rem max(5.5rem, calc(5rem + env(safe-area-inset-bottom, 0px))); }
|
||||
.topbar { margin: 0 -0.9rem 0.8rem; }
|
||||
:root { --gutter: 0.9rem; }
|
||||
.app { padding: 0 calc(var(--gutter) + env(safe-area-inset-right, 0px)) max(5.5rem, calc(5rem + env(safe-area-inset-bottom, 0px))) calc(var(--gutter) + env(safe-area-inset-left, 0px)); }
|
||||
.topbar { margin: 0 calc(-1 * (var(--gutter) + env(safe-area-inset-right, 0px))) 0.8rem calc(-1 * (var(--gutter) + env(safe-area-inset-left, 0px))); }
|
||||
.brand-name { display: none; }
|
||||
.topbar .tabs { display: none; }
|
||||
.loc-chip { flex: 1; max-width: none; justify-content: flex-start; }
|
||||
@@ -130,7 +132,7 @@ button, a, summary { touch-action: manipulation; }
|
||||
.bring-row .rec-label { font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
|
||||
|
||||
/* ── Sticky section headings (iPhone friendly) ── */
|
||||
.sticky-head { position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) - 6px); z-index: 20; padding: 0.45rem 0.15rem; margin: 0 0 0.5rem;
|
||||
.sticky-head { position: sticky; top: calc(var(--topbar-h) - 6px); z-index: 20; padding: 0.45rem 0.15rem; margin: 0 0 0.5rem;
|
||||
background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
|
||||
.section-label { font-size: 0.78rem; letter-spacing: 0.12em; }
|
||||
.link-btn { min-height: 36px; font-style: normal; color: var(--accent); }
|
||||
@@ -208,3 +210,34 @@ body:not([data-tab="conditions"]) #loading { display: none; }
|
||||
.hilo-arrow { display: inline; font-size: 0.8em; opacity: .85; margin-right: 1px; }
|
||||
.hilo-label { flex-basis: 100%; font-size: 0.62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; margin-top: 2px; }
|
||||
@media (max-width: 640px) { .hero-hilo { flex-direction: column; gap: 0.35rem; } .hilo-divider { width: 70%; height: 1px; } }
|
||||
|
||||
/* ── Install guide ── */
|
||||
.install-banner { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.9rem; padding: 0.65rem 0.8rem; border-radius: 16px;
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--card-bg)), var(--card-bg)); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); }
|
||||
.install-banner.hidden { display: none; }
|
||||
.ib-ico { font-size: 1.6rem; }
|
||||
.ib-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.85rem; line-height: 1.25; }
|
||||
.ib-text span { font-size: 0.74rem; color: var(--ink-light); }
|
||||
.ib-btn { font: inherit; font-weight: 700; font-size: 0.82rem; min-height: 40px; padding: 0 1rem; border-radius: 999px; border: none; background: var(--accent); color: #fff; cursor: pointer; }
|
||||
.ib-x { font: inherit; width: 36px; height: 36px; border: none; background: transparent; color: var(--ink-light); font-size: 1rem; cursor: pointer; border-radius: 50%; }
|
||||
.install-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1.4rem; }
|
||||
.ins-lead { font-size: 0.88rem; margin-bottom: 0.8rem; color: var(--ink-mid); }
|
||||
.ins-done { font-weight: 700; color: #22c55e; margin-bottom: 0.4rem; }
|
||||
.ins-tabs { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--paper-darker); margin-bottom: 0.8rem; }
|
||||
.ins-tab { font: inherit; font-size: 0.8rem; font-weight: 700; min-height: 36px; padding: 0 0.9rem; border: none; border-radius: 999px; background: transparent; color: var(--ink-light); cursor: pointer; }
|
||||
.ins-tab.on { background: var(--accent); color: #fff; }
|
||||
.ins-steps { margin: 0 0 0.6rem 1.2rem; display: grid; gap: 0.55rem; font-size: 0.9rem; line-height: 1.4; }
|
||||
.ins-steps li::marker { font-weight: 800; color: var(--accent); }
|
||||
.ins-ico { vertical-align: -5px; margin: 0 2px; color: var(--accent); }
|
||||
.ins-note { font-size: 0.78rem; color: var(--ink-light); line-height: 1.5; margin-top: 0.5rem; }
|
||||
.ins-install { font: inherit; font-weight: 700; min-height: 44px; padding: 0 1.4rem; margin-bottom: 0.8rem; border: none; border-radius: 999px; background: var(--accent); color: #fff; cursor: pointer; }
|
||||
.install-dialog { border: 1px solid var(--border); border-radius: 20px; background: var(--paper-dark); color: var(--ink); padding: 1.1rem 1.2rem 1.3rem; width: min(440px, 92vw); margin: auto; }
|
||||
.install-dialog::backdrop { background: rgba(0,0,0,.6); }
|
||||
.install-dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.7rem; }
|
||||
.install-dialog-head h2 { font-size: 1.1rem; }
|
||||
.install-dialog-head button { font: inherit; width: 36px; height: 36px; border: none; background: transparent; color: var(--ink-light); font-size: 1rem; cursor: pointer; border-radius: 50%; }
|
||||
|
||||
/* Landscape phones: side insets for the content column (the top bar already adds its own) */
|
||||
.app { padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px)); }
|
||||
.topbar { margin-left: calc(-1 * (var(--gutter) + env(safe-area-inset-left, 0px))); margin-right: calc(-1 * (var(--gutter) + env(safe-area-inset-right, 0px))); }
|
||||
.install-dialog { margin-top: max(1rem, env(safe-area-inset-top, 0px)); }
|
||||
Reference in new issue
Block a user