Use a pill with explicit links for iCal and Google Calendar.
This commit is contained in:
parent
1ff57e8c7a
commit
443ae1e05d
9 changed files with 34 additions and 40 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue