kevin/data-toolbox-site
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/data-toolbox-site.git synced 2025-05-06 21:35:52 +02:00
Code Issues Projects Releases Packages Wiki Activity

Optimize a11y

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-05-19 19:32:38 +02:00
parent 0ca6f64ce7
commit 7877a7f47d
8 changed files with 16 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/index.html
View file

@ -12,8 +12,8 @@
<link rel="apple-touch-icon" href="%PUBLIC_URL%/KDT-icon@192px.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/KDT-icon@192px.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Kevin's Data-Toolbox</title> <title>Kevin's Data-Toolbox</title>
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700;800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700;800&display=swap" crossorigin="anonymous" rel="stylesheet">
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run Kevin's Data-Toolbox.</noscript> <noscript>You need to enable JavaScript to run Kevin's Data-Toolbox.</noscript>

2
src/App.module.scss
View file

@ -11,7 +11,7 @@
flex-shrink: 0; flex-shrink: 0;
} }
> div { > div, > main {
flex-grow: 1; flex-grow: 1;
} }
} }

6
src/components/Navigation.js
View file

@ -13,16 +13,16 @@ const Navigation = () => {
const [langChooserActive, setLangChooserActive] = useState(false); const [langChooserActive, setLangChooserActive] = useState(false);
return ( return (
<div className={styles.navigation}> <header className={styles.navigation}>
<nav> <nav>
<Link to={"/"}>{t("site.title")}</Link> <Link to={"/"}>{t("site.title")}</Link>
<span className={styles.spacer}></span> <span className={styles.spacer}></span>
<Link to={"/tools"}>{t("site.navigation.tools")}</Link> <Link to={"/tools"}>{t("site.navigation.tools")}</Link>
<Link to={"/about"}>{t("site.navigation.about")}</Link> <Link to={"/about"}>{t("site.navigation.about")}</Link>
<Link to={"#"} onClick={() => {setLangChooserActive(true)}}><Globe/></Link> <Link to={"#"} onClick={() => {setLangChooserActive(true)}} title="Change Language"><Globe/></Link>
<LanguageChooser active={langChooserActive} onDone={() => {setLangChooserActive(false)}} /> <LanguageChooser active={langChooserActive} onDone={() => {setLangChooserActive(false)}} />
</nav> </nav>
</div> </header>
); );
} }

4
src/pages/About.js
View file

@ -10,7 +10,7 @@ const AboutPage = () => {
return ([ return ([
<Helmet><title>{t("about.title")} | {t("site.title")}</title></Helmet>, <Helmet><title>{t("about.title")} | {t("site.title")}</title></Helmet>,
<div> <main>
<div className={styles.layoutBox}> <div className={styles.layoutBox}>
<h1>{t("about.title")}</h1> <h1>{t("about.title")}</h1>
@ -22,7 +22,7 @@ const AboutPage = () => {
<p><Trans i18nKey={"about.visitKevinKdev"}> <a href="https://kevink.dev"> </a> </Trans></p> <p><Trans i18nKey={"about.visitKevinKdev"}> <a href="https://kevink.dev"> </a> </Trans></p>
</div> </div>
</div> </main>
]); ]);
} }

4
src/pages/Home.js
View file

@ -19,7 +19,7 @@ const HomePage = () => {
<span className={styles.heroSubtitle}>{t("home.heroSubtitle")}</span> <span className={styles.heroSubtitle}>{t("home.heroSubtitle")}</span>
</div> </div>
</div>, </div>,
<div className={styles.categoryBox}> <main className={styles.categoryBox}>
<div className={styles.layoutBox}> <div className={styles.layoutBox}>
<span className={styles.title}>{t("tools.toolCategories")}</span> <span className={styles.title}>{t("tools.toolCategories")}</span>
@ -29,7 +29,7 @@ const HomePage = () => {
{/*<LinkBox to={"/tools/osm"} text={"OSM"} icon={Map} />*/} {/*<LinkBox to={"/tools/osm"} text={"OSM"} icon={Map} />*/}
</div> </div>
</div> </div>
</div> </main>
]); ]);
} }

4
src/pages/NotFound.js
View file

@ -11,12 +11,12 @@ const NotFoundPage = () => {
return ([ return ([
<Helmet><title>404: {t("system.notfound")}</title></Helmet>, <Helmet><title>404: {t("system.notfound")}</title></Helmet>,
<div> <main>
<div className={styles.layoutBox}> <div className={styles.layoutBox}>
<h1>404: {t("system.notfound")} <Frown/></h1> <h1>404: {t("system.notfound")} <Frown/></h1>
</div> </div>
</div> </main>
]); ]);
} }

4
src/pages/Tools.js
View file

@ -23,7 +23,7 @@ const ToolsPage = () => {
return ([ return ([
<Helmet><title>{t("tools.toolList")} | {t("site.title")}</title></Helmet>, <Helmet><title>{t("tools.toolList")} | {t("site.title")}</title></Helmet>,
<div className={styles.categoryBox}> <main className={styles.categoryBox}>
<div className={styles.layoutBox}> <div className={styles.layoutBox}>
<span className={styles.title}>{t("tools.toolList")}</span> <span className={styles.title}>{t("tools.toolList")}</span>
@ -41,7 +41,7 @@ const ToolsPage = () => {
{toolList.length === 0 ? <span>{t("tools.noresults")}</span> : null} {toolList.length === 0 ? <span>{t("tools.noresults")}</span> : null}
</div> </div>
</div> </div>
</div> </main>
]); ]);
} }

4
src/tools/cyphers_and_cryptography/rot/RotTool.js
View file

@ -52,7 +52,7 @@ const RotTool = () => {
}, [input, output, reversed, offset]) }, [input, output, reversed, offset])
return ( return (
<div> <main>
<Helmet> <Helmet>
<title>{t("tools.cryptography.rot.title")} | {t("site.title")}</title> <title>{t("tools.cryptography.rot.title")} | {t("site.title")}</title>
<meta name="keywords" content="ROT, encryption, decryption, verschlüsselung, entschlüsselung, ROT-13, Caesar-cipher, cipher, caesar, cäsar-chiffre, tool" /> <meta name="keywords" content="ROT, encryption, decryption, verschlüsselung, entschlüsselung, ROT-13, Caesar-cipher, cipher, caesar, cäsar-chiffre, tool" />
@ -73,7 +73,7 @@ const RotTool = () => {
<label for="rot-output">{t("tools.cryptography.common.ciphertext")}</label> <label for="rot-output">{t("tools.cryptography.common.ciphertext")}</label>
<textarea id="rot-output" placeholder={t("tools.cryptography.common.ciphertext")} onChange={(e) => {setReversed(true); setOutput(e.currentTarget.value.toUpperCase());}} value={output}></textarea> <textarea id="rot-output" placeholder={t("tools.cryptography.common.ciphertext")} onChange={(e) => {setReversed(true); setOutput(e.currentTarget.value.toUpperCase());}} value={output}></textarea>
</div> </div>
</div> </main>
) )
} }