Added external link marker and fix useless is:global

src/assets/scss/_leaflet.scss

@@ -8,6 +8,22 @@
     background: #f1f5f9;
 
     .leaflet-map-pane {
+        .leaflet-popup-pane {
+            .leaflet-popup-content-wrapper {
+                border-radius: .25rem;
+
+                .leaflet-popup-content {
+                    strong {
+                        margin-bottom: .25em;
+
+                        a {
+                            text-underline-offset: 2px;
+                            text-decoration: underline;
+                        }
+                    }
+                }
+            }
+        }
         .leaflet-tooltip-pane {
             .leaflet-tooltip {
                 &.capital-name {
@@ -30,7 +46,3 @@
         }
     }
 }
-
-.leaflet-popup-content-wrapper {
-    border-radius: .25rem;
-}

src/assets/scss/theme.scss

@@ -20,3 +20,16 @@ html {
     color: var(--slate-900);
 }
 
+a[href^='http'] {
+    padding-right: 1.25em;
+}
+
+a[href^='http']::after {
+    position: absolute;
+    content: "\e972";
+    font-family: 'Phosphor-Fill' !important;
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    margin-left: .25em;
+}

src/components/maps/WorldMap.astro

@@ -90,11 +90,11 @@ for (let i = 0; i < markers.length; i++) {
 
     const marker = L.marker(coords, { icon: markerIcon }).addTo(map);
     const popupContent = `
-        <b>
+        <strong>
             <a href="${m.link}" target="_blank">
                 ${m.title}
             </a>
-        </b>
+        </strong>
         <br>
         ${m.description}
     `;

src/layouts/Layout.astro

@@ -38,6 +38,6 @@ const { title } = Astro.props;
 	</body>
 </html>
 
-<style is:global lang="scss">
+<style lang="scss">
-    @import '../assets/scss/theme.scss';
+    @use '../assets/scss/theme.scss';
 </style>