diff --git a/dashboard/public/fonts/AtkinsonHyperlegible-Bold.woff2 b/dashboard/public/fonts/AtkinsonHyperlegible-Bold.woff2 new file mode 100644 index 00000000..28b97916 Binary files /dev/null and b/dashboard/public/fonts/AtkinsonHyperlegible-Bold.woff2 differ diff --git a/dashboard/public/fonts/AtkinsonHyperlegible-BoldItalic.woff2 b/dashboard/public/fonts/AtkinsonHyperlegible-BoldItalic.woff2 new file mode 100644 index 00000000..ae61bb66 Binary files /dev/null and b/dashboard/public/fonts/AtkinsonHyperlegible-BoldItalic.woff2 differ diff --git a/dashboard/public/fonts/AtkinsonHyperlegible-Italic.woff2 b/dashboard/public/fonts/AtkinsonHyperlegible-Italic.woff2 new file mode 100644 index 00000000..3b450b7e Binary files /dev/null and b/dashboard/public/fonts/AtkinsonHyperlegible-Italic.woff2 differ diff --git a/dashboard/public/fonts/AtkinsonHyperlegible-Regular.woff2 b/dashboard/public/fonts/AtkinsonHyperlegible-Regular.woff2 new file mode 100644 index 00000000..d75e2a94 Binary files /dev/null and b/dashboard/public/fonts/AtkinsonHyperlegible-Regular.woff2 differ diff --git a/dashboard/public/fonts/OpenDyslexic-Bold.ttf b/dashboard/public/fonts/OpenDyslexic-Bold.ttf new file mode 100644 index 00000000..6da12f24 Binary files /dev/null and b/dashboard/public/fonts/OpenDyslexic-Bold.ttf differ diff --git a/dashboard/public/fonts/OpenDyslexic-BoldItalic.ttf b/dashboard/public/fonts/OpenDyslexic-BoldItalic.ttf new file mode 100644 index 00000000..8259bb9c Binary files /dev/null and b/dashboard/public/fonts/OpenDyslexic-BoldItalic.ttf differ diff --git a/dashboard/public/fonts/OpenDyslexic-Italic.ttf b/dashboard/public/fonts/OpenDyslexic-Italic.ttf new file mode 100644 index 00000000..fe242496 Binary files /dev/null and b/dashboard/public/fonts/OpenDyslexic-Italic.ttf differ diff --git a/dashboard/public/fonts/OpenDyslexic-Regular.ttf b/dashboard/public/fonts/OpenDyslexic-Regular.ttf new file mode 100644 index 00000000..3232334d Binary files /dev/null and b/dashboard/public/fonts/OpenDyslexic-Regular.ttf differ diff --git a/dashboard/src/routes/Settings/Settings.svelte b/dashboard/src/routes/Settings/Settings.svelte index f018c0b9..62ce89b6 100644 --- a/dashboard/src/routes/Settings/Settings.svelte +++ b/dashboard/src/routes/Settings/Settings.svelte @@ -22,6 +22,7 @@ }, accessibility: { opendyslexic: false, + atkinsonHyperlegible: false, pagelinks: false, expandedcards: false } @@ -38,9 +39,18 @@ localStorage.setItem("pk-config", JSON.stringify(res)); } - function toggleOpenDyslexic() { - if (settings.accessibility.opendyslexic) document.getElementById("app").classList.add("dyslexic"); - else document.getElementById("app").classList.remove("dyslexic"); + function changeFont(value: string) { + document.getElementById("app").classList.remove("dyslexic"); + document.getElementById("app").classList.remove("atkinson"); + if (value !== "default") document.getElementById("app").classList.add(value); + + if (value === "dyslexic") settings.accessibility.opendyslexic = true + else settings.accessibility.opendyslexic = false + + if (value === "atkinson") settings.accessibility.atkinsonHyperlegible = true + else settings.accessibility.atkinsonHyperlegible = false + + localStorage.setItem("pk-settings", JSON.stringify(settings)); } const revealToken = () => showToken = !showToken; @@ -82,10 +92,14 @@

Accessibility


- + + + + Expand cards by default? {settings.accessibility.expandedcards = !settings.accessibility.expandedcards; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/> If enabled, lists will be expanded by default (overrides page links). diff --git a/dashboard/styles/fonts.scss b/dashboard/styles/fonts.scss new file mode 100644 index 00000000..46bdc0b0 --- /dev/null +++ b/dashboard/styles/fonts.scss @@ -0,0 +1,64 @@ +@font-face { + font-family: 'OpenDyslexic'; + src: url('/fonts/OpenDyslexic-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'OpenDyslexic'; + src: url('/fonts/OpenDyslexic-BoldItalic.ttf') format('truetype'); + font-weight: bold; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'OpenDyslexic'; + src: url('/fonts/OpenDyslexic-Bold.ttf') format('truetype'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'OpenDyslexic'; + src: url('/fonts/OpenDyslexic-Italic.ttf') format('truetype'); + font-weight: normal; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Atkinson Hyperlegible'; + src: url('/fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Atkinson Hyperlegible'; + src: url('/fonts/AtkinsonHyperlegible-BoldItalic.woff2') format('woff2'); + font-weight: bold; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Atkinson Hyperlegible'; + src: url('/fonts/AtkinsonHyperlegible-Italic.woff2') format('woff2'); + font-weight: normal; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Atkinson Hyperlegible'; + src: url('/fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + diff --git a/dashboard/styles/generic.scss b/dashboard/styles/generic.scss index f2344623..7940a639 100644 --- a/dashboard/styles/generic.scss +++ b/dashboard/styles/generic.scss @@ -3,7 +3,7 @@ This stylesheet should be used globally regardless of theming some specific rules are meant to be overwritten by the individual themes */ -@import url('http://fonts.cdnfonts.com/css/open-dyslexic'); +@import "fonts"; // some variables $breakpoint-xs: 0px; @@ -45,7 +45,11 @@ code { } .dyslexic { - font-family: 'Open-Dyslexic', sans-serif; + font-family: 'OpenDyslexic', sans-serif; +} + +.atkinson { + font-family: 'Atkinson Hyperlegible', sans-serif; } // dashboard specific elements