Add accesibility toggle for pixel fonts

This commit is contained in:
Adam Iannazzone 2024-09-23 18:11:44 -04:00
parent 321493a392
commit 4d03b47d97
3 changed files with 13 additions and 1 deletions

View file

@ -1,4 +1,5 @@
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"); @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@font-face { @font-face {
font-family: "Upheaval TT"; font-family: "Upheaval TT";
src: url("../assets/fonts/upheavtt.ttf"); src: url("../assets/fonts/upheavtt.ttf");

View file

@ -248,7 +248,8 @@
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<!-- <script src="scripts/gradient.js"></script> --> <!-- <script src="scripts/gradient.js"></script> -->
<script src="scripts/features.js"></script> <!-- <script src="scripts/features.js"></script> -->
<script src="scripts/accessibility.js"></script>
</body> </body>
</html> </html>

10
scripts/accessibility.js Normal file
View file

@ -0,0 +1,10 @@
function pixelFontToggle() {
const pixelFontDefault = "\"Upheaval TT\", monospace;"
const pixelFontSwitchElem = document.getElementById("pixel-font-switch");
if (pixelFontSwitchElem.checked) {
document.documentElement.style.cssText = "--pixel-font: \"Upheaval TT\", monospace";
} else {
document.documentElement.style.cssText = "--pixel-font: \"Source Sans 3\", sans-serif";
}
}