f4dadf1ec7
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>
19 lines
819 B
HTML
19 lines
819 B
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<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 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>
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html>
|