CCCHH/hackertours
Watch
2
1
Fork
You've already forked hackertours
 3
Code Issues 2 Pull requests 1 Projects Releases Packages Wiki Activity Actions

40C3: tours, schedule data, tour map and calendar entries
Some checks failed
/ build (pull_request) Successful in 1m16s
Details
/ accessibility (pull_request) Failing after 2m25s
Details

Browse source 
- tour-map shortcode: Leaflet map of the tour locations with routes from the
  Congress, from the map/tours sections of data/schedule/<event>.yaml; Leaflet
  and the OSMIC, Maki and Temaki icon sets vendored; 39C3 uMap data converted.
- calendar shortcode: per tour date, a pill with an .ics download (iCalendar)
  and a Google Calendar link; Font Awesome Free vendored, fa-icon partial.
- README sections for the calendar and tour map shortcodes and the map data.
This commit is contained in:
Stefan Bethke 2026-10-17 10:29:01 +02:00
commit 821290616a
3864 changed files with 15276 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

32
assets/css/_custom.css
View file

@ -1,4 +1,5 @@
@import './_schedule.css';
@import './_tour-map.css';
@import './_gallery.css';
.header__intro_headline {
@ -106,3 +107,34 @@ span.content-image {
font-size: var(--fs-xs);
color: var(--color-text-meta);
}
/* 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;
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;
white-space: nowrap;
a {
display: inline-flex;
align-items: center;
min-height: 24px;
}
}
.tour-calendar__separator {
color: var(--color-text-meta);
}
.fa-icon {
width: 1em;
height: 1em;
}

96
assets/css/_tour-map.css Normal file
View file

@ -0,0 +1,96 @@
/* Tour map shortcode: Leaflet map of the tour locations, a plain list without JavaScript. */
.tour-map {
margin-block: var(--spacing-l);
}
/* Without JavaScript only the list is shown. */
.tour-map__canvas {
display: none;
}
.tour-map--ready {
.tour-map__canvas {
display: block;
height: clamp(20rem, 60vh, 36rem);
border: 1px solid color-mix(in oklch, var(--color-text) 20%, transparent);
border-radius: var(--radius-m);
}
/* Kept for screen readers, which can't use the map itself. */
.tour-map__list {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.tour-map__marker span {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
/* Leaflet positions the icon's top left corner; centre it on the location. */
margin: -1rem 0 0 -1rem;
border: 2px solid #fff;
border-radius: 50%;
background: var(--tour-map-color, #555);
box-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
}
/* The icon is drawn in white through its shape, whatever colours the SVG uses. */
.tour-map__marker i {
width: 60%;
height: 60%;
background: #fff;
mask: var(--tour-map-icon) center / contain no-repeat;
}
.tour-map__marker--origin span {
width: 2.75rem;
height: 2.75rem;
margin: -1.375rem 0 0 -1.375rem;
background: #111;
}
.tour-map {
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: var(--color-body-bg);
color: var(--color-text);
}
.leaflet-popup-content {
margin: 0.75rem 1rem;
font-family: var(--ff-alt);
font-size: var(--fs-s);
line-height: 1.4;
}
}
.tour-map__popup-title {
font-family: var(--ff-headings);
font-size: var(--fs-m);
font-weight: 600;
}
.tour-map__directions {
ul {
margin: 0.5rem 0 0;
padding-inline-start: 1.1rem;
}
p {
margin: 0.5rem 0 0;
}
}
/* Dark map tiles to match the dark colour scheme. */
@media (prefers-color-scheme: dark) {
.tour-map .leaflet-tile-pane {
filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9);
}
}