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

language selector and visual tweaks

Browse Source
This commit is contained in:
Dorian
2026-05-10 13:16:38 +01:00
parent e3851603ab
commit 185afdd5b1
2 changed files with 30 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.vue
View File

@@ -209,7 +209,7 @@
</div>
<header class="site-header">
<div class="logo" data-i18n="brand">Deepstock</div>
<a class="logo" data-i18n="brand" href="#" aria-label="Back to landing page" @click.prevent="restartQuiz">Deepstock</a>
<div class="header-right">
<button class="mod-open-btn" id="modOpenBtn" type="button" title="Open style modifier" aria-label="Open style modifier">⚙</button>
<div id="region-indicator" style="font-family:var(--font-mono);font-size:10px;color:var(--text-dim);padding:4px 8px;background:var(--panel);border:1px solid var(--border);border-radius:4px;white-space:nowrap;cursor:pointer;" @click="showRegionPicker" title="Click to change region"></div>
@@ -2132,9 +2132,15 @@ onMounted(() => {
// Initial render — pull saved session state (if any) so reload mid-quiz
// restores the user where they left off. Lang sets first so renderQuestion
// / renderResults pick up the right strings.
// / renderResults pick up the right strings. If no saved language, sniff
// navigator.language so German speakers land on the German copy without
// having to click the toggle.
const saved = loadState()
const lang = (saved && saved.currentLang) || 'en'
const detectLang = () => {
const nav = (navigator.language || navigator.userLanguage || 'en').toLowerCase()
return nav.startsWith('de') ? 'de' : 'en'
}
const lang = (saved && saved.currentLang) || detectLang()
setLang(lang)
updateRegionIndicator()

62
src/styles.css
View File

@@ -116,11 +116,18 @@ body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); f
.page-bg-pattern {
position: fixed;
inset: 0;
z-index: 0;
/* z-index:-1 keeps the pattern below normal-flow content (hero / quiz
/ results) without forcing those sections into their own stacking
context. That matters because creating a context on .results-section
would trap the capture-modal (a position:fixed descendant) inside
it, and its z-index:200 wouldn't escape that context to sit above
the body-level site-header. Body bg is the canvas; the pattern
paints above the canvas and below positioned content. */
z-index: -1;
pointer-events: none;
user-select: none;
overflow: hidden;
background: #F0F0F0;
background: #FAFAFA;
/* Parent is always visible — the intro overlay covers it during the
intro, and the per-row animations handle the staggered reveal once
intro-done lands. Nothing to fade on the wrapper. */
@@ -148,31 +155,18 @@ body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); f
reads comfortably across viewport sizes. */
font-size: clamp(42px, 8vw, 60px);
letter-spacing: 0.04em;
/* Emboss: text colour matches the panel; only the shadows render —
highlight top-left, faint dark on bottom-right. */
color: #F0F0F0;
text-shadow:
-1px -1px 0 rgba(255, 255, 255, 0.95),
1px 1px 0 rgba(0, 0, 0, 0.06);
}
.page-bg-pattern .bg-row span { display: inline-block; }
/* Lighter pattern on the assessment + results pages — homepage stays
on the slightly darker #F0F0F0 panel; quiz / results lift to #FAFAFA
so the questions and result cards (also #FAFAFA white-paint) sit on
a softer background. Text colour follows so the emboss effect still
relies on shadows alone. */
body.quiz-active .page-bg-pattern,
body.results-active .page-bg-pattern {
background: #FAFAFA;
}
body.quiz-active .page-bg-pattern .bg-row,
body.results-active .page-bg-pattern .bg-row {
/* Emboss: text colour matches the panel (#FAFAFA on every page now);
only the shadows render — white highlight top-left, faint dark
bottom-right. */
color: #FAFAFA;
text-shadow:
-1px -1px 0 rgba(255, 255, 255, 0.95),
1px 1px 0 rgba(0, 0, 0, 0.05);
}
.page-bg-pattern .bg-row span { display: inline-block; }
/* Background pattern uses the same #FAFAFA across every page now —
homepage, quiz, results all on the lighter panel. */
/* Rows slide in horizontally with alternating direction — odd rows
come from the left, even rows from the right — so the pattern weaves
itself together rather than fading in as one slab. The translateX
@@ -207,26 +201,12 @@ body.intro-done .page-bg-pattern .bg-row:nth-child(7) { animation-delay: 0.72s;
to { opacity: 1; transform: translateX(0); }
}
/* Lighter background on the quiz/results pages — FAFAFA matches the
white-paint cards, and the embossed text colour shifts to match so
only the highlight + shadow text-shadows render (same trick as the
homepage, just on a lighter base). */
body.quiz-active .page-bg-pattern,
body.results-active .page-bg-pattern {
background: #FAFAFA;
}
body.quiz-active .page-bg-pattern .bg-row,
body.results-active .page-bg-pattern .bg-row {
color: #FAFAFA;
}
/* (Per-page bg override removed — every page now uses #FAFAFA.) */
/* Sections that sit above the pattern need to live in a higher
stacking context. Position:relative + z-index:1 puts hero / quiz /
results / about content above the fixed pattern. */
.hero, .quiz-section, .results-section, .about-section {
position: relative;
z-index: 1;
}
/* No section-level stacking context needed — the pattern lives at
z-index:-1 so normal-flow sections paint above it automatically.
Avoiding a stacking context on .results-section also lets the
capture-modal (z-index:200) reach above the site-header. */
.hero-eyebrow {
position: relative; z-index: 1;
font-family: var(--font-body);