sdf

Author: igwill

_includes/map.html

@@ -1,53 +1,3 @@
-<style>
-.map-wrap { position: relative; display: block; width: 100%; }
-.map-wrap img.basemap { width: 100%; display: block; }
-.pin {
-  position: absolute;
-  cursor: pointer;
-  transform: translate(-50%, -100%);
-}
-.pin-dot {
-  width: 14px; height: 14px;
-  border-radius: 50%;
-  background: #e24b4a;
-  border: 2.5px solid white;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
-  transition: transform 0.18s ease;
-}
-.pin:hover .pin-dot { transform: scale(1.6); }
-.tooltip {
-  position: absolute;
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 10px;
-  padding: 10px 12px;
-  width: 200px;
-  bottom: calc(100% + 10px);
-  left: 50%;
-  transform: translateX(-50%) translateY(4px);
-  opacity: 0;
-  transition: opacity 0.18s ease, transform 0.18s ease;
-  pointer-events: none;
-  z-index: 100;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
-}
-.pin:hover .tooltip {
-  opacity: 1;
-  transform: translateX(-50%) translateY(0);
-}
-.tooltip img { width: 100%; border-radius: 6px; margin-bottom: 6px; }
-.tooltip h3 { margin: 0 0 4px; font-size: 14px; }
-.tooltip p { margin: 0; font-size: 12px; color: #666; }
-.tail {
-  position: absolute;
-  bottom: -6px; left: 50%;
-  width: 10px; height: 10px;
-  background: white;
-  border-right: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
-  transform: translateX(-50%) rotate(45deg);
-}
-</style>
 <div class="map-wrap" markdown="0">
   <img class="basemap" src="/images/testmap.jpg" alt="World map" />
   <div class="pin" style="left: 10%; top: 30%;">

_sass/custom.scss

@@ -0,0 +1,48 @@
+.map-wrap { position: relative; display: block; width: 100%; }
+.map-wrap img.basemap { width: 100%; display: block; }
+.pin {
+  position: absolute;
+  cursor: pointer;
+  transform: translate(-50%, -100%);
+}
+.pin-dot {
+  width: 14px; height: 14px;
+  border-radius: 50%;
+  background: #e24b4a;
+  border: 2.5px solid white;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
+  transition: transform 0.18s ease;
+}
+.pin:hover .pin-dot { transform: scale(1.6); }
+.tooltip {
+  position: absolute;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  padding: 10px 12px;
+  width: 200px;
+  bottom: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+  opacity: 0;
+  transition: opacity 0.18s ease, transform 0.18s ease;
+  pointer-events: none;
+  z-index: 100;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+}
+.pin:hover .tooltip {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+.tooltip img { width: 100%; border-radius: 6px; margin-bottom: 6px; }
+.tooltip h3 { margin: 0 0 4px; font-size: 14px; }
+.tooltip p { margin: 0; font-size: 12px; color: #666; }
+.tail {
+  position: absolute;
+  bottom: -6px; left: 50%;
+  width: 10px; height: 10px;
+  background: white;
+  border-right: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  transform: translateX(-50%) rotate(45deg);
+}

assets/css/main.scss

@@ -40,4 +40,7 @@
     "vendor/font-awesome/fontawesome",
     "vendor/font-awesome/solid",
     "vendor/font-awesome/brands"
+"vendor/font-awesome/brands",
+    "custom"
+;
 ;