badmanners/gallery.badmanners.xyz
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improved readability and accessibility for CSS-less mode

Browse source
This commit is contained in:
Bad Manners 2024-08-10 01:17:33 -03:00
parent 6dd8a92318
commit d529b043c6
14 changed files with 166 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/AgeRestrictedModal.astro
View file

@ -11,22 +11,22 @@
aria-hidden="false"
>
<div class="mx-auto flex min-h-screen max-w-3xl flex-col items-center justify-center text-center tracking-tight">
<div class="h-14 w-14 text-bm-500 sm:h-16 sm:w-16 dark:text-bm-400">
<svg class="fill-current" viewBox="0 0 512 512">
<div class="text-bm-500 dark:text-bm-400">
<svg width="3rem" height="3rem" class="fill-current" viewBox="0 0 512 512">
<path
d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
></path>
</svg>
</div>
<div class="pb-3 pt-2 text-2xl font-light text-stone-700 sm:pb-4 sm:pt-2 sm:text-3xl dark:text-stone-50">
<div class="pb-3 pt-2 text-3xl font-light text-stone-700 sm:pb-4 sm:pt-2 dark:text-stone-50">
Age verification
</div>
<div
class="mx-6 mb-4 max-w-xl border-b border-stone-300 pb-4 text-base text-stone-700 sm:text-xl dark:border-stone-300 dark:text-stone-50"
class="mx-6 mb-4 max-w-xl border-b border-stone-300 pb-4 text-xl text-stone-700 dark:border-stone-300 dark:text-stone-50"
>
You must be 18+ to access this page.
</div>
<p class="px-8 text-base font-light leading-snug text-stone-700 sm:max-w-2xl sm:text-lg dark:text-stone-50">
<p class="px-8 text-lg font-light leading-snug text-stone-700 sm:max-w-2xl dark:text-stone-50">
By confirming that you are at least 18 years old, your selection will be saved to your browser to prevent this
screen from appearing in the future.
</p>

11
src/components/CopyrightedCharacters.astro
View file

@ -1,23 +1,24 @@
---
import type { CollectionEntry } from "astro:content";
import type { Lang } from "../content/config";
import type { CopyrightedCharacters, Lang } from "../content/config";
import { t } from "../i18n";
import UserComponent from "./UserComponent.astro";
import CopyrightedCharactersItem from "./CopyrightedCharactersItem.astro";
import { formatCopyrightedCharacters } from "../utils/format_copyrighted_characters";
type Props = {
copyrightedCharacters?: Array<[CollectionEntry<"users">, string[]]>;
copyrightedCharacters?: CopyrightedCharacters;
lang: Lang;
};
const { copyrightedCharacters, lang } = Astro.props;
const charactersPerUser = copyrightedCharacters ? await formatCopyrightedCharacters(copyrightedCharacters) : null;
---
{
copyrightedCharacters ? (
charactersPerUser ? (
<section id="copyrighted-characters" aria-label={t(lang, "characters/copyrighted_characters_aria_label")}>
<ul>
{copyrightedCharacters.map(([owner, characterList]) => (
{charactersPerUser.map(([owner, characterList]) => (
<CopyrightedCharactersItem
stringFunction={
characterList[0] === ""

2
src/components/DarkModeScript.astro
View file

@ -11,6 +11,8 @@
colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
document.querySelectorAll<HTMLElementTagNameMap["button"]>("button[data-dark-mode]").forEach((button) => {
button.classList.remove("hidden");
button.removeAttribute("aria-hidden");
button.addEventListener("click", (e) => {
e.preventDefault();
if (colorScheme === "dark") {

13
src/components/MastodonComments.astro
View file

@ -41,7 +41,14 @@ const { link, instance, user, postId } = Astro.props;
</template>
<template id="template-button-loading">
<svg class="-mt-1 mr-1 inline h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24" aria-hidden>
<svg
width="1.25rem"
height="1.25rem"
class="-mt-1 mr-1 inline animate-spin"
fill="none"
viewBox="0 0 24 24"
aria-hidden
>
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path
class="opacity-100"
@ -71,7 +78,7 @@ const { link, instance, user, postId } = Astro.props;
<div class="ml-1 flex flex-row pb-2 pt-1">
<div class="flex" aria-label="Favorites">
<span data-favorites></span>
<svg class="ml-2 w-5 fill-current" viewBox="0 0 576 512" aria-hidden>
<svg width="1.25rem" class="ml-2 fill-current" viewBox="0 0 576 512" aria-hidden>
<path
d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"
></path>
@ -79,7 +86,7 @@ const { link, instance, user, postId } = Astro.props;
</div>
<div class="ml-4 flex" aria-label="Reblogs">
<span data-reblogs></span>
<svg class="ml-2 w-5 fill-current" viewBox="0 0 512 512" aria-hidden>
<svg width="1.25rem" class="ml-2 fill-current" viewBox="0 0 512 512" aria-hidden>
<path
d="M0 224c0 17.7 14.3 32 32 32s32-14.3 32-32c0-53 43-96 96-96H320v32c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-9.2-9.2-22.9-11.9-34.9-6.9S320 19.1 320 32V64H160C71.6 64 0 135.6 0 224zm512 64c0-17.7-14.3-32-32-32s-32 14.3-32 32c0 53-43 96-96 96H192V352c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V448H352c88.4 0 160-71.6 160-160z"
></path>

7
src/components/UserComponent.astro
View file

@ -8,12 +8,9 @@ type Props = {
user: CollectionEntry<"users">;
};
let { user, lang } = Astro.props;
const { user, lang } = Astro.props;
const username = getUsernameForLang(user, lang);
let link: string | null = null;
if (user.data.preferredLink) {
link = user.data.links[user.data.preferredLink]!.link;
}
const link = user.data.preferredLink ? user.data.links[user.data.preferredLink]!.link : null;
---
{