george/floatingflows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile fixes: hero top spacing, drawer logo color, video poster fallback (iOS autoplay-blocked)

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
George Turkington
2026-06-17 13:36:25 +02:00
parent 2e33398d1f
commit 8e6f3fc49a
2 changed files with 23 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+12
View File
@@ -197,11 +197,23 @@ body.menu-open .drawer { transform: translateY(0); opacity: 1; pointer-events: a
.brand__icon { width: 42px; height: 42px; } .brand__icon { width: 42px; height: 42px; }
.brand__name { display: flex; flex-direction: column; font-size: 0.95rem; line-height: 1.05; letter-spacing: 0.13em; font-weight: 700; white-space: nowrap; } .brand__name { display: flex; flex-direction: column; font-size: 0.95rem; line-height: 1.05; letter-spacing: 0.13em; font-weight: 700; white-space: nowrap; }
.brand__name b { display: block; font-weight: 700; } .brand__name b { display: block; font-weight: 700; }
/* Push the hero's top cluster down, clear of the nav, with breathing room between lines */
.hero__grid { padding-top: clamp(5rem, 14vh, 7.5rem); }
.hero__eyebrow { margin-bottom: var(--space-xs); }
.hero h1 { margin-top: var(--space-xl); }
/* Over the dark hero video (nav transparent) — light + legible */ /* Over the dark hero video (nav transparent) — light + legible */
.nav:not(.nav--solid) .brand__name { color: var(--color-shell); text-shadow: 0 1px 14px oklch(18% 0.02 54 / 0.6); } .nav:not(.nav--solid) .brand__name { color: var(--color-shell); text-shadow: 0 1px 14px oklch(18% 0.02 54 / 0.6); }
.nav:not(.nav--solid) .brand__name b { color: var(--color-accent-soft); } .nav:not(.nav--solid) .brand__name b { color: var(--color-accent-soft); }
.nav:not(.nav--solid) .brand__icon { filter: drop-shadow(0 1px 7px oklch(18% 0.02 54 / 0.6)); } .nav:not(.nav--solid) .brand__icon { filter: drop-shadow(0 1px 7px oklch(18% 0.02 54 / 0.6)); }
.nav:not(.nav--solid) .nav__toggle span { background: var(--color-shell); box-shadow: 0 1px 7px oklch(18% 0.02 54 / 0.5); } .nav:not(.nav--solid) .nav__toggle span { background: var(--color-shell); box-shadow: 0 1px 7px oklch(18% 0.02 54 / 0.5); }
/* Menu open: drawer is light cream, so the logo + close icon must be dark (kill the over-video white/shadow) */
body.menu-open .brand__name { color: var(--color-ink) !important; text-shadow: none !important; }
body.menu-open .brand__name b { color: var(--color-accent-deep) !important; }
body.menu-open .brand__icon { filter: none !important; }
body.menu-open .nav__toggle span { background: var(--color-ink) !important; box-shadow: none !important; }
} }
/* ============ Contact / social icon buttons ============ */ /* ============ Contact / social icon buttons ============ */
index.html
+11 -1
View File
@@ -349,8 +349,18 @@
hv.setAttribute('poster', pick[1]); hv.setAttribute('poster', pick[1]);
hv.load(); hv.load();
} }
var play = function(){ var p = hv.play(); if (p && p.catch) p.catch(function(){}); }; var fig = hv.parentNode;
var showPoster = function(){
if (hv.dataset.fellback) return;
hv.dataset.fellback = '1';
var poster = hv.getAttribute('poster');
if (fig && poster) { fig.style.backgroundImage = "url('" + poster + "')"; fig.style.backgroundSize = 'cover'; fig.style.backgroundPosition = 'center'; }
hv.style.display = 'none';
};
var play = function(){ var p = hv.play(); if (p && p.catch) p.catch(showPoster); };
play(); hv.addEventListener('canplay', play, { once: true }); play(); hv.addEventListener('canplay', play, { once: true });
// iOS Low Power Mode / blocked autoplay never starts the video — show the still poster (no play button)
setTimeout(function(){ if (hv.paused && hv.currentTime === 0) showPoster(); }, 4000);
} }
var nav = document.getElementById('nav'); var nav = document.getElementById('nav');