Stylized popup links

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

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 = `
-        <strong>
-            <a href="${m.link}" target="_blank">
+    let popupContent = "";
+    if (m.link) {
+        popupContent = `
+            <a href="${m.link}" target="_blank" class="title">
                 ${m.title}
             </a>
-        </strong>
-        <br>
-        ${m.description}
-    `;
+            <p>${m.description}</p>
+        `;
+    } else {
+        popupContent = `
+            <strong class="title">
+                ${m.title}
+            </strong>
+            <p>${m.description}</p>
+        `;
+    }
     marker.bindPopup(popupContent).openPopup();
 
     const displayTooltip = m.group === 'capitals';