lfg2025/deepstock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: restore landing page layout when navigating back from quiz

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-05-05 14:16:24 +01:00
parent 570333d776
commit f4dadf1ec7
3 changed files with 28 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@@ -5,7 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<title>Deepstock — Survival Preparedness Advisor</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Serif+Display&family=Barlow:wght@300;400;500;600&display=swap" rel="stylesheet"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<!-- font-display=optional: render with system fallback, swap to webfont
only if it's already cached. Eliminates the visible bold-flash that
`display=swap` was causing on first paint. -->
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Serif+Display&family=Barlow:wght@300;400;500;600&display=optional" rel="stylesheet"/>
</head>
<body>
<div id="app"></div>

13
src/App.vue
View File

@@ -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' })
}

10
src/styles.css
View File

@@ -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 <main class="app">
was a direct child of <body>; 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;