feat: add opendyslexic font setting

src/App.svelte

@@ -12,6 +12,7 @@
   import Group from './pages/Group.svelte';
   import { Alert } from 'sveltestrap';
 import DiscordLogin from "./pages/DiscordLogin.svelte";
+  import { onMount } from 'svelte';
   
   // theme cdns (I might make some myself too)
   let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css";
@@ -43,6 +44,15 @@ import DiscordLogin from "./pages/DiscordLogin.svelte";
   };
 
   let falseBool = false;
+
+  onMount(() => {
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+
+    if (settings && settings.accessibility.opendyslexic === true) {
+      document.getElementById("app").classList.add("dyslexic");
+    }
+  });
+
 </script>
 
 <svelte:head>

src/pages/Settings.svelte

@@ -12,6 +12,9 @@
             gradient_background: false,
             color_background: false,
             twemoji: false
+        },
+        accessibility: {
+            opendyslexic: false
         }
     };
 
@@ -19,6 +22,11 @@
         settings = {...settings, ...savedSettings}
     };
 
+    function toggleOpenDyslexic() {
+        if (settings.accessibility.opendyslexic) document.getElementById("app").classList.add("dyslexic");
+        else document.getElementById("app").classList.remove("dyslexic");
+    }
+
 </script>
 
 <Container>
@@ -54,6 +62,14 @@
                                 <Tooltip target="s-colorbackground" placement="bottom">If enabled, turns the background on member pages into the member's color.</Tooltip>
                         </Col>
                     </Row>
+                    <h4>Accessibility</h4>
+                    <hr/>
+                    <Row>
+                        <Col xs={12} lg={4} class="mb-2">
+                            <span id="s-opendyslexic">Use the opendyslexic font?</span> <Toggle 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-bannertop" placement="bottom">If enabled, shows banners from the top of the system, member and group pages.</Tooltip>
+                        </Col>
+                    </Row>
                 </CardBody>
             </Card>
         </Col>

styles/generic.scss

@@ -3,6 +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');
 
 // some variables
 $breakpoint-xs: 0px;
@@ -31,6 +32,10 @@ code {
     color: var(--bs-body-color) !important; // overwrite
 }
 
+.dyslexic {
+    font-family: 'Open-Dyslexic', sans-serif;
+}
+
 // pk-webs specific elements
 .icon {
     height: 1.5em;