+1 -1

pkgs/web/src/components/Card/CardLayout.vue

··· 243 243 } 244 244 } 245 245 246 246 - .header-actions:hover .esc-hint, 246 246 + .header-actions:has(.close-button:hover) .esc-hint, 247 247 .esc-hint.is-visible { 248 248 opacity: 1; 249 249 transform: translateX(0);

+160 -143

pkgs/web/src/router/index.ts

··· 1 1 - import type { VNode } from 'vue' 2 2 - import { createRouter, createWebHistory } from 'vue-router' 1 1 + import type { VNode } from "vue"; 2 2 + import { createRouter, createWebHistory } from "vue-router"; 3 3 import { 4 4 - IconFolderOutlineRounded, 5 5 - IconLaptopWindowsOutlineRounded, 6 6 - IconAutoAwesomeMosaicOutline 7 7 - } from '@iconify-prerendered/vue-material-symbols' 4 4 + IconFolderOutlineRounded, 5 5 + IconLaptopWindowsOutlineRounded, 6 6 + IconAutoAwesomeMosaicOutline, 7 7 + } from "@iconify-prerendered/vue-material-symbols"; 8 8 9 9 - import { AccentColour } from '@/stores/theme' 10 10 - import { useUIStore } from '@/stores/ui' 9 9 + import { AccentColour } from "@/stores/theme"; 10 10 + import { useUIStore } from "@/stores/ui"; 11 11 12 12 - const HomeView = () => import('../views/HomeView.vue') 13 13 - const ProjectsView = () => import('../views/ProjectsView.vue') 14 14 - const UsesView = () => import('../views/UsesView.vue') 15 15 - const AboutView = () => import('../views/AboutView.vue') 16 16 - const GalleryView = () => import('../views/GalleryView.vue') 12 12 + const HomeView = () => import("../views/HomeView.vue"); 13 13 + const ProjectsView = () => import("../views/ProjectsView.vue"); 14 14 + const UsesView = () => import("../views/UsesView.vue"); 15 15 + const AboutView = () => import("../views/AboutView.vue"); 16 16 + const GalleryView = () => import("../views/GalleryView.vue"); 17 17 + const SettingsView = () => import("../views/SettingsView.vue"); 17 18 18 18 - declare module 'vue-router' { 19 19 - interface RouteMeta { 20 20 - title?: string 21 21 - icon?: VNode 22 22 - excerpt?: string 23 23 - gridArea?: string 24 24 - bg?: AccentColour 25 25 - isCard?: boolean 26 26 - } 19 19 + declare module "vue-router" { 20 20 + interface RouteMeta { 21 21 + title?: string; 22 22 + icon?: VNode; 23 23 + excerpt?: string; 24 24 + gridArea?: string; 25 25 + bg?: AccentColour; 26 26 + isCard?: boolean; 27 27 + } 27 28 } 28 29 29 29 - const FocusMap = new Map<string, string>() 30 30 + const FocusMap = new Map<string, string>(); 30 31 31 32 function isFocusable(el: HTMLElement): boolean { 32 32 - const focusableSelectors = 'a[href],button,textarea,input,select,[tabindex]' 33 33 - return el.matches(focusableSelectors) 33 33 + const focusableSelectors = "a[href],button,textarea,input,select,[tabindex]"; 34 34 + return el.matches(focusableSelectors); 34 35 } 35 36 36 37 function makeRestoreSelectorFor(el: Element | null): string | null { 37 37 - if (!el || !(el instanceof HTMLElement)) return null 38 38 - if (el.id) return `#${CSS.escape(el.id)}` 38 38 + if (!el || !(el instanceof HTMLElement)) return null; 39 39 + if (el.id) return `#${CSS.escape(el.id)}`; 39 40 40 40 - const selectorParts: string[] = [] 41 41 - let currentEl: HTMLElement | null = el 41 41 + const selectorParts: string[] = []; 42 42 + let currentEl: HTMLElement | null = el; 42 43 43 43 - while (currentEl && currentEl !== document.body) { 44 44 - let part = currentEl.tagName.toLowerCase() 44 44 + while (currentEl && currentEl !== document.body) { 45 45 + let part = currentEl.tagName.toLowerCase(); 45 46 46 46 - if (currentEl.classList.length > 0) { 47 47 - part += '.' + Array.from(currentEl.classList) 48 48 - .map(cls => CSS.escape(cls)) 49 49 - .join('.') 50 50 - } 47 47 + if (currentEl.classList.length > 0) { 48 48 + part += 49 49 + "." + 50 50 + Array.from(currentEl.classList) 51 51 + .map((cls) => CSS.escape(cls)) 52 52 + .join("."); 53 53 + } 51 54 52 52 - const parent = currentEl.parentElement as HTMLElement 53 53 - if (parent) { 54 54 - const siblings = Array.from(parent.children) 55 55 - .filter(child => child.tagName === currentEl!.tagName) 55 55 + const parent = currentEl.parentElement as HTMLElement; 56 56 + if (parent) { 57 57 + const siblings = Array.from(parent.children).filter( 58 58 + (child) => child.tagName === currentEl!.tagName, 59 59 + ); 56 60 57 57 - if (siblings.length > 1) { 58 58 - const index = siblings.indexOf(currentEl) + 1 59 59 - part += `:nth-of-type(${index})` 60 60 - } 61 61 - } 61 61 + if (siblings.length > 1) { 62 62 + const index = siblings.indexOf(currentEl) + 1; 63 63 + part += `:nth-of-type(${index})`; 64 64 + } 65 65 + } 62 66 63 63 - selectorParts.unshift(part) 64 64 - if (isFocusable(currentEl)) break 67 67 + selectorParts.unshift(part); 68 68 + if (isFocusable(currentEl)) break; 65 69 66 66 - currentEl = parent 67 67 - } 70 70 + currentEl = parent; 71 71 + } 68 72 69 69 - const selector = selectorParts.join(' > ') 70 70 - return isFocusable(el) ? selector : null 73 73 + const selector = selectorParts.join(" > "); 74 74 + return isFocusable(el) ? selector : null; 71 75 } 72 76 73 77 function focusElementBySelector(selector?: string | null): boolean { 74 74 - if (!selector) return false 78 78 + if (!selector) return false; 75 79 76 76 - const el = document.querySelector(selector) as HTMLElement | null 77 77 - if (!el) return false 80 80 + const el = document.querySelector(selector) as HTMLElement | null; 81 81 + if (!el) return false; 78 82 79 79 - const hadTab = el.hasAttribute('tabindex') 80 80 - const prevTab = el.getAttribute('tabindex') 83 83 + const hadTab = el.hasAttribute("tabindex"); 84 84 + const prevTab = el.getAttribute("tabindex"); 81 85 82 82 - if (!el.matches('a[href],button,textarea,input,select,[tabindex]')) el.setAttribute('tabindex', '-1') 83 83 - el.focus({ preventScroll: false }) 86 86 + if (!el.matches("a[href],button,textarea,input,select,[tabindex]")) 87 87 + el.setAttribute("tabindex", "-1"); 88 88 + el.focus({ preventScroll: false }); 84 89 85 85 - if (!hadTab) el.removeAttribute('tabindex') 86 86 - else if (prevTab !== null) el.setAttribute('tabindex', prevTab) 90 90 + if (!hadTab) el.removeAttribute("tabindex"); 91 91 + else if (prevTab !== null) el.setAttribute("tabindex", prevTab); 87 92 88 88 - return true 93 93 + return true; 89 94 } 90 95 91 96 const router = createRouter({ 92 92 - history: createWebHistory(import.meta.env.BASE_URL), 93 93 - routes: [ 94 94 - { 95 95 - path: '/', 96 96 - name: 'home', 97 97 - component: HomeView 98 98 - }, 99 99 - { 100 100 - path: '/about', 101 101 - name: 'about', 102 102 - component: AboutView, 103 103 - meta: { 104 104 - title: 'about', 105 105 - bg: AccentColour.Rosewater 106 106 - } 107 107 - }, 108 108 - { 109 109 - path: '/projects', 110 110 - name: 'projects', 111 111 - component: ProjectsView, 112 112 - meta: { 113 113 - isCard: true, 114 114 - title: 'projects', 115 115 - icon: IconFolderOutlineRounded(), 116 116 - gridArea: 'area-projects', 117 117 - bg: AccentColour.Flamingo 118 118 - } 119 119 - }, 120 120 - { 121 121 - path: '/uses', 122 122 - name: 'uses', 123 123 - component: UsesView, 124 124 - meta: { 125 125 - isCard: true, 126 126 - title: '/uses', 127 127 - icon: IconLaptopWindowsOutlineRounded(), 128 128 - gridArea: 'area-uses', 129 129 - bg: AccentColour.Sky 130 130 - } 131 131 - }, 132 132 - { 133 133 - path: '/gallery', 134 134 - name: 'gallery', 135 135 - component: GalleryView, 136 136 - meta: { 137 137 - isCard: true, 138 138 - title: 'gallery', 139 139 - icon: IconAutoAwesomeMosaicOutline(), 140 140 - gridArea: 'area-gallery', 141 141 - bg: AccentColour.Lavender 142 142 - } 143 143 - } 144 144 - ], 145 145 - scrollBehavior() { 146 146 - return { top: 0, behavior: 'smooth' } 147 147 - } 148 148 - }) 97 97 + history: createWebHistory(import.meta.env.BASE_URL), 98 98 + routes: [ 99 99 + { 100 100 + path: "/", 101 101 + name: "home", 102 102 + component: HomeView, 103 103 + }, 104 104 + { 105 105 + path: "/about", 106 106 + name: "about", 107 107 + component: AboutView, 108 108 + meta: { 109 109 + title: "about", 110 110 + bg: AccentColour.Rosewater, 111 111 + }, 112 112 + }, 113 113 + { 114 114 + path: "/projects", 115 115 + name: "projects", 116 116 + component: ProjectsView, 117 117 + meta: { 118 118 + isCard: true, 119 119 + title: "projects", 120 120 + icon: IconFolderOutlineRounded(), 121 121 + gridArea: "area-projects", 122 122 + bg: AccentColour.Flamingo, 123 123 + }, 124 124 + }, 125 125 + { 126 126 + path: "/settings", 127 127 + name: "settings", 128 128 + component: SettingsView, 129 129 + meta: { 130 130 + isCard: false, 131 131 + title: "settings", 132 132 + icon: IconFolderOutlineRounded(), 133 133 + gridArea: "area-projects", 134 134 + bg: AccentColour.Flamingo, 135 135 + }, 136 136 + }, 137 137 + { 138 138 + path: "/uses", 139 139 + name: "uses", 140 140 + component: UsesView, 141 141 + meta: { 142 142 + isCard: true, 143 143 + title: "/uses", 144 144 + icon: IconLaptopWindowsOutlineRounded(), 145 145 + gridArea: "area-uses", 146 146 + bg: AccentColour.Sky, 147 147 + }, 148 148 + }, 149 149 + { 150 150 + path: "/gallery", 151 151 + name: "gallery", 152 152 + component: GalleryView, 153 153 + meta: { 154 154 + isCard: true, 155 155 + title: "gallery", 156 156 + icon: IconAutoAwesomeMosaicOutline(), 157 157 + gridArea: "area-gallery", 158 158 + bg: AccentColour.Lavender, 159 159 + }, 160 160 + }, 161 161 + ], 162 162 + scrollBehavior() { 163 163 + return { top: 0, behavior: "smooth" }; 164 164 + }, 165 165 + }); 149 166 150 167 router.beforeEach((_to, from, next) => { 151 151 - const active = document.activeElement as Element | null 168 168 + const active = document.activeElement as Element | null; 152 169 153 153 - if (active && from.fullPath) { 154 154 - const selector = makeRestoreSelectorFor(active) 155 155 - if (selector) { 156 156 - console.debug(`saving focus for ${from.fullPath} as ${selector}`) 157 157 - FocusMap.set(from.fullPath, selector) 158 158 - } 159 159 - } 170 170 + if (active && from.fullPath) { 171 171 + const selector = makeRestoreSelectorFor(active); 172 172 + if (selector) { 173 173 + console.debug(`saving focus for ${from.fullPath} as ${selector}`); 174 174 + FocusMap.set(from.fullPath, selector); 175 175 + } 176 176 + } 160 177 161 161 - next() 162 162 - }) 178 178 + next(); 179 179 + }); 163 180 164 181 router.afterEach((to) => { 165 165 - const ui = useUIStore() 166 166 - document.title = `vt3e - ${to.meta.title || to.name?.toString().toLowerCase()}` 182 182 + const ui = useUIStore(); 183 183 + document.title = `vt3e - ${to.meta.title || to.name?.toString().toLowerCase()}`; 167 184 168 168 - if (to.path === '/') ui.setBack() 169 169 - else if (to.meta.bg) ui.setForward(to.meta.bg) 185 185 + if (to.path === "/") ui.setBack(); 186 186 + else if (to.meta.bg) ui.setForward(to.meta.bg); 170 187 171 171 - const selector = FocusMap.get(to.fullPath) 172 172 - if (selector) { 173 173 - requestAnimationFrame(() => { 174 174 - if (focusElementBySelector(selector)) { 175 175 - console.debug(`restoring focus for ${to.fullPath} to ${selector}`) 176 176 - FocusMap.delete(to.fullPath) 177 177 - } 178 178 - }) 179 179 - } 180 180 - }) 188 188 + const selector = FocusMap.get(to.fullPath); 189 189 + if (selector) { 190 190 + requestAnimationFrame(() => { 191 191 + if (focusElementBySelector(selector)) { 192 192 + console.debug(`restoring focus for ${to.fullPath} to ${selector}`); 193 193 + FocusMap.delete(to.fullPath); 194 194 + } 195 195 + }); 196 196 + } 197 197 + }); 181 198 182 182 - export default router 199 199 + export default router;

