diff --git a/package-lock.json b/package-lock.json index 5628ae9..11e6734 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "dependencies": { "@fontsource/material-icons": "^4.5.2", "@fontsource/material-icons-rounded": "^4.5.2", + "@fontsource/opendyslexic": "^4.5.2", "@fontsource/vollkorn": "^4.5.4", "@fontsource/zen-maru-gothic": "^4.5.5", "markdown-to-jsx": "^7.1.6", @@ -199,6 +200,11 @@ "resolved": "https://registry.npmjs.org/@fontsource/material-icons-rounded/-/material-icons-rounded-4.5.2.tgz", "integrity": "sha512-wk/vqodMF+4IBbxhI0cjaPBcouvRrnJdeQCslY0Zae8ojyZCUksJn4JTiQk89fbY9kvT3oG7AZIZ+poKdpS02w==" }, + "node_modules/@fontsource/opendyslexic": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.2.tgz", + "integrity": "sha512-vW+A3Bd1ZEG6nAZuix0OhbS0ygMlhvtc3RvLlDXrTAinrAZHQ0bOGUJRN2iaGbQ1kWNP8/7A+AKMFH5FM/pjKA==" + }, "node_modules/@fontsource/vollkorn": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.4.tgz", @@ -3800,6 +3806,11 @@ "resolved": "https://registry.npmjs.org/@fontsource/material-icons-rounded/-/material-icons-rounded-4.5.2.tgz", "integrity": "sha512-wk/vqodMF+4IBbxhI0cjaPBcouvRrnJdeQCslY0Zae8ojyZCUksJn4JTiQk89fbY9kvT3oG7AZIZ+poKdpS02w==" }, + "@fontsource/opendyslexic": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.2.tgz", + "integrity": "sha512-vW+A3Bd1ZEG6nAZuix0OhbS0ygMlhvtc3RvLlDXrTAinrAZHQ0bOGUJRN2iaGbQ1kWNP8/7A+AKMFH5FM/pjKA==" + }, "@fontsource/vollkorn": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.4.tgz", diff --git a/package.json b/package.json index 5044c59..ce9877c 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "dependencies": { "@fontsource/material-icons": "^4.5.2", "@fontsource/material-icons-rounded": "^4.5.2", + "@fontsource/opendyslexic": "^4.5.2", "@fontsource/vollkorn": "^4.5.4", "@fontsource/zen-maru-gothic": "^4.5.5", "markdown-to-jsx": "^7.1.6", diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index dd36bcf..0167b28 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -13,6 +13,7 @@ import ReactTooltip from "react-tooltip"; import { useAppLayout } from "contexts/AppLayoutContext"; import { ImageQuality } from "./Img"; import Popup from "./Popup"; +import { useEffect } from "react"; type AppLayoutProps = { subPanel?: React.ReactNode; @@ -91,8 +92,22 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { ? props.description : props.langui.default_description; + useEffect(() => { + document.getElementsByTagName("html")[0].style.fontSize = `${ + (appLayout.fontSize || 1) * 100 + }%`; + }); + return ( -
+
+ +

Settings

+ +

Theme

+
+ + + +
+ +

Font size

+
+ + + +
+ +

Font

+ + + + diff --git a/src/contexts/AppLayoutContext.tsx b/src/contexts/AppLayoutContext.tsx index eac6321..00cf882 100644 --- a/src/contexts/AppLayoutContext.tsx +++ b/src/contexts/AppLayoutContext.tsx @@ -5,13 +5,18 @@ import React, { ReactNode, useContext } from "react"; export interface AppLayoutState { subPanelOpen: boolean | undefined; languagePanelOpen: boolean | undefined; + configPanelOpen: boolean | undefined; mainPanelReduced: boolean | undefined; mainPanelOpen: boolean | undefined; darkMode: boolean | undefined; + selectedThemeMode: boolean | undefined; + fontSize: number | undefined; + dyslexic: boolean | undefined; setSubPanelOpen: React.Dispatch>; setLanguagePanelOpen: React.Dispatch< React.SetStateAction >; + setConfigPanelOpen: React.Dispatch>; setMainPanelReduced: React.Dispatch< React.SetStateAction >; @@ -20,20 +25,29 @@ export interface AppLayoutState { setSelectedThemeMode: React.Dispatch< React.SetStateAction >; + setFontSize: React.Dispatch>; + setDyslexic: React.Dispatch>; } const initialState: AppLayoutState = { subPanelOpen: false, languagePanelOpen: false, + configPanelOpen: false, mainPanelReduced: false, mainPanelOpen: false, darkMode: false, + selectedThemeMode: false, + fontSize: 1, + dyslexic: false, setSubPanelOpen: () => {}, setLanguagePanelOpen: () => {}, setMainPanelReduced: () => {}, setMainPanelOpen: () => {}, setDarkMode: () => {}, setSelectedThemeMode: () => {}, + setConfigPanelOpen: () => {}, + setFontSize: () => {}, + setDyslexic: () => {}, }; const AppContext = React.createContext(initialState); @@ -57,6 +71,10 @@ export const AppContextProvider = (props: Props) => { boolean | undefined >("languagePanelOpen", initialState.languagePanelOpen); + const [configPanelOpen, setConfigPanelOpen] = useStateWithLocalStorage< + boolean | undefined + >("configPanelOpen", initialState.configPanelOpen); + const [mainPanelReduced, setMainPanelReduced] = useStateWithLocalStorage< boolean | undefined >("mainPanelReduced", initialState.mainPanelReduced); @@ -65,9 +83,17 @@ export const AppContextProvider = (props: Props) => { boolean | undefined >("mainPanelOpen", initialState.mainPanelOpen); - const [darkMode, setDarkMode, setSelectedThemeMode] = useDarkMode( - "darkMode", - initialState.darkMode + const [darkMode, selectedThemeMode, setDarkMode, setSelectedThemeMode] = + useDarkMode("darkMode", initialState.darkMode); + + const [fontSize, setFontSize] = useStateWithLocalStorage( + "fontSize", + initialState.fontSize + ); + + const [dyslexic, setDyslexic] = useStateWithLocalStorage( + "dyslexic", + initialState.dyslexic ); return ( @@ -75,15 +101,22 @@ export const AppContextProvider = (props: Props) => { value={{ subPanelOpen, languagePanelOpen, + configPanelOpen, mainPanelReduced, mainPanelOpen, darkMode, + selectedThemeMode, + fontSize, + dyslexic, setSubPanelOpen, setLanguagePanelOpen, + setConfigPanelOpen, setMainPanelReduced, setMainPanelOpen, setDarkMode, setSelectedThemeMode, + setFontSize, + setDyslexic, }} > {props.children} diff --git a/src/hooks/useDarkMode.ts b/src/hooks/useDarkMode.ts index 94a7c19..4705942 100644 --- a/src/hooks/useDarkMode.ts +++ b/src/hooks/useDarkMode.ts @@ -6,6 +6,7 @@ export default function useDarkMode( key: string, initialValue: boolean | undefined ): [ + boolean | undefined, boolean | undefined, React.Dispatch>, React.Dispatch> @@ -23,5 +24,5 @@ export default function useDarkMode( if (selectedThemeMode === false) setDarkMode(prefersDarkMode); }, [selectedThemeMode, prefersDarkMode, setDarkMode]); - return [darkMode, setDarkMode, setSelectedThemeMode]; + return [darkMode, selectedThemeMode, setDarkMode, setSelectedThemeMode]; } diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index ac12d3d..1d10540 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -2,14 +2,15 @@ import type { AppProps } from "next/app"; import "tailwind.css"; import "@fontsource/zen-maru-gothic/500.css"; import "@fontsource/vollkorn/700.css"; +import "@fontsource/opendyslexic/400.css" import "@fontsource/material-icons"; import { AppContextProvider } from "contexts/AppLayoutContext"; -export default function AccordsLibraryApp(appProps: AppProps) { +export default function AccordsLibraryApp(props: AppProps) { return ( - + ); } diff --git a/src/tailwind.css b/src/tailwind.css index 6eea261..477fdd7 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -78,9 +78,8 @@ } .prose blockquote { - @apply border-l-dark + @apply border-l-dark; } - } @layer components { diff --git a/tailwind.config.js b/tailwind.config.js index f099e48..4a84db7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -18,6 +18,17 @@ const breakDektop = { min: "60rem" }; const breakMobile = { max: "60rem" }; const breakThin = { max: "25rem" }; +const fontStandard = { + body: "Zen Maru Gothic", + headers: "Vollkorn", + monospace: "monospace", +}; +const fontDyslexic = { + body: "OpenDyslexic", + headers: "OpenDyslexic", + monospace: "monospace", +}; + /* END CONFIG */ function withOpacity(variableName) { @@ -41,9 +52,11 @@ module.exports = { black: withOpacity("--theme-color-black"), }, fontFamily: { - body: ["Zen Maru Gothic"], - headers: ["Vollkorn"], - monospace: ["monospace"], + body: ["var(--theme-font-body)"], + headers: ["var(--theme-font-headers)"], + monospace: ["var(--theme-font-monospace)"], + openDyslexic: ["OpenDyslexic"], + zenMaruGothic: ["Zen Maru Gothic"], }, screens: { desktop: breakDektop, @@ -61,7 +74,6 @@ module.exports = { plugins: [ require("@tailwindcss/typography"), - // Colored Dropshadow plugin(function ({ addUtilities }) { addUtilities({ ".set-theme-light": { @@ -85,6 +97,21 @@ module.exports = { }); }), + plugin(function ({ addUtilities }) { + addUtilities({ + ".set-theme-font-standard": { + "--theme-font-body": fontStandard.body, + "--theme-font-headers": fontStandard.headers, + "--theme-font-monospace": fontStandard.monospace, + }, + ".set-theme-font-dyslexic": { + "--theme-font-body": fontDyslexic.body, + "--theme-font-headers": fontDyslexic.headers, + "--theme-font-monospace": fontStandard.monospace, + }, + }); + }), + plugin(function ({ addVariant, e }) { addVariant("webkit-scrollbar", ({ modifySelectors, separator }) => { modifySelectors(({ className }) => {