Use a pill with explicit links for iCal and Google Calendar.
Some checks failed
/ build (pull_request) Successful in 27s
/ accessibility (pull_request) Failing after 1m41s

This commit is contained in:
Stefan Bethke 2026-10-17 02:13:21 +02:00
commit 443ae1e05d
9 changed files with 34 additions and 40 deletions

View file

@ -107,17 +107,30 @@ span.content-image {
color: var(--color-text-meta);
}
/* Calendar link after a tour date, see layouts/_shortcodes/calendar.html.
At least 24 by 24 pixels, so it is easy to hit (WCAG 2.5.8). */
/* Calendar links after a tour date, see layouts/_shortcodes/calendar.html.
The links are at least 24 pixels high, so they are easy to hit (WCAG 2.5.8). */
.tour-calendar {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
min-height: 24px;
margin-inline-start: 0.25em;
gap: 0.4em;
margin-inline-start: 0.4em;
padding: 0 0.6em;
border: 1px solid color-mix(in oklch, var(--color-text) 25%, transparent);
border-radius: 999px;
font-family: var(--ff-alt);
font-size: var(--fs-xs);
vertical-align: middle;
text-decoration: none;
white-space: nowrap;
a {
display: inline-flex;
align-items: center;
min-height: 24px;
}
}
.tour-calendar__separator {
color: var(--color-text-meta);
}
.fa-icon {

View file

@ -1,15 +0,0 @@
// Calendar shortcode: on Android, the calendar links add the date in Google Calendar instead of
// downloading the .ics file, because the Google Calendar app there can't open .ics files.
{
const isAndroid =
navigator.userAgentData?.platform === 'Android' || /\bAndroid\b/i.test(navigator.userAgent);
if (isAndroid) {
for (const link of document.querySelectorAll('a.tour-calendar[data-google-href]')) {
link.href = link.dataset.googleHref;
link.removeAttribute('download');
link.title = link.dataset.googleTitle;
link.querySelector('.visually-hidden').textContent = link.dataset.googleLabel;
}
}
}