kevin/data-toolbox-site
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/data-toolbox-site.git synced 2025-05-06 05:15:53 +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="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Kevin's Data-Toolbox</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700;800&display=swap" rel="stylesheet">
<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" crossorigin="anonymous" rel="stylesheet">
</head>
<body>
<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;
}
> div {
> div, > main {
flex-grow: 1;
}
}

6
src/components/Navigation.js
View file

@ -13,16 +13,16 @@ const Navigation = () => {
const [langChooserActive, setLangChooserActive] = useState(false);
return (
<div className={styles.navigation}>
<header className={styles.navigation}>
<nav>
<Link to={"/"}>{t("site.title")}</Link>
<span className={styles.spacer}></span>
<Link to={"/tools"}>{t("site.navigation.tools")}</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)}} />
</nav>
</div>
</header>
);
}

4
src/pages/About.js
View file

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

4
src/pages/Home.js
View file

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

4
src/pages/NotFound.js
View file

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

4
src/pages/Tools.js
View file

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