sdf

Author: igwill

_includes/map.html

@@ -1,16 +1,11 @@
 <style>
 .map-wrap { position: relative; display: block; width: 100%; }
-
-/* Your background map image */
 .map-wrap img.basemap { width: 100%; display: block; }
-
-/* Each pin is absolutely positioned over the map */
 .pin {
   position: absolute;
   cursor: pointer;
-  transform: translate(-50%, -100%); /* anchor at the bottom-center of the dot */
+  transform: translate(-50%, -100%);
 }
-
 .pin-dot {
   width: 14px; height: 14px;
   border-radius: 50%;
@@ -20,16 +15,14 @@
   transition: transform 0.18s ease;
 }
 .pin:hover .pin-dot { transform: scale(1.6); }
-
-/* Tooltip balloon */
 .tooltip {
   position: absolute;
   background: white;
   border: 1px solid #ddd;
   border-radius: 10px;
   padding: 10px 12px;
   width: 200px;
-  bottom: calc(100% + 10px); /* sits above the pin */
+  bottom: calc(100% + 10px);
   left: 50%;
   transform: translateX(-50%) translateY(4px);
   opacity: 0;
@@ -42,13 +35,9 @@
   opacity: 1;
   transform: translateX(-50%) translateY(0);
 }
-
-/* Small image inside tooltip */
 .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 triangle */
+.tooltip p { margin: 0; font-size: 12px; color: #666; }
 .tail {
   position: absolute;
   bottom: -6px; left: 50%;
@@ -59,52 +48,29 @@
   transform: translateX(-50%) rotate(45deg);
 }
 </style>
-
 <div class="map-wrap" markdown="0">
   <img class="basemap" src="/images/testmap.jpg" alt="World map" />
-
-  <!-- Pin: left/top are % of the map image dimensions -->
   <div class="pin" style="left: 10%; top: 30%;">
     <div class="tooltip">
       <img src="/images/travels/lawncrush exp.png" alt="EXPERI" />
       <h3>Vancouver, Canada</h3>
-      <p>Testing an experiment idealsdfsoidfj sfj fit this all</p>
+      <p>Testing an experiment idealsdfsoidfj dskfjjnsdfn sdkjfnsf can this fit?</p>
       <div class="tail"></div>
     </div>
     <div class="pin-dot"></div>
   </div>
-
-  <div class="pin" style="left: 55%; top: 88%;">
-    <div class="tooltip">
-      <img src="/images/travels/NA" alt="NA" />
-      <h3>another place</h3>
-      <p>second pin</p>
-      <div class="tail"></div>
-    </div>
-    <div class="pin-dot"></div>
-  </div>
-
-
-  <!-- Add more pins here -->
 </div>
 
-
-
-<!-- extra bit for mobile click/hover functionality -->
 <script>
 document.querySelectorAll('.pin').forEach(pin => {
   pin.addEventListener('click', function(e) {
     e.stopPropagation();
-    // Close any other open pins first
     document.querySelectorAll('.pin.active').forEach(p => {
       if (p !== pin) p.classList.remove('active');
     });
-    // Toggle this one
     pin.classList.toggle('active');
   });
 });
-
-// Tap anywhere else on the map to close all tooltips
 document.addEventListener('click', () => {
   document.querySelectorAll('.pin.active').forEach(p => p.classList.remove('active'));
 });