Minor additions to allow for better navigation, especially for screen readers.

This commit is contained in:
Alexis Werefox 2021-05-01 23:25:28 +00:00
parent d7354f3c3a
commit b3887c63ef
8 changed files with 68 additions and 48 deletions

View File

@ -4,7 +4,12 @@ import WCard from "../components/werefox-card";
import FCard from "./footer-card";
import PButton from "../components/page-button";
export default function BasicPage({ is_home, page_title, card_title, children }) {
export default function BasicPage({
is_home,
page_title,
card_title,
children,
}) {
if (is_home) {
return (
<div className="min-h-screen bg-werefox-grey-lighter dark:bg-werefox-grey-dark font-nerd">
@ -56,6 +61,7 @@ export default function BasicPage({ is_home, page_title, card_title, children })
{card_title}
</h1>
</WCard>
<nav>
<PButton
title="Take me back home!"
images={[
@ -64,7 +70,9 @@ export default function BasicPage({ is_home, page_title, card_title, children })
]}
url="/"
/>
</nav>
{children}
<nav>
<PButton
title="Take me back home!"
images={[
@ -73,6 +81,7 @@ export default function BasicPage({ is_home, page_title, card_title, children })
]}
url="/"
/>
</nav>
<FCard />
</div>
</div>

View File

@ -3,16 +3,19 @@ import { IDENTITIES } from "../js/variables";
export default function IdentityBlock() {
return (
<nav>
<div className="grid xl:grid-rows-2 xl:grid-cols-5 sm:grid-rows-3 sm:grid-cols-3 grid-rows-9 grid-cols-1 sm:gap-2 gap-0">
{Object.keys(IDENTITIES).map((ids) => (
<IDButton
key={ids}
innerText={ids}
url={IDENTITIES[ids].url}
locator={IDENTITIES[ids].locator}
imageObj={IDENTITIES[ids].images}
extraClasses={IDENTITIES[ids].extra_classes}
/>
))}
</div>
</nav>
);
}

View File

@ -6,14 +6,15 @@ export default function IdentityButton({
imageObj,
innerText,
url,
locator,
}) {
const images = Array(imageObj).flat();
const maybeLocator = locator ? `#${locator}` : "";
return (
<div className="animate-wiggle container max-w-sm mx-auto md:px-2 p-2">
<Link href={url}>
<Link href={`${url}${maybeLocator}`}>
<a
target=""
className={`${extraClasses} block ring-2 ring-werefox-grey-darker dark:ring-werefox-grey-darker rounded-lg text-lg text-center text-werefox-grey-lighter dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-lightest transition hover:bg-werefox-grey-dark dark:hover:bg-werefox-grey-light`}
>
{images.map((source) => (

View File

@ -66,7 +66,7 @@ export default function IdentityCard({
} else if (url) {
return (
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
<div className="p-2 flow space-y-3">
<div className="p-2 flow space-y-3" id={title}>
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
<p className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
<span className="relative inline-block w-8 h-8 align-middle mb-1">

View File

@ -3,7 +3,8 @@ import { PAGES } from "../js/variables";
export default function ProjectBlock() {
return (
<>
<nav>
<div className="flow space-y-2">
{Object.keys(PAGES).map((page) => (
<PButton
key={page}
@ -12,6 +13,7 @@ export default function ProjectBlock() {
url={PAGES[page].url}
/>
))}
</>
</div>
</nav>
);
}

View File

@ -25,7 +25,7 @@ export const IDENTITIES = {
],
extra_classes: "xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full",
},
"She/her": {
"She/Her": {
url: "/identities/pronouns",
images: [
{
@ -37,6 +37,7 @@ export const IDENTITIES = {
},
Polyam: {
url: "/identities/sexuality",
locator: "Polyam",
images: [
{
src: "/emoji/polyamory_flag.svg",
@ -47,6 +48,7 @@ export const IDENTITIES = {
},
Pansexual: {
url: "/identities/sexuality",
locator: "Pansexual",
images: [
{
src: "/emoji/pansexual_flag.svg",
@ -57,6 +59,7 @@ export const IDENTITIES = {
},
Lesbian: {
url: "/identities/sexuality",
locator: "Lesbian",
images: [
{
src: "/emoji/lesbian_flag.svg",
@ -298,9 +301,11 @@ export const FAQS = {
},
q4: {
question: `"What do you do?"`,
answer: `Something! I mainly focus on maintaining the services I run at the
moment, Beat Saber streaming, myself and my transition. I could use some
financial support, if you're feeling up to it and can afford it!`,
answer: `Lots of things! Lately, though, I've been focusing on myself and my
transition. I could use some financial support (since I'm currently
unemployed) if you're feeling up to it and can afford it! If you want to
know more about what I do, you can check out "Stuff I do!" from the main
page, and "Support Me?" if you wanna toss me some funds!`,
src: "/images/alexis_shrug.png",
alt: "Alexis shrugging",
},

View File

@ -8,9 +8,9 @@ export default function Sexuality() {
card_title="Sexuality Details!"
>
<IDCard
title="Polyamory"
title="Polyam"
info={{
info: `This means that I am okay with having multiple partners!`,
info: `Short for "Polyamory", this means that I am okay with having multiple partners!`,
more: `There's a lot I can say about Polyamory, but I feel like if you really want to learn more about it, you might be better off following the link below.`,
}}
url="https://lgbta.wikia.org/wiki/Polyamorous"