Further accessibility and semantic improvements
This commit is contained in:
parent
dafb240517
commit
bf82d8bcd6
21 changed files with 82 additions and 480 deletions
|
|
@ -18,25 +18,23 @@ const games = (
|
|||
<ul class="my-6 flex flex-wrap items-start justify-center gap-4 text-center md:justify-normal">
|
||||
{
|
||||
games.map((game) => (
|
||||
<li>
|
||||
<li class="h-entry">
|
||||
<a
|
||||
class="text-link hover:underline focus:underline"
|
||||
class="u-url text-link hover:underline focus:underline"
|
||||
href={`/games/${game.slug}`}
|
||||
title={t(game.data.lang, "game/warnings", game.data.platforms, game.data.contentWarning)}
|
||||
>
|
||||
{game.data.thumbnail ? (
|
||||
<div class="flex aspect-[630/500] max-w-[288px] justify-center">
|
||||
<Image class="m-auto" src={game.data.thumbnail} alt={`Thumbnail for ${game.data.title}`} width={288} />
|
||||
<Image class="u-photo m-auto" src={game.data.thumbnail} alt={`Thumbnail for ${game.data.title}`} width={288} />
|
||||
</div>
|
||||
) : null}
|
||||
<div class="max-w-[288px] text-sm">
|
||||
<>
|
||||
<span>{game.data.title}</span>
|
||||
<br />
|
||||
<span class="italic">
|
||||
{game.data.pubDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
|
||||
</span>
|
||||
</>
|
||||
<span class="p-name">{game.data.title}</span>
|
||||
<br />
|
||||
<time class="dt-published italic" datetime={game.data.pubDate.toISOString().slice(0, 10)}>
|
||||
{game.data.pubDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
|
||||
</time>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -79,19 +79,19 @@ const latestItems: LatestItemsEntry[] = [
|
|||
<ul class="flex flex-wrap items-start justify-center gap-4 text-center md:justify-normal">
|
||||
{
|
||||
latestItems.map((entry) => (
|
||||
<li class="break-inside-avoid">
|
||||
<a class="text-link hover:underline focus:underline" href={entry.href} title={entry.altText}>
|
||||
<li class="h-entry break-inside-avoid">
|
||||
<a class="u-url text-link hover:underline focus:underline" href={entry.href} title={entry.altText}>
|
||||
{entry.thumbnail ? (
|
||||
<div class="flex aspect-square max-w-[192px] justify-center">
|
||||
<Image class="m-auto" src={entry.thumbnail} alt={`Thumbnail for ${entry.title}`} width={192} />
|
||||
<Image class="u-photo m-auto" src={entry.thumbnail} alt={`Thumbnail for ${entry.title}`} width={192} />
|
||||
</div>
|
||||
) : null}
|
||||
<div class="max-w-[192px] text-sm">
|
||||
<span>{entry.title}</span>
|
||||
<span class="p-name">{entry.title}</span>
|
||||
<br />
|
||||
<span class="italic">
|
||||
{entry.type} –{" "}
|
||||
{entry.pubDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
|
||||
<span class="p-category">{entry.type}</span> –{" "}
|
||||
<time class="dt-published" datetime={entry.pubDate.toISOString().slice(0, 10)}>{entry.pubDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}</time>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -68,16 +68,16 @@ const totalPages = Math.ceil(page.total / page.size);
|
|||
<ul class="flex flex-wrap items-start justify-center gap-4 text-center md:justify-normal">
|
||||
{
|
||||
page.data.map((story) => (
|
||||
<li class="break-inside-avoid">
|
||||
<li class="h-entry break-inside-avoid">
|
||||
<a
|
||||
class="text-link hover:underline focus:underline"
|
||||
class="u-url text-link hover:underline focus:underline"
|
||||
href={`/stories/${story.slug}`}
|
||||
title={t(story.data.lang, "story/warnings", story.data.wordCount, story.data.contentWarning)}
|
||||
>
|
||||
{story.data.thumbnail ? (
|
||||
<div class="flex aspect-square max-w-[192px] justify-center">
|
||||
<Image
|
||||
class="m-auto"
|
||||
class="u-photo m-auto"
|
||||
src={story.data.thumbnail}
|
||||
alt={`Thumbnail for ${story.data.title}`}
|
||||
width={192}
|
||||
|
|
@ -85,11 +85,11 @@ const totalPages = Math.ceil(page.total / page.size);
|
|||
</div>
|
||||
) : null}
|
||||
<div class="max-w-[192px] text-sm">
|
||||
<span>{story.data.title}</span>
|
||||
<span class="p-name">{story.data.title}</span>
|
||||
<br />
|
||||
<span class="italic">
|
||||
<time class="italic" datetime={story.data.pubDate.toISOString().slice(0, 10)}>
|
||||
{story.data.pubDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
|
||||
</span>
|
||||
</time>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -62,18 +62,18 @@ const mainChaptersWithSummaries = mainChapters.filter((story) => story.data.summ
|
|||
<ul class="flex flex-wrap justify-center gap-4 text-center md:justify-normal">
|
||||
{
|
||||
mainChapters.map((story) => (
|
||||
<li class="break-inside-avoid">
|
||||
<a class="text-link hover:underline focus:underline" href={`/stories/${story.slug}`}>
|
||||
<li class="h-entry break-inside-avoid">
|
||||
<a class="u-url text-link hover:underline focus:underline" href={`/stories/${story.slug}`}>
|
||||
{story.data.thumbnail ? (
|
||||
<Image
|
||||
class="w-48"
|
||||
class="u-photo w-48"
|
||||
src={story.data.thumbnail}
|
||||
alt={`Thumbnail for ${story.data.title}`}
|
||||
width={story.data.thumbnailWidth}
|
||||
height={story.data.thumbnailHeight}
|
||||
/>
|
||||
) : null}
|
||||
<div class="max-w-48 text-sm">{story.data.title}</div>
|
||||
<div class="p-name max-w-48 text-sm">{story.data.title}</div>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
|
|
@ -85,18 +85,18 @@ const mainChaptersWithSummaries = mainChapters.filter((story) => story.data.summ
|
|||
<ul class="flex flex-wrap justify-center gap-4 text-center md:justify-normal">
|
||||
{
|
||||
bonusChapters.map((story) => (
|
||||
<li class="break-inside-avoid">
|
||||
<a class="text-link hover:underline focus:underline" href={`/stories/${story.slug}`}>
|
||||
<li class="h-entry break-inside-avoid">
|
||||
<a class="u-url text-link hover:underline focus:underline" href={`/stories/${story.slug}`}>
|
||||
{story.data.thumbnail ? (
|
||||
<Image
|
||||
class="w-48"
|
||||
class="u-photo w-48"
|
||||
src={story.data.thumbnail}
|
||||
alt={`Thumbnail for ${story.data.title}`}
|
||||
width={story.data.thumbnailWidth}
|
||||
height={story.data.thumbnailHeight}
|
||||
/>
|
||||
) : null}
|
||||
<div class="max-w-48 text-sm">{story.data.title}</div>
|
||||
<div class="p-name max-w-48 text-sm">{story.data.title}</div>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
|
|
|
|||
|
|
@ -130,16 +130,16 @@ const totalWorksWithTag = t(
|
|||
</h2>
|
||||
<ul class="flex flex-wrap items-start justify-center gap-4 text-center md:justify-normal">
|
||||
{props.stories.map((story) => (
|
||||
<li class="break-inside-avoid">
|
||||
<li class="h-entry break-inside-avoid">
|
||||
<a
|
||||
class="text-link hover:underline focus:underline"
|
||||
class="u-url text-link hover:underline focus:underline"
|
||||
href={`/stories/${story.slug}`}
|
||||
title={t(story.data.lang, "story/warnings", story.data.wordCount, story.data.contentWarning)}
|
||||
>
|
||||
{story.data.thumbnail ? (
|
||||
<div class="flex aspect-square max-w-[192px] justify-center">
|
||||
<Image
|
||||
class="m-auto"
|
||||
class="u-photo m-auto"
|
||||
src={story.data.thumbnail}
|
||||
alt={`Thumbnail for ${story.data.title}`}
|
||||
width={192}
|
||||
|
|
@ -147,9 +147,9 @@ const totalWorksWithTag = t(
|
|||
</div>
|
||||
) : null}
|
||||
<div class="max-w-[192px] text-sm">
|
||||
<span>{story.data.title}</span>
|
||||
<span class="p-name">{story.data.title}</span>
|
||||
<br />
|
||||
<span class="italic">
|
||||
<time class="dt-published italic" datetime={story.data.pubDate.toISOString().slice(0, 10)}>
|
||||
{story.data.pubDate.toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
|
|
@ -172,16 +172,16 @@ const totalWorksWithTag = t(
|
|||
</h2>
|
||||
<ul class="flex flex-wrap items-start justify-center gap-4 text-center md:justify-normal">
|
||||
{props.games.map((game) => (
|
||||
<li class="break-inside-avoid">
|
||||
<li class="h-entry break-inside-avoid">
|
||||
<a
|
||||
class="text-link hover:underline focus:underline"
|
||||
class="u-url text-link hover:underline focus:underline"
|
||||
href={`/games/${game.slug}`}
|
||||
title={t(game.data.lang, "game/warnings", game.data.platforms, game.data.contentWarning)}
|
||||
>
|
||||
{game.data.thumbnail ? (
|
||||
<div class="flex aspect-[630/500] max-w-[192px] justify-center">
|
||||
<Image
|
||||
class="m-auto"
|
||||
class="u-photo m-auto"
|
||||
src={game.data.thumbnail}
|
||||
alt={`Thumbnail for ${game.data.title}`}
|
||||
width={192}
|
||||
|
|
@ -189,11 +189,11 @@ const totalWorksWithTag = t(
|
|||
</div>
|
||||
) : null}
|
||||
<div class="max-w-[192px] text-sm">
|
||||
<span>{game.data.title}</span>
|
||||
<span class="p-name">{game.data.title}</span>
|
||||
<br />
|
||||
<span class="italic">
|
||||
<time class="dt-published italic" datetime={game.data.pubDate.toISOString().slice(0, 10)}>
|
||||
{game.data.pubDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
|
||||
</span>
|
||||
</time>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue