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

Add a generic tour-map shortcode and a data format to supply the necessary info
All checks were successful
/ build (pull_request) Successful in 27s
Details

Browse source
This commit is contained in:
Stefan Bethke 2026-10-16 20:21:21 +02:00
commit 14aed5e649
15 changed files with 1433 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

1
assets/css/_custom.css
View file

@ -1,4 +1,5 @@
@import './_schedule.css';
@import './_tour-map.css';
.header__intro_headline {
font: bold var(--fs-xxl) "Arial";

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

@ -0,0 +1,91 @@
/* 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);
font-size: 1rem;
line-height: 1;
}
.tour-map__marker--origin span {
width: 2.75rem;
height: 2.75rem;
margin: -1.375rem 0 0 -1.375rem;
background: #111;
font-size: 1.4rem;
}
.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);
}
}