feat(dashboard): (re-)add opendyslexic and atkinson hyperlegible options

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 @@
                     <h4>Accessibility</h4>
                     <hr/>
                     <Row>
-                        <!-- <Col xs={12} lg={4} class="mb-2">
-                            <span id="s-opendyslexic">Use the opendyslexic font?</span> <Toggle toggledColor="#da9317" hideLabel style="display: inline" label="Use the opendyslexic font" toggled={settings.accessibility.opendyslexic} on:toggle={() => {settings.accessibility.opendyslexic = !settings.accessibility.opendyslexic; localStorage.setItem("pk-settings", JSON.stringify(settings)); toggleOpenDyslexic();}}/>
-                            <Tooltip target="s-opendyslexic" placement="bottom">If enabled, uses the opendyslexic font as it's main font.</Tooltip>
-                        </Col> -->
+                        <Col xs={12} lg={4} class="mb-2">
+                            <label for="s-fonts">Font used on the dashboard</label>
+                            <select class="form-select"  on:change={(e) => changeFont(e.target.value)}>
+                                <option value="default">Default</option>
+                                <option value="atkinson">Atkinson Hyperlegible</option>
+                                <option value="dyslexic">OpenDyslexic</option>
+                            </select>
+                        </Col>
                         <Col xs={12} lg={4} class="mb-2">
                             <span id="s-expandedcards">Expand cards by default?</span> <Toggle toggledColor="#da9317" hideLabel style="display: inline" label="Expand cards by default in list" toggled={settings.accessibility.expandedcards} on:toggle={() => {settings.accessibility.expandedcards = !settings.accessibility.expandedcards; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
                             <Tooltip target="s-expandedcards" placement="bottom">If enabled, lists will be expanded by default (overrides page links).</Tooltip>

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;
+}
+

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