jessikitty/newbury-exhibit-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix landing page: disclaimer in flex flow (no overlap on short screens) + safe-area insets

Browse Source
This commit is contained in:
jessikitty
2026-07-24 18:21:59 +10:00
parent a1234fb851
commit bebd327f26
1 changed files with 33 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+33 -19
View File
@@ -11,27 +11,38 @@
#gl { position:fixed; inset:0; width:100%; height:100%; }
.hidden { display:none !important; }
#startScreen { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; padding:24px; z-index:10; background-size:cover; background-position:center; }
#startScreen::before { content:''; position:absolute; inset:0; background:#06080f; opacity:var(--ov,.55); }
#startScreen > * { position:relative; }
#logo { max-width:min(78vw, 460px); max-height:34vh; margin-bottom:18px; }
#title { font-size:clamp(1.8rem,7vw,2.8rem); margin:0 0 10px; letter-spacing:.06em; }
#subtitle { opacity:.85; margin:0 0 30px; max-width:34rem; line-height:1.5; }
.btn { font-size:1.15rem; padding:14px 40px; border-radius:999px; border:0; cursor:pointer;
/* Flow layout, not absolute positioning: the disclaimer is a normal flex child pinned
to the bottom by margin-top:auto, so it can never overlap the buttons on short
screens. Content scrolls if the viewport is too small for it. */
#startScreen { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center;
text-align:center; z-index:10; background-size:cover; background-position:center;
padding:max(18px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom));
overflow-y:auto; overscroll-behavior:contain; }
#startScreen::before { content:''; position:fixed; inset:0; background:#06080f; opacity:var(--ov,.55); }
#startScreen > * { position:relative; flex:none; }
/* centres the block when there's room, without ever squashing the disclaimer */
#startInner { margin:auto 0; display:flex; flex-direction:column; align-items:center; width:100%; }
#logo { max-width:min(78vw, 420px); max-height:min(28vh, 240px); margin-bottom:16px; object-fit:contain; }
#title { font-size:clamp(1.6rem,6.5vw,2.8rem); margin:0 0 10px; letter-spacing:.06em; }
#subtitle { opacity:.85; margin:0 0 26px; max-width:34rem; line-height:1.5; font-size:clamp(.9rem,3.6vw,1rem); }
.btn { font-size:1.1rem; padding:14px 38px; border-radius:999px; border:0; cursor:pointer;
background:linear-gradient(135deg, var(--accent), #529eff); color:#04121a; font-weight:700; }
.btn.ghost { background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.35);
font-size:.92rem; padding:9px 22px; font-weight:500; margin-top:14px; }
.disclaimer { position:absolute; bottom:14px; left:16px; right:16px; font-size:.68rem; opacity:.55; line-height:1.4; }
font-size:.92rem; padding:9px 22px; font-weight:500; margin-top:12px; }
.disclaimer { font-size:.66rem; opacity:.55; line-height:1.4; max-width:36rem;
margin-top:auto; padding-top:22px; }
/* details page */
#details { position:fixed; inset:0; z-index:20; overflow:auto; background:#080b16; padding:0 0 90px; }
#details .inner { max-width:44rem; margin:0 auto; padding:24px 20px 0; }
#details { position:fixed; inset:0; z-index:20; overflow:auto; background:#080b16;
padding:0 0 calc(90px + env(safe-area-inset-bottom)); }
#details .inner { max-width:44rem; margin:0 auto;
padding:max(24px, env(safe-area-inset-top)) 20px 0; }
#details h1 { font-size:1.6rem; color:var(--accent); }
#details h2, #details h3 { color:var(--accent); margin-top:1.4em; }
#details p, #details li { line-height:1.65; opacity:.9; }
#details a { color:var(--accent); }
#backBtn { position:fixed; bottom:0; left:0; right:0; padding:14px; border:0; font-size:1rem;
#backBtn { position:fixed; bottom:0; left:0; right:0; border:0; font-size:1rem;
padding:14px 14px calc(14px + env(safe-area-inset-bottom));
background:#111730; color:var(--text); cursor:pointer; border-top:1px solid #1e2748; }
#hud { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; padding:10px 14px;
@@ -40,7 +51,8 @@
#trk.warn { color:#ffd166; }
/* shutter */
#shutter { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); z-index:6;
#shutter { position:fixed; bottom:calc(28px + env(safe-area-inset-bottom)); left:50%;
transform:translateX(-50%); z-index:6;
width:68px; height:68px; border-radius:50%; border:4px solid rgba(255,255,255,.85);
background:rgba(255,255,255,.22); cursor:pointer; backdrop-filter:blur(2px); }
#shutter:active { transform:translateX(-50%) scale(.92); background:rgba(255,255,255,.5); }
@@ -57,11 +69,13 @@
<canvas id="gl"></canvas>
<div id="startScreen">
<img id="logo" class="hidden" alt="">
<h1 id="title"></h1>
<p id="subtitle"></p>
<button id="start" class="btn"></button>
<button id="detailsBtn" class="btn ghost"></button>
<div id="startInner">
<img id="logo" class="hidden" alt="">
<h1 id="title"></h1>
<p id="subtitle"></p>
<button id="start" class="btn"></button>
<button id="detailsBtn" class="btn ghost"></button>
</div>
<div class="disclaimer" id="disc1"></div>
</div>