The /7 divisor was calibrated for the wider "Kammergut" wordmark and
left ~25-45px of unused space each side of the narrower "Deepstock".
Switch to language-aware divisors that match each wordmark's actual
rendered-width-to-font-size ratio in DM Serif Display at 0.05em
tracking:
- DE / Kammergut (default): /6 — fills with ~16px gutter at viewport
widths from 320 to 768.
- EN / Deepstock: /5.2 — narrower wordmark, smaller divisor needed
to fill the same content area without clipping at 320px.
Desktop (>=900px) uses clamp() with separate ranges per language.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
CSS: hero h1 used `(100vw - 48px) / 7` on mobile and `-64px / 7` on
tablet — the wider gutter assumption left 12-16px of unused white
space inside the 16px hero padding. Tightened both to `(100vw - 32px)
/ 7` so the wordmark spans the actual hero content area. Divisor 7
preserves the safety margin for the wider "Kammergut" wordmark.
Compose: dropped the `image: kammergut:0.1.0` field. Older Portainer
Compose runtimes (pre-v2.20) ignore `pull_policy: build` and still
ran `compose pull` against the image name, hitting "pull access
denied". Without an image name there's nothing for compose pull to
attempt; build runs during `up`.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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>
Faithful 1:1 port of the single-file index.html to a Vite + Vue 3.5
project. All visuals, behavior, translations, quiz logic, scoring,
SVG paint filters, and modifier panel preserved. The previous
single-file build is archived as index.original.html for A/B compare.
Inline onclick handlers in the static template are converted to
Vue's @click bindings — Vue 3 ignores string-valued on* attributes,
which silently broke the qpb-logo "back to landing" navigation.
Inline handlers inside dynamically-injected innerHTML strings
(quiz options, slider, nav buttons) keep working since the browser
parses them; their target functions are exposed on window from
onMounted.
Pinned: vue 3.5.13, vite 6.4.2, @vitejs/plugin-vue 5.2.1.
Zero npm audit vulnerabilities.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
