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

Improvements to a11y and scripts

Browse source
This commit is contained in:
Bad Manners 2024-08-18 22:52:45 -03:00
parent a335aff2d3
commit d022fab5d6
17 changed files with 384 additions and 214 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/layouts/GalleryLayout.astro
View file

@ -42,7 +42,7 @@ const currentYear = new Date().getFullYear().toString();
<div class="pt-4 text-center text-xs text-black dark:text-white">
<span
>&copy; {
currentYear == "2024" ? (
currentYear === "2024" ? (
<time datetime="2024">2024</time>
) : (
<>
@ -64,7 +64,7 @@ const currentYear = new Date().getFullYear().toString();
d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"
></path>
</svg>
<span id="label-main-website" class="hidden">Main website</span>
<span id="label-main-website" class="sr-only">Main website</span>
</a>
<a class="text-link p-1" href="/feed.xml" target="_blank" aria-labelledby="label-rss-feed">
<svg
@ -76,9 +76,14 @@ const currentYear = new Date().getFullYear().toString();
d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM96 136c0-13.3 10.7-24 24-24c137 0 248 111 248 248c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-110.5-89.5-200-200-200c-13.3 0-24-10.7-24-24zm0 96c0-13.3 10.7-24 24-24c83.9 0 152 68.1 152 152c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-57.4-46.6-104-104-104c-13.3 0-24-10.7-24-24zm0 120a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"
></path>
</svg>
<span id="label-rss-feed" class="hidden">RSS feed</span>
<span id="label-rss-feed" class="sr-only">RSS feed</span>
</a>
<button data-dark-mode class="text-link hidden p-1" aria-labelledby="label-toggle-dark-mode" aria-hidden="true">
<button
data-dark-mode
style={{ display: "none" }}
class="text-link p-1"
aria-labelledby="label-toggle-dark-mode"
>
<svg
style={{ width: "1.5rem", height: "1.5rem", fill: "currentColor" }}
viewBox="0 0 512 512"
@ -99,7 +104,7 @@ const currentYear = new Date().getFullYear().toString();
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
></path>
</svg>
<span id="label-toggle-dark-mode" class="hidden">{t("en", "published_content/toggle_dark_mode")}</span>
<span id="label-toggle-dark-mode" class="sr-only">{t("en", "published_content/toggle_dark_mode")}</span>
</button>
</div>
</div>

11
src/layouts/PublishedContentLayout.astro
View file

@ -126,7 +126,7 @@ const thumbnail =
d="M48.5 224H40c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H48.5z"
></path>
</svg>
<span class="hidden" id="label-return-to"
<span class="sr-only" id="label-return-to"
>{
series ? t(props.lang, "published_content/return_to_series", series.data.name) : props.labelReturnTo.title
}</span
@ -146,14 +146,15 @@ const thumbnail =
d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
></path>
</svg>
<span class="hidden" id="label-go-to-description">{t(props.lang, "published_content/go_to_description")}</span
<span class="sr-only" id="label-go-to-description"
>{t(props.lang, "published_content/go_to_description")}</span
>
</a>
<button
data-dark-mode
class="text-link my-1 hidden border-l border-stone-300 p-2 dark:border-stone-700"
style={{ display: "none" }}
class="text-link my-1 border-l border-stone-300 p-2 dark:border-stone-700"
aria-labelledby="label-toggle-dark-mode"
aria-hidden="true"
>
<svg
style={{ width: "1.25rem", height: "1.25rem", fill: "currentColor" }}
@ -175,7 +176,7 @@ const thumbnail =
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
></path>
</svg>
<span class="hidden" id="label-toggle-dark-mode">{t(props.lang, "published_content/toggle_dark_mode")}</span>
<span class="sr-only" id="label-toggle-dark-mode">{t(props.lang, "published_content/toggle_dark_mode")}</span>
</button>
</div>
</div>