From f4dadf1ec7d66308681b88fba9206011e95e95f8 Mon Sep 17 00:00:00 2001 From: Dorian Date: Tue, 5 May 2026 14:16:24 +0100 Subject: [PATCH] fix: restore landing page layout when navigating back from quiz MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The qpb-logo's "back to home" path now soft-restarts via Vue's @click.prevent="restartQuiz", but restartQuiz never reset the inline styles startQuiz had set on body and .app to make the quiz scrollable (height:auto / overflow:auto). On the locked-viewport landing page those inline overrides collapsed the hero to its content height and left a white half-screen. restartQuiz now clears those inline styles so the CSS-defined height:100vh / overflow:hidden chain takes over again. The original single-file build never hit this because its qpb-logo was a hard href="/" reload, which reset the inline styles for free. Also harden the Vue mount layout: #app is now an explicit 100vh flex column so the wrapper div Vue introduces between body and main.app forwards the body's full viewport height (fallback for the same collapse symptom on first load). Switch Google Fonts to display=optional + add the gstatic preconnect to eliminate the bold-flash FOUT on cold loads — fonts now render either immediately (cached) or stay on the system fallback rather than swapping mid-paint. Co-Authored-By: Claude Opus 4.7 (1M context) --- index.html | 6 +++++- src/App.vue | 13 +++++++++++++ src/styles.css | 10 ++++++++++ 3 files changed, 28 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 2283358..e6457f9 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,11 @@ Deepstock — Survival Preparedness Advisor - + + +
diff --git a/src/App.vue b/src/App.vue index aa3cc75..57b15d2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -983,6 +983,19 @@ function restartQuiz() { const quiz = document.getElementById('quiz-section') if(quiz) quiz.classList.add('hidden') document.body.classList.remove('quiz-active') + + // Restore the locked-viewport layout that startQuiz had to undo for + // the scrollable quiz/results pages — without this the hero on the + // landing page collapses to its content height and leaves a white + // half-screen. + document.body.style.overflow = '' + document.body.style.height = '' + const app = document.querySelector('.app') + if (app) { + app.style.overflow = '' + app.style.height = '' + } + window.scrollTo({ top: 0, behavior: 'smooth' }) } diff --git a/src/styles.css b/src/styles.css index b8e84aa..cef48e0 100644 --- a/src/styles.css +++ b/src/styles.css @@ -32,6 +32,16 @@ html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; -webkit-overflow-scrolling: touch; } body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; height: 100vh; overflow: hidden; } +/* Vue mount point — match the body's full viewport so .app inside can + reach 100vh the way it did pre-Vue. The original
+ was a direct child of ; the new wrapper div has to forward those + dimensions or the hero stops short. */ +#app { + height: 100vh; + display: flex; + flex-direction: column; +} + /* ── HEADER ── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100;