feat: add opendyslexic font setting
This commit is contained in:
parent
ee1e5029f9
commit
629d45318e
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user