diff --git a/src/assets/scss/_leaflet.scss b/src/assets/scss/_leaflet.scss index 29b0e268..6e35fed5 100644 --- a/src/assets/scss/_leaflet.scss +++ b/src/assets/scss/_leaflet.scss @@ -13,13 +13,29 @@ border-radius: .25rem; .leaflet-popup-content { - strong { - margin-bottom: .25em; + .title { + display: block; + font-weight: 600; + text-underline-offset: 2px; + text-decoration: underline; + } - a { - text-underline-offset: 2px; - text-decoration: underline; - } + strong.title { + color: #16a34a; + } + + a.title:hover { + text-decoration: none; + color: #16a34a; + } + + p { + + } + + > * + * { + margin: 0; + margin-top: .4em; } } } diff --git a/src/components/maps/WorldMap.astro b/src/components/maps/WorldMap.astro index 29445bcc..ae5a99c7 100644 --- a/src/components/maps/WorldMap.astro +++ b/src/components/maps/WorldMap.astro @@ -89,15 +89,22 @@ for (let i = 0; i < markers.length; i++) { } const marker = L.marker(coords, { icon: markerIcon }).addTo(map); - const popupContent = ` - - + let popupContent = ""; + if (m.link) { + popupContent = ` + ${m.title} - -
- ${m.description} - `; +

${m.description}

+ `; + } else { + popupContent = ` + + ${m.title} + +

${m.description}

+ `; + } marker.bindPopup(popupContent).openPopup(); const displayTooltip = m.group === 'capitals';