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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue