Accessibility update
This commit is contained in:
parent
cf4e26f4c9
commit
8e8e2e063a
7 changed files with 89 additions and 16 deletions
|
@ -199,15 +199,27 @@ export default function Home() {
|
|||
}`}
|
||||
id="top"
|
||||
>
|
||||
<h1>
|
||||
<h1 aria-label="About M T R dot Link">
|
||||
ABTMTR
|
||||
<wbr />
|
||||
.LINK
|
||||
</h1>
|
||||
<Time time={time} date={date} />
|
||||
<Floaty top>
|
||||
<input
|
||||
id="accessibility"
|
||||
type="checkbox"
|
||||
onClick={function (x) {
|
||||
(x.target as HTMLInputElement).checked
|
||||
? document.body.parentElement?.classList.add("a11y")
|
||||
: document.body.parentElement?.classList.remove("a11y");
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="accessibility">Accessibility</label>
|
||||
</Floaty>
|
||||
<Floaty>
|
||||
<LastFM player={player} />
|
||||
</Floaty>
|
||||
<Time time={time} date={date} />
|
||||
<Floaty start>
|
||||
<p className="hv">Scroll down for more!</p>
|
||||
</Floaty>
|
||||
|
@ -215,7 +227,11 @@ export default function Home() {
|
|||
<Page scroll={body.current} color={Color3.fromHex("FFFFFF")} id="hi">
|
||||
<h1>Welcome 👋</h1>
|
||||
<p>
|
||||
I'm <b>MeowcaTheoRange</b> <small>(miau-kuh-thee~oh-ray~nj)</small>.
|
||||
I'm <b>MeowcaTheoRange</b>{" "}
|
||||
<small aria-label="Pronounced: meow, cuh, the, oh, range">
|
||||
(miau-kuh-thee~oh-ray~nj)
|
||||
</small>
|
||||
.
|
||||
<br />
|
||||
I'm a web developer, Fediverse enthusiast, and compulsory Minnesotan.
|
||||
</p>
|
||||
|
@ -597,7 +613,7 @@ export default function Home() {
|
|||
.
|
||||
</p>
|
||||
<ProjectList projects={images} markdown />
|
||||
<ProjectList projects={blog} markdown double />
|
||||
<ProjectList projects={blog} markdown double tooLong />
|
||||
</Page>
|
||||
<Page
|
||||
scroll={body.current}
|
||||
|
@ -656,7 +672,7 @@ export default function Home() {
|
|||
<br />
|
||||
<small>Primary Negative</small>
|
||||
</ColourChip>
|
||||
<p style={{ color: "#00BFFF" }}>
|
||||
<p style={{ color: "#00c0FF" }} className="color-collapse-on-a11y">
|
||||
<b>Iszac Blue</b> is literally <strong>Rocco Orange</strong> but
|
||||
inverted. This colour is named after <strong>Iszac</strong>, an OC of
|
||||
mine that I came up with, for the setting of Ætherglow.
|
||||
|
@ -668,7 +684,7 @@ export default function Home() {
|
|||
If you were to use any of these colours to represnt me as a{" "}
|
||||
<strong>person</strong>, use this one.
|
||||
</p>
|
||||
<p style={{ color: "#FF4000" }}>
|
||||
<p style={{ color: "#FF4000" }} className="color-collapse-on-a11y">
|
||||
<b>Rocco Orange</b> is my favourite colour orange, but now more red.
|
||||
The name comes from my character <strong>Rocco</strong>, whose hair is
|
||||
this colour - though this colour has been applied to more characters
|
||||
|
@ -687,12 +703,12 @@ export default function Home() {
|
|||
<br />
|
||||
<small>Secondary Negative</small>
|
||||
</ColourChip>
|
||||
<p style={{ color: "#8000FF" }}>
|
||||
<p style={{ color: "#8000FF" }} className="color-collapse-on-a11y">
|
||||
<b>Grape Soda</b> represents my love for grape soda.
|
||||
<br />
|
||||
My favourite is Fanta Grape. :]
|
||||
</p>
|
||||
<p style={{ color: "#80FF00" }}>
|
||||
<p style={{ color: "#80FF00" }} className="color-collapse-on-a11y">
|
||||
<b>Avalonian Waste</b> is also literally <strong>Grape Soda</strong>{" "}
|
||||
but inverted. This represents some{" "}
|
||||
<a
|
||||
|
|
|
@ -19,7 +19,7 @@ export default function Floaty({
|
|||
start ? styles.FloatyStart : ""
|
||||
} ${keepFloat ? styles.FloatyKeep : ""} ${
|
||||
sticky ? styles.FloatySticky : ""
|
||||
}`}
|
||||
} FL-collapse-on-a11y`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
|
|
@ -40,11 +40,12 @@ export default function Page({
|
|||
ref={pageobj}
|
||||
className={`${styles.Page} ${preview ? styles.PagePreview : ""} ${
|
||||
footer ? styles.PageFooter : ""
|
||||
} ${floaty ? styles.PageSpace : ""} block`}
|
||||
} ${floaty ? styles.PageSpace : ""} block PG-collapse-on-a11y`}
|
||||
style={
|
||||
{
|
||||
"--backgroundColor": "#" + color?.darken(75).toHex(),
|
||||
"--color": "#" + color?.toHex(),
|
||||
"--color-a11y": "#" + color?.lighten(75).toHex(),
|
||||
background: bg,
|
||||
backgroundColor: "#" + color?.darken(90).toHex(),
|
||||
color: "var(--color)",
|
||||
|
|
|
@ -16,10 +16,12 @@ export default function ProjectList({
|
|||
projects,
|
||||
markdown = false,
|
||||
double = false,
|
||||
tooLong = false,
|
||||
}: {
|
||||
projects: Project[];
|
||||
markdown?: boolean;
|
||||
double?: boolean;
|
||||
tooLong?: boolean;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
return (
|
||||
|
@ -31,7 +33,7 @@ export default function ProjectList({
|
|||
{projects.map((project, i) => (
|
||||
<a
|
||||
key={i}
|
||||
className={`${styles.ProjectListProject} notInline`}
|
||||
className={`${styles.ProjectListProject} notInline color-collapse-on-a11y`}
|
||||
href={project.url}
|
||||
target="_blank"
|
||||
>
|
||||
|
@ -49,7 +51,10 @@ export default function ProjectList({
|
|||
<p className={styles.ProjectListProjectDescriptionTitle}>
|
||||
{project.name}
|
||||
</p>
|
||||
<p className={styles.ProjectListProjectDescriptionDescription}>
|
||||
<p
|
||||
className={styles.ProjectListProjectDescriptionDescription}
|
||||
aria-hidden={tooLong}
|
||||
>
|
||||
{markdown ? (
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkBreaks]}
|
||||
|
|
|
@ -14,6 +14,7 @@ export default function ScrollBackInd<T>({
|
|||
}) {
|
||||
return (
|
||||
<button
|
||||
aria-hidden="true"
|
||||
className={`${styles.ScrollBackInd} ${
|
||||
hide ? styles.ScrollBackIndHidden : ""
|
||||
}`}
|
||||
|
|
|
@ -11,9 +11,9 @@ export default function LastFM({
|
|||
{player?.recenttracks.track[0]["@attr"]?.nowplaying === "true" ? (
|
||||
<p>Currently listening to</p>
|
||||
) : (
|
||||
<p className={styles.LastFMError}>Last listened to</p>
|
||||
<p className="hv">Last listened to</p>
|
||||
)}
|
||||
<div className={styles.LastFM}>
|
||||
<div className={`${styles.LastFM} LFM-collapse-on-a11y`}>
|
||||
<div className={styles.LastFMMetadata}>
|
||||
<p className={styles.LastFMMetadataTitle}>
|
||||
{player?.recenttracks.track[0].name}
|
||||
|
@ -24,7 +24,7 @@ export default function LastFM({
|
|||
</p>
|
||||
</div>
|
||||
<img
|
||||
className={styles.LastFMAlbumArt}
|
||||
className={`${styles.LastFMAlbumArt} LFMA-collapse-on-a11y`}
|
||||
src={player?.recenttracks.track[0].image[2]["#text"]}
|
||||
alt=""
|
||||
width="96"
|
||||
|
@ -33,6 +33,6 @@ export default function LastFM({
|
|||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className={styles.LastFMError}>Hold on...</p>
|
||||
<p className="hv">Hold on...</p>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -18,6 +18,50 @@ div.body {
|
|||
scroll-snap-type: y mandatory;
|
||||
}
|
||||
|
||||
/* A11y */
|
||||
|
||||
html.a11y div.body {
|
||||
scroll-snap-type: unset;
|
||||
}
|
||||
|
||||
html.a11y .hv {
|
||||
opacity: 0.75 !important;
|
||||
}
|
||||
|
||||
html.a11y .FL-collapse-on-a11y {
|
||||
position: static !important;
|
||||
text-align: start !important;
|
||||
display: block !important;
|
||||
margin: 2em 0 !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
html.a11y .FL-collapse-on-a11y {
|
||||
position: static !important;
|
||||
text-align: start !important;
|
||||
display: block !important;
|
||||
margin: 2em 0 !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
html.a11y .LFM-collapse-on-a11y {
|
||||
grid-auto-flow: column !important;
|
||||
grid-template-columns: 96px auto !important;
|
||||
}
|
||||
|
||||
html.a11y .LFMA-collapse-on-a11y {
|
||||
order: -1 !important;
|
||||
}
|
||||
|
||||
html.a11y .PG-collapse-on-a11y {
|
||||
min-height: 0 !important;
|
||||
color: var(--color-a11y) !important;
|
||||
}
|
||||
|
||||
html.a11y .color-collapse-on-a11y {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Markup */
|
||||
|
||||
.block > h1,
|
||||
|
@ -176,3 +220,9 @@ a.special:active::after {
|
|||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 800px) {
|
||||
:root {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue