Accords-Library-Archive
/
v3.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve keyboard navigation

This commit is contained in:
DrMint 2024-05-24 12:16:17 +02:00
parent 22e8aee234
commit f7c0c3f784
13 changed files with 136 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/AppLayout/components/Footer.astro
View File

@ -32,35 +32,35 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t(
<div id="nav" class="when-no-print">
<p class="font-serif">{t("global.siteName")}</p>
<div>
<a href="/">
<a class="pressable-label" href="/">
<Icon name="accords" />
<p>{t("footer.links.home.title")}</p>
</a>
<a href="/archives" class="DEV_TODO">
<a class="pressable-label DEV_TODO" href="/archives">
<Icon name="material-symbols:browse" />
<p>{"Contents"}</p>
</a>
<a href="/chronicles" class="DEV_TODO">
<a class="pressable-label DEV_TODO" href="/chronicles">
<Icon name="material-symbols:book-2" />
<p>{"Chronicles"}</p>
</a>
<a href="/changelog" class="DEV_TODO">
<a class="pressable-label DEV_TODO" href="/changelog">
<Icon name="material-symbols:history" />
<p>{"Changelog"}</p>
</a>
<a href="/timeline">
<a class="pressable-label" href="/timeline">
<Icon name="material-symbols:calendar-month" />
<p>{t("footer.links.timeline.title")}</p>
</a>
<a href="https://gallery.accords-library.com/posts">
<a class="pressable-label" href="https://gallery.accords-library.com/posts">
<Icon name="material-symbols:perm-media" />
<p>{t("footer.links.gallery.title")}</p>
</a>
<a href="/videos" class="DEV_TODO">
<a class="pressable-label DEV_TODO" href="/videos">
<Icon name="material-symbols:movie" />
<p>{t("footer.links.videos.title")}</p>
</a>
<a href="/archives" class="DEV_TODO">
<a class="pressable-label DEV_TODO" href="/archives">
<Icon name="material-symbols:folder-zip" />
<p>{t("footer.links.webArchives.title")}</p>
</a>
@ -166,10 +166,6 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t(
grid-template-columns: 1fr 1fr;
margin-left: -0.6em;
@media (max-width: 65rem) {
gap: unset;
}
@media (max-width: 35rem) {
gap: 0.25em 0.5em;
grid-template-columns: 1fr 1fr;
@ -184,35 +180,6 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t(
margin-left: unset;
font-size: 1.2em;
}
& > a {
display: flex;
place-items: center;
text-decoration: none;
gap: 0.4em;
padding: 0.4em 0.6em;
border-radius: 9999px;
@media (max-width: 35rem) {
padding: 0.6em 0.8em;
}
transition: 150ms background-color;
&:hover {
background-color: var(--color-base-250);
}
&:active {
background-color: var(--color-base-300);
}
& > svg {
flex-shrink: 0;
height: 0.75em;
width: 0.75em;
}
}
}
}
@ -247,6 +214,7 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t(
justify-content: flex-start;
gap: 0.2em;
margin-top: 0.5em;
width: fit-content;
& > svg {
width: 1em;

18
src/components/AppLayout/components/Html.astro
View File

@ -362,6 +362,8 @@ const { currentTheme } = Astro.locals;
button {
background-color: unset;
font-size: 1em;
border: unset;
}
button,
@ -450,10 +452,16 @@ const { currentTheme } = Astro.locals;
transition: 150ms background-color;
&:hover {
&:hover,
&:focus-visible {
background-color: var(--color-base-250);
}
&:focus-visible {
outline: 3px solid var(--color-base-1000);
outline-offset: unset;
}
&:active {
background-color: var(--color-base-300);
}
@ -468,12 +476,18 @@ const { currentTheme } = Astro.locals;
transition-duration: 250ms;
transition-property: padding-top, box-shadow, background-color, color, border-color;
&:hover {
&:hover,
&:focus-visible {
--foreground-color: var(--color-base-1000);
box-shadow: 0 2px 2px var(--color-shadow-2);
background-color: var(--color-elevation-1);
}
&:focus-visible {
outline: 3px solid var(--foreground-color);
outline-offset: unset;
}
&:active {
transition-duration: 75ms;
--foreground-color: var(--color-base-1000);

2
src/components/AppLayout/components/Topbar/Topbar.astro
View File

@ -77,6 +77,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
display: flex;
place-items: center;
overflow-x: scroll;
padding: 3px; /* This way focus outline isn't cropped by overflow-x */
gap: 8px;
margin-left: -0.8em;
@ -92,6 +93,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
place-items: center;
justify-content: flex-end;
overflow-x: scroll;
padding: 3px; /* This way focus outline isn't cropped by overflow-x */
@media (max-width: 28rem) {
justify-content: center;

4
src/components/AppLayout/components/Topbar/components/ParentPagesButton.astro
View File

@ -30,14 +30,14 @@ const { t } = await getI18n(Astro.locals.currentLocale);
))}
</div>
</div>
<div class="pressable-label">
<button class="pressable-label">
<Icon name="material-symbols:keyboard-return" />
<p>
{t("header.nav.parentPages.label", {
count: parentPages.length,
})}
</p>
</div>
</button>
</Tooltip>
)
}

6
src/components/AppLayout/components/Topbar/components/ReturnToButton.astro
View File

@ -21,20 +21,18 @@ const {
{/* ------------------------------------------- HTML ------------------------------------------- */}
<a href={href} target={target} rel={rel}>
<div class="pressable-label">
<a class="pressable-label" href={href} target={target} rel={rel}>
<Icon name="material-symbols:keyboard-return" />
<p>
<span>{typeLabel}</span>
{label}
</p>
</div>
</a>
{/* ------------------------------------------- CSS -------------------------------------------- */}
<style>
div {
a {
height: 16px;
& > p {

24
src/components/Card.astro
View File

@ -1,7 +1,4 @@
---
import ConditionalWrapper from "./ConditionalWrapper.astro";
import Link from "./Link.astro";
interface Props {
href?: string | undefined;
disableRoundedTop?: boolean;
@ -12,11 +9,17 @@ const { href, disableRoundedTop = false } = Astro.props;
{/* ------------------------------------------- HTML ------------------------------------------- */}
<ConditionalWrapper condition={href !== undefined} wrapper={Link} props={{ href: href! }}>
{
href !== undefined ? (
<a href={href} id="card" class:list={{ "rounded-top": !disableRoundedTop }}>
<slot />
</a>
) : (
<div id="card" class:list={{ "rounded-top": !disableRoundedTop }}>
<slot />
</div>
</ConditionalWrapper>
)
}
{/* ------------------------------------------- CSS -------------------------------------------- */}
@ -37,20 +40,27 @@ const { href, disableRoundedTop = false } = Astro.props;
background-color: color-mix(in srgb, var(--color-elevation-2) 30%, transparent);
}
:global(a) > #card {
a#card {
transition-duration: 150ms;
transition-property: border-color, box-shadow, background-color;
&:hover {
&:hover,
&:focus-visible {
border-color: var(--color-base-650);
box-shadow: 0 2px 2px var(--color-shadow-2);
background-color: color-mix(in srgb, var(--color-elevation-2) 80%, transparent);
}
&:focus-visible {
outline: 3px solid var(--color-base-650);
outline-offset: unset;
}
&:active {
border-color: var(--color-base-1000);
box-shadow: 0 6px 12px 2px var(--color-shadow-2);
background-color: var(--color-elevation-2);
outline-color: var(--color-base-1000);
}
}
</style>

9
src/components/RichText/components/RTUpload/components/OpenMediaPageButton.astro
View File

@ -12,12 +12,10 @@ const { t } = await getI18n(Astro.locals.currentLocale);
{/* ------------------------------------------- HTML ------------------------------------------- */}
<div class="button">
<a href={url}>
<div class="pressable-label">
<div class="button when-no-print">
<a href={url} class="pressable-label">
<Icon name="material-symbols:left-click" />
<p>{t("global.openMediaPage")}</p>
</div>
</a>
</div>
@ -30,9 +28,10 @@ const { t } = await getI18n(Astro.locals.currentLocale);
gap: 0.3em;
font-size: 85%;
& > a > div {
& > a {
padding: 0.3em 0.6em;
padding-right: 0.8em;
gap: 0.7em;
}
}
</style>

39
src/components/RichText/components/RTUpload/components/RTImage.astro
View File

@ -44,6 +44,7 @@ const mediaPage = getLocalizedUrl(`/images/${id}`);
sizes={`(max-width: 550px) 90vw, 550px`}
width={width}
height={height}
loading="lazy"
/>
</a>
<OpenMediaPageButton url={mediaPage} />
@ -52,24 +53,34 @@ const mediaPage = getLocalizedUrl(`/images/${id}`);
{/* ------------------------------------------- CSS -------------------------------------------- */}
<style>
div {
margin-block: 4em;
display: flex;
flex-direction: column;
gap: 0.5em;
& > a > img {
width: 100%;
height: auto;
border-radius: 16px;
a {
display: block;
line-height: 0;
box-shadow: 0 5px 20px -10px var(--color-shadow);
margin-bottom: -0.5em;
}
border-radius: 16px;
overflow: hidden;
width: fit-content;
margin-bottom: 0.5em;
transition: 100ms scale;
transition-property: scale, margin-bottom;
transition-duration: 100ms;
&:hover {
&:hover,
&:focus-visible {
scale: 102%;
margin-bottom: 1em;
}
&:focus-visible {
outline: 3px solid var(--color-base-1000);
outline-offset: unset;
}
}
img {
max-height: 70vh;
max-width: 100%;
width: auto;
height: auto;
}
</style>

12
src/components/SourceRow.astro
View File

@ -38,11 +38,21 @@ const {
transition-property: text-decoration-color, color;
}
&:hover > p {
border-radius: 16px;
padding: 2px 5px;
margin: -2px -5px;
&:hover > p,
&:focus-visible > p {
color: var(--color-base-750);
text-decoration-color: var(--color-base-650);
}
&:focus-visible {
outline: 2px solid var(--color-base-1000);
outline-offset: unset;
}
&:active > p {
color: var(--color-base-650);
text-decoration-color: var(--color-base-550);

23
src/pages/[locale]/api/pages/partial.astro
View File

@ -68,9 +68,8 @@ if (updatedBy) {
<Fragment slot="header-aside">
{
thumbnail && (
<a href={getLocalizedUrl(`/images/${thumbnail.id}`)}>
<a id="thumbnail" href={getLocalizedUrl(`/images/${thumbnail.id}`)}>
<img
id="thumbnail"
src={thumbnail.url}
srcset={sizesToSrcset(thumbnail.sizes)}
sizes={`(max-width: 550px) 90vw, 550px`}
@ -166,13 +165,19 @@ if (updatedBy) {
}
#thumbnail {
border-radius: 16px;
box-shadow: 0 5px 20px -10px var(--color-shadow);
overflow: hidden;
transition: 100ms scale;
display: block;
width: fit-content;
& > img {
max-width: min(35rem, 100%);
max-height: 80vh;
width: auto;
height: auto;
border-radius: 16px;
box-shadow: 0 5px 20px -10px var(--color-shadow);
transition: 100ms scale;
}
@media (max-width: 1280.5px) {
margin-top: 2em;
@ -182,8 +187,14 @@ if (updatedBy) {
margin-bottom: 2em;
}
&:hover {
&:hover,
&:focus-visible {
scale: 102%;
}
&:focus-visible {
outline: 3px solid var(--color-base-1000);
outline-offset: unset;
}
}
</style>

8
src/pages/[locale]/collectibles/[slug]/_components/ImageTile.astro
View File

@ -57,10 +57,16 @@ const {
transition: 100ms scale;
&:hover {
&:hover,
&:focus-visible {
scale: 105%;
}
&:focus-visible {
outline: 3px solid var(--color-base-1000);
outline-offset: unset;
}
& > div {
text-align: center;
backdrop-filter: blur(5px);

16
src/pages/[locale]/collectibles/[slug]/index.astro
View File

@ -256,6 +256,17 @@ if (price) {
& a {
width: fit-content;
transition: 100ms scale;
&:hover,
&:focus-visible {
scale: 102%;
}
&:focus-visible {
outline: 3px solid var(--color-base-1000);
outline-offset: unset;
}
& > #thumbnail {
max-width: min(35rem, 100%);
@ -263,11 +274,6 @@ if (price) {
width: auto;
height: auto;
box-shadow: 0 5px 20px -10px var(--color-shadow);
transition: 100ms scale;
&:hover {
scale: 102%;
}
}
}

1
src/pages/[locale]/folders/[slug].astro
View File

@ -111,6 +111,7 @@ const meta = getLocalizedMatch(folder.translations);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: clamp(6px, 2vmin, 16px);
align-items: start;
}
}
</style>