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

Further accessibility and semantic improvements

Browse source
This commit is contained in:
Bad Manners 2024-08-15 23:50:23 -03:00
parent dafb240517
commit bf82d8bcd6
21 changed files with 82 additions and 480 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/layouts/BaseLayout.astro
View file

@ -21,7 +21,7 @@ const { pageTitle = "Gallery", lang = "en" } = Astro.props;
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#37b340" />
<meta name="msapplication-TileColor" content="#37b340" />
<meta name="theme-color" content="#ffffff" />
<meta name="theme-color" content="#7DD05A" data-react-helmet="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="generator" content={Astro.generator} />
<title>{pageTitle} | Bad Manners</title>

7
src/layouts/GalleryLayout.astro
View file

@ -12,9 +12,7 @@ type Props = {
const { pageTitle, enablePagefind } = Astro.props;
const logo = await getImage({ src: logoBM, width: 192 });
const currentYear = new Date().getFullYear();
const FIRST_YEAR = 2024;
const copyrightYear = currentYear > FIRST_YEAR ? `${FIRST_YEAR}–${currentYear}` : `${FIRST_YEAR}`;
const currentYear = new Date().getFullYear().toString();
---
<BaseLayout pageTitle={pageTitle}>
@ -24,7 +22,6 @@ const copyrightYear = currentYear > FIRST_YEAR ? `${FIRST_YEAR}–${currentYear}
<meta property="og:url" content={Astro.url} />
<meta property="og:image" content={logo.src} />
<meta property="og:image:alt" content="Logo for Bad Manners" />
<meta name="theme-color" content="#7DD05A" data-react-helmet="true" />
</Fragment>
<div
class="flex min-h-screen flex-col bg-stone-200 text-stone-800 md:flex-row dark:bg-stone-800 dark:text-stone-200 print:bg-none"
@ -42,7 +39,7 @@ const copyrightYear = currentYear > FIRST_YEAR ? `${FIRST_YEAR}–${currentYear}
<span class="my-2 text-2xl font-semibold">Bad Manners</span>
<Navigation />
<div class="pt-4 text-center text-xs text-black dark:text-white">
<span>&copy; {copyrightYear} | </span>
<span>&copy; {currentYear == "2024" ? <time datetime="2024">2024</time> : <><time datetime="2024">2024</time>&ndash;<time datetime={currentYear}>{currentYear}</time></>} | </span>
<a class="hover:underline focus:underline" href="/licenses.txt" target="_blank">Licenses</a>
</div>
<div class="mt-2 flex items-center gap-x-1 pb-10">

2
src/layouts/GameLayout.astro
View file

@ -54,7 +54,7 @@ const relatedGames = (await getEntries(props.relatedGames)).filter((game) => !ga
/>
<Fragment slot="section-information">
<Authors lang={props.lang}>
{authorsList.map((author) => <UserComponent user={author} lang={props.lang} />)}
{authorsList.map((author) => <UserComponent class="p-author" user={author} lang={props.lang} />)}
</Authors>
<div id="platforms">
<p>{t(props.lang, "game/platforms", props.platforms)}</p>

24
src/layouts/PublishedContentLayout.astro
View file

@ -99,7 +99,6 @@ const thumbnail =
</Fragment>
) : null
}
<meta name="theme-color" content="#7DD05A" data-react-helmet="true" />
</Fragment>
<div
id="top"
@ -173,7 +172,7 @@ const thumbnail =
</div>
</div>
<main
class="mx-auto max-w-3xl rounded-lg bg-stone-50 px-2 pb-4 pt-1 shadow-sm dark:bg-stone-900 print:max-w-full print:bg-none print:shadow-none"
class="h-entry mx-auto max-w-3xl rounded-lg bg-stone-50 px-2 pb-4 pt-1 shadow-sm dark:bg-stone-900 print:max-w-full print:bg-none print:shadow-none"
data-pagefind-body={props.isDraft ? undefined : ""}
data-pagefind-meta={`type:${props.publishedContentType}`}
>
@ -226,14 +225,14 @@ const thumbnail =
}
<h1
id="section-title"
class="px-2 pt-2 font-serif text-3xl font-semibold text-stone-800 dark:text-stone-100"
class="p-name px-2 pt-2 font-serif text-3xl font-semibold text-stone-800 dark:text-stone-100"
aria-label={props.labelTitleSection}
>
{props.title}
</h1>
<section
id="section-information"
class="mt-1 space-y-2 px-2 font-serif font-light italic text-stone-600 dark:text-stone-200"
class="p-summary mt-1 space-y-2 px-2 font-serif font-light italic text-stone-600 dark:text-stone-200"
aria-label={props.labelInformationSection}
>
<slot name="section-information" />
@ -256,13 +255,13 @@ const thumbnail =
alt={t(props.lang, "published_content/cover_art_alt", props.title)}
width={props.thumbnailWidth}
height={props.thumbnailHeight}
class="mx-auto my-5 shadow-lg"
class="u-photo mx-auto my-5 shadow-lg"
/>
</Fragment>
) : null
}
<hr class="mx-auto my-10 w-[80%] max-w-xl border-stone-400 dark:border-stone-600" />
<article id="content" class="pr-1 font-serif" aria-label={props.labelArticleSection}>
<article id="content" class="e-content pr-1 font-serif" aria-label={props.labelArticleSection}>
<slot name="section-article" />
</article>
<hr class="mx-auto mb-6 mt-10 w-[80%] max-w-xl border-stone-400 dark:border-stone-600" />
@ -275,18 +274,19 @@ const thumbnail =
{t(props.lang, "published_content/draft_warning")}
</p>
) : props.pubDate ? (
<p
<time
id="publish-date"
class="mt-2 px-2 text-center font-serif font-light text-stone-600 dark:text-stone-200"
datetime={props.pubDate.toISOString().slice(0, 10)}
class="dt-published block mt-2 px-2 text-center font-serif font-light text-stone-600 dark:text-stone-200"
aria-label={t(props.lang, "published_content/publish_date_aria_label")}
aria-description={
t(props.lang, "published_content/publish_date_aria_description", props.pubDate) || undefined
}
data-pagefind-index-attrs="aria-description"
data-pagefind-meta={`date:${props.pubDate.toISOString().slice(0, 10)}`}
data-pagefind-meta="date[datetime]"
>
{t(props.lang, "published_content/publish_date", props.pubDate)}
</p>
</time>
) : null
}
<section id="description" class="px-2 font-serif" aria-describedby="title-description">
@ -420,7 +420,7 @@ const thumbnail =
<h2 id="title-tags" class="p-2 font-serif text-xl font-semibold text-stone-800 dark:text-stone-100">
{t(props.lang, "published_content/tags")}
</h2>
<ul class="flex flex-wrap gap-x-2 gap-y-3 px-3">
<ul class="p-category flex flex-wrap gap-x-2 gap-y-3 px-3">
{tags.map(({ id, name }) => (
<li>
<a
@ -441,7 +441,7 @@ const thumbnail =
class="pt-6 text-center text-xs text-black dark:text-white"
aria-label={t(props.lang, "published_content/copyright_aria_label")}
>
<span>{t(props.lang, "published_content/copyright_year", (props.pubDate || new Date()).getFullYear())} | </span>
<span set:html={t(props.lang, "published_content/copyright_year", (props.pubDate || new Date()).getFullYear())}></span><span>&nbsp;|</span>
<a class="hover:underline focus:underline" href="/licenses.txt" target="_blank"
>{t(props.lang, "published_content/licenses")}</a
>

6
src/layouts/StoryLayout.astro
View file

@ -65,13 +65,13 @@ const wordCount = props.wordCount?.toString();
/>
<Fragment slot="section-information">
<Authors lang={props.lang}>
{authorsList.map((author) => <UserComponent user={author} lang={props.lang} />)}
{authorsList.map((author) => <UserComponent class="p-author" user={author} lang={props.lang} />)}
</Authors>
{
requestersList && (
<Requesters lang={props.lang}>
{requestersList.map((requester) => (
<UserComponent user={requester} lang={props.lang} />
<UserComponent class="p-name" user={requester} lang={props.lang} />
))}
</Requesters>
)
@ -80,7 +80,7 @@ const wordCount = props.wordCount?.toString();
commissionersList && (
<Commissioners lang={props.lang}>
{commissionersList.map((commissioner) => (
<UserComponent user={commissioner} lang={props.lang} />
<UserComponent class="p-name" user={commissioner} lang={props.lang} />
))}
</Commissioners>
)