diff options
Diffstat (limited to 'lib/screens/SettingsScreen.svelte')
| -rw-r--r-- | lib/screens/SettingsScreen.svelte | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/lib/screens/SettingsScreen.svelte b/lib/screens/SettingsScreen.svelte index 3d502f1..434b9c9 100644 --- a/lib/screens/SettingsScreen.svelte +++ b/lib/screens/SettingsScreen.svelte @@ -2,6 +2,8 @@ import Slider from '@hollowdark/lib/components/Slider.svelte' import ToggleSwitch from '@hollowdark/lib/components/ToggleSwitch.svelte' import { ambientVolume, masterMuted } from '@hollowdark/lib/audio/state' + import { reduceMotion } from '@hollowdark/lib/display/state' + import { APP_VERSION_FULL } from '@hollowdark/lib/version/version' interface Props { onBack: () => void @@ -18,6 +20,10 @@ function setVolume(next: number): void { ambientVolume.set(next) } + + function setReduceMotion(next: boolean): void { + reduceMotion.set(next) + } </script> <section class="settings"> @@ -56,6 +62,35 @@ </div> </div> </section> + + <section class="group"> + <h2 class="group-label">Display</h2> + + <div class="row"> + <div class="row-label"> + <p class="row-name">Reduce motion</p> + <p class="row-hint"> + Hide the falling leaves and trim long transitions. Overrides + the system preference. + </p> + </div> + <ToggleSwitch + value={$reduceMotion} + label="Reduce motion" + onChange={setReduceMotion} + /> + </div> + </section> + + <section class="group"> + <h2 class="group-label">About</h2> + + <div class="about"> + <p class="about-title">Hollowdark</p> + <p class="about-line">Version {APP_VERSION_FULL}</p> + <p class="about-line">A literary life simulation.</p> + </div> + </section> </div> </section> @@ -163,4 +198,26 @@ min-width: 3.5ch; text-align: right; } + + .about { + display: flex; + flex-direction: column; + gap: var(--space-1); + padding: var(--space-3) 0; + } + + .about-title { + font-family: var(--font-body); + font-size: var(--text-md); + font-style: italic; + color: var(--color-text); + margin: 0; + } + + .about-line { + font-family: var(--font-ui); + font-size: var(--text-sm); + color: var(--color-text-tertiary); + margin: 0; + } </style> |