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';