+58 -3

pkgs/web/src/stores/theme.ts

··· 1 1 import { defineStore } from "pinia"; 2 2 - import { ref, computed, watch } from "vue"; 3 3 - import { useEnvironmentStore } from "./environment"; 2 2 + import { computed, ref, watch } from "vue"; 4 3 5 4 import KEYS from "@/utils/keys"; 5 5 + import { useEnvironmentStore } from "./environment"; 6 6 7 7 export interface ThemeDefinition { 8 8 id: string; ··· 177 177 const currentMode = ref<"light" | "dark">("dark"); 178 178 const preferredAccent = ref<AccentColour>(AccentColour.Mauve); 179 179 180 180 + const squareMode = ref(false); 181 181 + const dyslexicFont = ref(false); 182 182 + const transitionsEnabled = ref(true); 183 183 + 180 184 const activeTheme = computed(() => { 181 185 let targetId: string; 182 186 ··· 193 197 194 198 return themes.find((t) => t.id === targetId) || mocha; 195 199 }); 200 200 + 201 201 + function setSquareMode(val: boolean) { 202 202 + squareMode.value = val; 203 203 + } 204 204 + function setDyslexicFont(val: boolean) { 205 205 + dyslexicFont.value = val; 206 206 + } 207 207 + function setTransitionsEnabled(val: boolean) { 208 208 + transitionsEnabled.value = val; 209 209 + } 196 210 197 211 function setFollowSystem(val: boolean) { 198 212 followSystem.value = val; 199 213 } 214 214 + function setCurrentMode(mode: "light" | "dark") { 215 215 + currentMode.value = mode; 216 216 + } 200 217 201 218 function setPreferredLight(themeId: string) { 202 219 if (themes.find((t) => t.id === themeId && t.type === "light")) { ··· 236 253 if (metaThemeColor) { 237 254 metaThemeColor.setAttribute("content", `hsl(${theme.variables.mantle})`); 238 255 } 256 256 + 257 257 + const body = document.body; 258 258 + if (squareMode.value) body.classList.add("square"); 259 259 + else body.classList.remove("square"); 260 260 + 261 261 + if (dyslexicFont.value) body.classList.add("dyslexic"); 262 262 + else body.classList.remove("dyslexic"); 263 263 + 264 264 + if (transitionsEnabled.value) body.classList.remove("no-transitions"); 265 265 + else body.classList.add("no-transitions"); 239 266 } 240 267 241 268 function init() { 269 269 + const storedBoxy = localStorage.getItem(STORAGE_KEYS.BOXY_MODE); 270 270 + const storedDyslexic = localStorage.getItem(STORAGE_KEYS.DYSLEXIC_FONT); 271 271 + const storedTransitions = localStorage.getItem(STORAGE_KEYS.TRANSITIONS_ENABLED); 272 272 + if (storedBoxy !== null) squareMode.value = storedBoxy === "true"; 273 273 + if (storedDyslexic !== null) dyslexicFont.value = storedDyslexic === "true"; 274 274 + if (storedTransitions !== null) transitionsEnabled.value = storedTransitions === "true"; 275 275 + 242 276 const storedFollow = localStorage.getItem(STORAGE_KEYS.FOLLOW_SYSTEM_THEME); 243 277 if (storedFollow !== null) followSystem.value = storedFollow === "true"; 244 278 ··· 286 320 watch(preferredAccent, (val) => 287 321 localStorage.setItem(STORAGE_KEYS.ACCENT_COLOUR, val), 288 322 ); 323 323 + watch(squareMode, (val) => 324 324 + localStorage.setItem(STORAGE_KEYS.BOXY_MODE, String(val)), 325 325 + 326 326 + ); 327 327 + watch(dyslexicFont, (val) => 328 328 + localStorage.setItem(STORAGE_KEYS.DYSLEXIC_FONT, String(val)), 329 329 + ); 330 330 + watch(transitionsEnabled, (val) => { 331 331 + localStorage.setItem( 332 332 + STORAGE_KEYS.TRANSITIONS_ENABLED, 333 333 + String(val), 334 334 + ); 335 335 + }) 289 336 290 337 watch( 291 291 - [activeTheme, preferredAccent, () => env.prefersDarkScheme], 338 338 + [activeTheme, preferredAccent, () => env.prefersDarkScheme, squareMode, dyslexicFont, transitionsEnabled], 292 339 () => { 293 340 applyTheme(); 294 341 }, ··· 297 344 } 298 345 299 346 return { 347 347 + setSquareMode, 348 348 + setDyslexicFont, 349 349 + setTransitionsEnabled, 350 350 + squareMode, 351 351 + dyslexicFont, 352 352 + transitionsEnabled, 353 353 + 300 354 themes, 301 355 AccentColours, 302 356 followSystem, ··· 304 358 preferredDark, 305 359 preferredAccent, 306 360 activeTheme, 361 361 + setCurrentMode, 307 362 setFollowSystem, 308 363 setPreferredLight, 309 364 setPreferredDark,

+21

pkgs/web/src/styles/main.scss

··· 93 93 text-rendering: optimizeLegibility; 94 94 -webkit-font-smoothing: antialiased; 95 95 overflow-y: hidden; 96 96 + 97 97 + &.dyslexic { 98 98 + font-family: 99 99 + 'OpenDyslexic', 100 100 + -apple-system, 101 101 + BlinkMacSystemFont, 102 102 + 'Segoe UI', 103 103 + Roboto, 104 104 + 'Helvetica Neue', 105 105 + Arial, 106 106 + sans-serif, 107 107 + 'Apple Color Emoji', 108 108 + 'Segoe UI Emoji', 109 109 + 'Segoe UI Symbol'; 110 110 + } 111 111 + &.square * { 112 112 + border-radius: 0 !important; 113 113 + } 114 114 + &.no-transitions * { 115 115 + transition: none !important; 116 116 + } 96 117 } 97 118 98 119 ::selection {

+3

pkgs/web/src/utils/keys.ts

··· 18 18 'PREFERRED_DARK_THEME', 19 19 'CURRENT_MODE', 20 20 'ACCENT_COLOUR', 21 21 + 'BOXY_MODE', 22 22 + 'DYSLEXIC_FONT', 23 23 + 'TRANSITIONS_ENABLED', 21 24 ]) 22 25 } 23 26

+34 -20

pkgs/web/src/views/HomeView.vue

··· 1 1 <script setup lang="ts"> 2 2 import { computed } from 'vue' 3 3 import { useRouter } from 'vue-router' 4 4 - import { IconArrowOutwardRounded } from '@iconify-prerendered/vue-material-symbols' 4 4 + import { 5 5 + IconArrowOutwardRounded, 6 6 + IconSettingsRounded, 7 7 + } from '@iconify-prerendered/vue-material-symbols' 5 8 6 9 import SvgComponent from '@/components/SvgComponent.vue' 7 10 import ImageComponent from '@/components/ImageComponent.vue' ··· 42 45 </div> 43 46 44 47 <div class="profile-footer"> 45 45 - <div class="social-row"> 48 48 + <div class="row social-row"> 46 49 <a 47 50 v-for="link in socials" 48 51 :key="link.label" ··· 57 60 </a> 58 61 </div> 59 62 60 60 - <RouterLink to="/about" class="about-btn"> 61 61 - <span>more about me</span> 62 62 - <IconArrowOutwardRounded class="icon" /> 63 63 - </RouterLink> 63 63 + <div class="row"> 64 64 + <RouterLink to="/settings" class="social-pill" title="settings"> 65 65 + <IconSettingsRounded class="social-pill_icon" /> 66 66 + </RouterLink> 67 67 + <RouterLink to="/about" class="about-btn"> 68 68 + <span>more about me</span> 69 69 + <IconArrowOutwardRounded class="icon" /> 70 70 + </RouterLink> 71 71 + </div> 64 72 </div> 65 73 </div> 66 74 ··· 262 270 margin-top: 1rem; 263 271 } 264 272 273 273 + .row { 274 274 + display: flex; 275 275 + gap: 0.5rem; 276 276 + align-items: center; 277 277 + } 278 278 + 265 279 .social-row { 266 280 display: flex; 267 281 gap: 0.5rem; 282 282 + } 268 283 269 269 - .social-pill { 270 270 - display: flex; 271 271 - align-items: center; 272 272 - justify-content: center; 273 273 - background-clip: padding-box; 274 274 - width: 2.8rem; 275 275 - height: 2.8rem; 276 276 - border-radius: 50%; 277 277 - font-size: 1.25rem; 284 284 + .social-pill { 285 285 + display: flex; 286 286 + align-items: center; 287 287 + justify-content: center; 288 288 + background-clip: padding-box; 289 289 + width: 2.8rem; 290 290 + height: 2.8rem; 291 291 + border-radius: 50%; 292 292 + font-size: 1.25rem; 278 293 279 279 - &_icon { 280 280 - width: 1.5rem; 281 281 - height: 1.5rem; 282 282 - display: block; 283 283 - } 294 294 + &_icon { 295 295 + width: 1.5rem; 296 296 + height: 1.5rem; 297 297 + display: block; 284 298 } 285 299 } 286 300

+638

pkgs/web/src/views/SettingsView.vue

··· 1 1 + <script setup lang="ts"> 2 2 + import { IconCheckRounded } from '@iconify-prerendered/vue-material-symbols' 3 3 + import { computed } from 'vue' 4 4 + 5 5 + import CardLayout from '@/components/Card/CardLayout.vue' 6 6 + import { useThemeStore, AccentColour, themes } from '@/stores/theme' 7 7 + import { useEnvironmentStore } from '@/stores/environment' 8 8 + 9 9 + const themeStore = useThemeStore() 10 10 + const env = useEnvironmentStore() 11 11 + 12 12 + const lightThemes = computed(() => themes.filter((t) => t.type === 'light')) 13 13 + const darkThemes = computed(() => themes.filter((t) => t.type === 'dark')) 14 14 + 15 15 + const effectiveMode = computed(() => { 16 16 + if (themeStore.followSystem) return env.prefersDarkScheme ? 'dark' : 'light' 17 17 + return themeStore.activeTheme.type 18 18 + }) 19 19 + 20 20 + const accentColours = Object.values(AccentColour) 21 21 + </script> 22 22 + 23 23 + <template> 24 24 + <CardLayout title="settings"> 25 25 + <template #intro> 26 26 + <p>customise the look of this site.</p> 27 27 + </template> 28 28 + 29 29 + <div class="settings-sections"> 30 30 + <section class="settings-section"> 31 31 + <div class="section-header"> 32 32 + <div class="title-group"> 33 33 + <span class="badge">appearance</span> 34 34 + <h2 class="section-title">system theme</h2> 35 35 + </div> 36 36 + <p class="section-description"> 37 37 + when enabled, the theme will automatically switch between light and dark based on your 38 38 + system preferences. 39 39 + </p> 40 40 + </div> 41 41 + <div class="section-content"> 42 42 + <button 43 43 + class="toggle-button" 44 44 + :class="{ active: themeStore.followSystem }" 45 45 + @click="themeStore.setFollowSystem(!themeStore.followSystem)" 46 46 + :aria-pressed="themeStore.followSystem" 47 47 + role="switch" 48 48 + > 49 49 + <span class="toggle-track"> 50 50 + <span class="toggle-thumb" /> 51 51 + </span> 52 52 + <span class="toggle-label"> follow system theme </span> 53 53 + </button> 54 54 + 55 55 + <button 56 56 + class="toggle-button" 57 57 + :class="{ active: effectiveMode === 'dark' }" 58 58 + @click="() => themeStore.setCurrentMode(effectiveMode === 'light' ? 'dark' : 'light')" 59 59 + :aria-pressed="themeStore.activeTheme.type === 'dark'" 60 60 + role="switch" 61 61 + :disabled="themeStore.followSystem" 62 62 + > 63 63 + <span class="toggle-track"> 64 64 + <span class="toggle-thumb" /> 65 65 + </span> 66 66 + <span class="toggle-label">dark mode</span> 67 67 + </button> 68 68 + </div> 69 69 + </section> 70 70 + 71 71 + <section class="settings-section"> 72 72 + <div class="section-header"> 73 73 + <div class="title-group"> 74 74 + <span class="badge">appearnce</span> 75 75 + <h2 class="section-title">other</h2> 76 76 + </div> 77 77 + <p class="section-description"></p> 78 78 + </div> 79 79 + <div class="section-content"> 80 80 + <button 81 81 + class="toggle-button" 82 82 + :class="{ active: themeStore.squareMode }" 83 83 + @click="themeStore.setSquareMode(!themeStore.squareMode)" 84 84 + :aria-pressed="themeStore.squareMode" 85 85 + role="switch" 86 86 + > 87 87 + <span class="toggle-track"> 88 88 + <span class="toggle-thumb" /> 89 89 + </span> 90 90 + <span class="toggle-label"> boxy corners </span> 91 91 + </button> 92 92 + 93 93 + <button 94 94 + class="toggle-button" 95 95 + :class="{ active: themeStore.dyslexicFont }" 96 96 + @click="() => themeStore.setDyslexicFont(!themeStore.dyslexicFont)" 97 97 + :aria-pressed="themeStore.dyslexicFont" 98 98 + role="switch" 99 99 + > 100 100 + <span class="toggle-track"> 101 101 + <span class="toggle-thumb" /> 102 102 + </span> 103 103 + <span class="toggle-label">use open dyslexic</span> 104 104 + </button> 105 105 + 106 106 + <button 107 107 + class="toggle-button" 108 108 + :class="{ active: themeStore.transitionsEnabled }" 109 109 + @click="() => themeStore.setTransitionsEnabled(!themeStore.transitionsEnabled)" 110 110 + :aria-pressed="themeStore.transitionsEnabled" 111 111 + role="switch" 112 112 + > 113 113 + <span class="toggle-track"> 114 114 + <span class="toggle-thumb" /> 115 115 + </span> 116 116 + <span class="toggle-label">enable transitions</span> 117 117 + </button> 118 118 + </div> 119 119 + </section> 120 120 + 121 121 + <section 122 122 + class="settings-section" 123 123 + :class="{ disabled: effectiveMode !== 'light' }" 124 124 + :inert="effectiveMode !== 'light'" 125 125 + > 126 126 + <div class="section-header"> 127 127 + <div class="title-group"> 128 128 + <span class="badge">appearance</span> 129 129 + <h2 class="section-title">light theme</h2> 130 130 + </div> 131 131 + <p class="section-description">choose which theme to use in light mode.</p> 132 132 + </div> 133 133 + <div class="section-content"> 134 134 + <div class="theme-picker" role="radiogroup" aria-label="Light theme selection"> 135 135 + <button 136 136 + v-for="theme in lightThemes" 137 137 + :key="theme.id" 138 138 + class="theme-option" 139 139 + :class="{ selected: themeStore.preferredLight === theme.id }" 140 140 + :aria-checked="themeStore.preferredLight === theme.id" 141 141 + role="radio" 142 142 + @click="themeStore.setPreferredLight(theme.id)" 143 143 + > 144 144 + <div 145 145 + class="theme-preview" 146 146 + :style="{ 147 147 + '--preview-base': theme.variables.base, 148 148 + '--preview-surface0': theme.variables.surface0, 149 149 + '--preview-surface1': theme.variables.surface1, 150 150 + '--preview-surface2': theme.variables.surface2, 151 151 + '--preview-text': theme.variables.text, 152 152 + '--preview-accent': 153 153 + theme.variables[themeStore.preferredAccent] || theme.variables.mauve, 154 154 + '--preview-subtext0': theme.variables.subtext0, 155 155 + }" 156 156 + > 157 157 + <div class="preview-bar"> 158 158 + <div class="preview-title" /> 159 159 + <div class="preview-dot" /> 160 160 + </div> 161 161 + <div class="preview-body"> 162 162 + <div class="preview-line wide" /> 163 163 + <div class="preview-line medium" /> 164 164 + <div class="preview-line narrow" /> 165 165 + </div> 166 166 + </div> 167 167 + <span class="theme-name">{{ theme.name }}</span> 168 168 + </button> 169 169 + </div> 170 170 + </div> 171 171 + </section> 172 172 + 173 173 + <section 174 174 + class="settings-section" 175 175 + :class="{ disabled: effectiveMode !== 'dark' }" 176 176 + :inert="effectiveMode !== 'dark'" 177 177 + > 178 178 + <div class="section-header"> 179 179 + <div class="title-group"> 180 180 + <span class="badge">appearance</span> 181 181 + <h2 class="section-title">dark theme</h2> 182 182 + </div> 183 183 + <p class="section-description">choose which theme to use in dark mode.</p> 184 184 + </div> 185 185 + <div class="section-content"> 186 186 + <div class="theme-picker" role="radiogroup" aria-label="Dark theme selection"> 187 187 + <button 188 188 + v-for="theme in darkThemes" 189 189 + :key="theme.id" 190 190 + class="theme-option" 191 191 + :class="{ selected: themeStore.preferredDark === theme.id }" 192 192 + :aria-checked="themeStore.preferredDark === theme.id" 193 193 + role="radio" 194 194 + @click="themeStore.setPreferredDark(theme.id)" 195 195 + > 196 196 + <div 197 197 + class="theme-preview" 198 198 + :style="{ 199 199 + '--preview-base': theme.variables.base, 200 200 + '--preview-surface0': theme.variables.surface0, 201 201 + '--preview-surface1': theme.variables.surface1, 202 202 + '--preview-surface2': theme.variables.surface2, 203 203 + '--preview-text': theme.variables.text, 204 204 + '--preview-accent': 205 205 + theme.variables[themeStore.preferredAccent] || theme.variables.mauve, 206 206 + '--preview-subtext0': theme.variables.subtext0, 207 207 + }" 208 208 + > 209 209 + <div class="preview-bar"> 210 210 + <div class="preview-title" /> 211 211 + <div class="preview-dot" /> 212 212 + </div> 213 213 + <div class="preview-body"> 214 214 + <div class="preview-line wide" /> 215 215 + <div class="preview-line medium" /> 216 216 + <div class="preview-line narrow" /> 217 217 + </div> 218 218 + </div> 219 219 + <span class="theme-name">{{ theme.name }}</span> 220 220 + </button> 221 221 + </div> 222 222 + </div> 223 223 + </section> 224 224 + 225 225 + <!-- Accent Colour --> 226 226 + <section class="settings-section"> 227 227 + <div class="section-header"> 228 228 + <div class="title-group"> 229 229 + <span class="badge">appearance</span> 230 230 + <h2 class="section-title">accent colour</h2> 231 231 + </div> 232 232 + <p class="section-description">choose the accent colour used throughout the site.</p> 233 233 + </div> 234 234 + <div class="section-content"> 235 235 + <div class="accent-picker" role="radiogroup" aria-label="Accent colour selection"> 236 236 + <button 237 237 + v-for="colour in accentColours" 238 238 + :key="colour" 239 239 + class="accent-swatch" 240 240 + :class="{ selected: themeStore.preferredAccent === colour }" 241 241 + :style="{ '--swatch-colour': `var(--${colour})` }" 242 242 + :aria-checked="themeStore.preferredAccent === colour" 243 243 + :aria-label="colour" 244 244 + :title="colour" 245 245 + role="radio" 246 246 + @click="themeStore.setAccent(colour)" 247 247 + > 248 248 + <span class="swatch-fill" /> 249 249 + <span class="swatch-check" aria-hidden="true"> 250 250 + <IconCheckRounded /> 251 251 + </span> 252 252 + </button> 253 253 + </div> 254 254 + <p class="accent-label"> 255 255 + selected: <strong>{{ themeStore.preferredAccent }}</strong> 256 256 + </p> 257 257 + </div> 258 258 + </section> 259 259 + </div> 260 260 + </CardLayout> 261 261 + </template> 262 262 + 263 263 + <style lang="scss" scoped> 264 264 + @use '@/styles/variables.scss' as *; 265 265 + 266 266 + .settings-sections { 267 267 + display: flex; 268 268 + flex-direction: column; 269 269 + gap: 0.25rem; 270 270 + } 271 271 + 272 272 + .settings-section { 273 273 + display: grid; 274 274 + grid-template-columns: 40% 60%; 275 275 + overflow: hidden; 276 276 + background-color: hsla(var(--surface0) / 1); 277 277 + padding: 0.75rem; 278 278 + gap: 1rem; 279 279 + border-radius: 0.5rem; 280 280 + 281 281 + &:first-child { 282 282 + border-radius: 1rem 1rem 0.5rem 0.5rem; 283 283 + } 284 284 + &:last-child { 285 285 + border-radius: 0.5rem 0.5rem 1rem 1rem; 286 286 + } 287 287 + 288 288 + &.disabled { 289 289 + opacity: 0.5; 290 290 + pointer-events: none; 291 291 + } 292 292 + 293 293 + .section-header { 294 294 + .title-group { 295 295 + display: flex; 296 296 + flex-direction: column; 297 297 + 298 298 + span.badge { 299 299 + align-self: flex-start; 300 300 + background-color: hsla(var(--accent) / 0.1); 301 301 + color: hsl(var(--accent)); 302 302 + padding: 0.25rem 0.5rem; 303 303 + font-size: 0.75rem; 304 304 + font-weight: 700; 305 305 + border-radius: 5rem; 306 306 + user-select: none; 307 307 + } 308 308 + 309 309 + h2.section-title { 310 310 + font-size: 1.5rem; 311 311 + font-weight: 900; 312 312 + } 313 313 + } 314 314 + .section-description { 315 315 + font-size: 0.8rem; 316 316 + color: hsl(var(--subtext1)); 317 317 + 318 318 + .active-indicator { 319 319 + display: inline-block; 320 320 + font-size: 0.75rem; 321 321 + font-weight: 700; 322 322 + color: hsl(var(--green)); 323 323 + background: hsla(var(--green) / 0.1); 324 324 + padding: 0.1rem 0.5rem; 325 325 + border-radius: 5rem; 326 326 + margin-left: 0.25rem; 327 327 + vertical-align: middle; 328 328 + } 329 329 + } 330 330 + } 331 331 + 332 332 + .section-content { 333 333 + display: flex; 334 334 + flex-direction: column; 335 335 + justify-content: flex-end; 336 336 + gap: 0.5rem; 337 337 + align-items: flex-start; 338 338 + } 339 339 + 340 340 + @media (max-width: 800px) { 341 341 + grid-template-columns: 1fr; 342 342 + gap: 0.5rem; 343 343 + } 344 344 + } 345 345 + 346 346 + .toggle-button { 347 347 + display: inline-flex; 348 348 + align-items: center; 349 349 + gap: 0.75rem; 350 350 + background: none; 351 351 + border: none; 352 352 + cursor: pointer; 353 353 + font-family: inherit; 354 354 + font-size: 1rem; 355 355 + color: hsl(var(--text)); 356 356 + border-radius: 0.75rem; 357 357 + outline: none; 358 358 + 359 359 + &:disabled { 360 360 + opacity: 0.5; 361 361 + cursor: not-allowed; 362 362 + } 363 363 + 364 364 + &:hover .toggle-track { 365 365 + box-shadow: 0 0 0 0.2rem hsla(var(--accent) / 0.3); 366 366 + } 367 367 + 368 368 + &:focus-visible .toggle-track { 369 369 + box-shadow: 0 0 0 0.2rem hsla(var(--accent) / 1); 370 370 + } 371 371 + 372 372 + .toggle-track { 373 373 + position: relative; 374 374 + width: 3rem; 375 375 + height: 1.75rem; 376 376 + background: hsla(var(--surface2) / 0.8); 377 377 + border-radius: 1rem; 378 378 + flex-shrink: 0; 379 379 + 380 380 + transition-timing-function: $ease-spring; 381 381 + transition-duration: 0.3s; 382 382 + } 383 383 + 384 384 + .toggle-thumb { 385 385 + position: absolute; 386 386 + top: 0.2rem; 387 387 + left: 0.2rem; 388 388 + width: 1.35rem; 389 389 + height: 1.35rem; 390 390 + background: hsl(var(--base)); 391 391 + border-radius: 50%; 392 392 + box-shadow: 0 1px 3px hsla(var(--crust) / 0.2); 393 393 + 394 394 + transition-timing-function: $ease-spring; 395 395 + transition-duration: 0.3s; 396 396 + } 397 397 + 398 398 + .toggle-label { 399 399 + font-weight: 600; 400 400 + color: hsl(var(--subtext0)); 401 401 + user-select: none; 402 402 + } 403 403 + 404 404 + &.active { 405 405 + .toggle-track { 406 406 + background: hsl(var(--accent)); 407 407 + } 408 408 + .toggle-thumb { 409 409 + transform: translateX(1.25rem); 410 410 + } 411 411 + .toggle-label { 412 412 + color: hsl(var(--text)); 413 413 + } 414 414 + } 415 415 + } 416 416 + 417 417 + .current-hint { 418 418 + font-size: 0.875rem; 419 419 + color: hsl(var(--subtext0)); 420 420 + padding-left: 0.5rem; 421 421 + 422 422 + strong { 423 423 + font-weight: 700; 424 424 + color: hsl(var(--text)); 425 425 + } 426 426 + } 427 427 + 428 428 + .theme-picker { 429 429 + display: flex; 430 430 + flex-wrap: wrap; 431 431 + gap: 1rem; 432 432 + 433 433 + .theme-option { 434 434 + display: flex; 435 435 + flex-direction: column; 436 436 + align-items: center; 437 437 + gap: 0.5rem; 438 438 + padding: 0.4rem; 439 439 + background: none; 440 440 + border: none; 441 441 + cursor: pointer; 442 442 + font-family: inherit; 443 443 + border-radius: 1rem; 444 444 + outline: none; 445 445 + 446 446 + box-shadow: 0 0 0 0.15rem transparent; 447 447 + transition-timing-function: $ease-spring; 448 448 + transition-duration: 0.3s; 449 449 + 450 450 + box-shadow: 0 0 0 0.2rem hsla(var(--accent) / 0.05); 451 451 + 452 452 + &:hover, 453 453 + &:focus-visible { 454 454 + box-shadow: 0 0 0 0.2rem hsla(var(--accent) / 0.2); 455 455 + background: hsla(var(--overlay1) / 0.2); 456 456 + } 457 457 + 458 458 + &:active, 459 459 + &.active { 460 460 + transform: scale(0.95); 461 461 + } 462 462 + 463 463 + &.selected { 464 464 + box-shadow: 0 0 0 0.2rem hsla(var(--accent) / 1); 465 465 + background: hsla(var(--accent) / 0.1); 466 466 + 467 467 + .theme-name { 468 468 + color: hsl(var(--accent)); 469 469 + font-weight: 800; 470 470 + } 471 471 + } 472 472 + 473 473 + .theme-name { 474 474 + font-size: 0.8rem; 475 475 + font-weight: 600; 476 476 + color: hsl(var(--subtext0)); 477 477 + } 478 478 + } 479 479 + 480 480 + .theme-preview { 481 481 + width: 7rem; 482 482 + height: 5rem; 483 483 + border-radius: 0.6rem; 484 484 + overflow: hidden; 485 485 + background: hsl(var(--preview-base)); 486 486 + display: flex; 487 487 + flex-direction: column; 488 488 + 489 489 + .preview-bar { 490 490 + display: flex; 491 491 + align-items: center; 492 492 + justify-content: space-between; 493 493 + gap: 0.2rem; 494 494 + padding: 0.3rem 0.4rem; 495 495 + background: hsl(var(--preview-surface0)); 496 496 + 497 497 + .preview-title { 498 498 + width: 50%; 499 499 + height: 0.4rem; 500 500 + border-radius: 0.2rem; 501 501 + background: hsl(var(--preview-accent)); 502 502 + } 503 503 + .preview-dot { 504 504 + width: 0.35rem; 505 505 + height: 0.35rem; 506 506 + border-radius: 50%; 507 507 + background: hsl(var(--preview-surface2)); 508 508 + 509 509 + &:first-child { 510 510 + background: hsl(var(--preview-accent)); 511 511 + } 512 512 + } 513 513 + } 514 514 + 515 515 + .preview-body { 516 516 + flex: 1; 517 517 + padding: 0.35rem 0.4rem; 518 518 + display: flex; 519 519 + flex-direction: column; 520 520 + gap: 0.2rem; 521 521 + 522 522 + .preview-line { 523 523 + height: 0.3rem; 524 524 + border-radius: 0.15rem; 525 525 + background: hsl(var(--preview-subtext0)); 526 526 + 527 527 + &.wide { 528 528 + width: 80%; 529 529 + height: 0.35rem; 530 530 + } 531 531 + &.medium { 532 532 + width: 60%; 533 533 + background: hsl(var(--preview-subtext0)); 534 534 + } 535 535 + &.narrow { 536 536 + width: 40%; 537 537 + } 538 538 + } 539 539 + } 540 540 + } 541 541 + } 542 542 + 543 543 + .accent-picker { 544 544 + display: flex; 545 545 + flex-wrap: wrap; 546 546 + gap: 0.4rem; 547 547 + 548 548 + .accent-swatch { 549 549 + position: relative; 550 550 + width: 2.5rem; 551 551 + height: 2.5rem; 552 552 + border: none; 553 553 + border-radius: 50%; 554 554 + cursor: pointer; 555 555 + padding: 0; 556 556 + background: none; 557 557 + outline: none; 558 558 + 559 559 + box-shadow: 0 0 0 0.15rem transparent; 560 560 + transition-timing-function: $ease-spring; 561 561 + transition-duration: 0.3s; 562 562 + 563 563 + .swatch-fill { 564 564 + display: block; 565 565 + width: 100%; 566 566 + height: 100%; 567 567 + border-radius: 50%; 568 568 + background: hsl(var(--swatch-colour)); 569 569 + 570 570 + transition-timing-function: $ease-spring; 571 571 + transition-duration: 0.3s; 572 572 + } 573 573 + 574 574 + .swatch-check { 575 575 + position: absolute; 576 576 + inset: 0; 577 577 + display: flex; 578 578 + align-items: center; 579 579 + justify-content: center; 580 580 + font-size: 1rem; 581 581 + font-weight: 900; 582 582 + color: hsl(var(--crust)); 583 583 + opacity: 0; 584 584 + transform: scale(0.5); 585 585 + 586 586 + transition-timing-function: $ease-spring; 587 587 + transition-duration: 0.3s; 588 588 + 589 589 + pointer-events: none; 590 590 + } 591 591 + 592 592 + &:hover { 593 593 + box-shadow: 0 0 0 0.2rem hsla(var(--swatch-colour) / 0.5); 594 594 + 595 595 + .swatch-fill { 596 596 + transform: scale(0.85); 597 597 + } 598 598 + } 599 599 + 600 600 + &:focus-visible { 601 601 + box-shadow: 0 0 0 0.25rem hsla(var(--swatch-colour) / 1); 602 602 + 603 603 + .swatch-fill { 604 604 + transform: scale(0.85); 605 605 + } 606 606 + } 607 607 + 608 608 + &:active, 609 609 + &.active { 610 610 + transform: scale(0.9); 611 611 + } 612 612 + 613 613 + &.selected { 614 614 + box-shadow: 0 0 0 0.2rem hsla(var(--swatch-colour) / 1); 615 615 + 616 616 + .swatch-fill { 617 617 + transform: scale(0.75); 618 618 + } 619 619 + 620 620 + .swatch-check { 621 621 + opacity: 1; 622 622 + transform: scale(1); 623 623 + } 624 624 + } 625 625 + } 626 626 + } 627 627 + 628 628 + .accent-label { 629 629 + font-size: 0.875rem; 630 630 + color: hsl(var(--subtext0)); 631 631 + padding-left: 0.25rem; 632 632 + 633 633 + strong { 634 634 + font-weight: 700; 635 635 + color: hsl(var(--accent)); 636 636 + } 637 637 + } 638 638 + </style>