v0.6.0v0.6.0

- feat: add map page
- feat: use webp of various sizes (320/560/800/1200/1600w) as thumbnails
- feat: fixate gallery divs to viewport measures
- feat: make thumbnails square
- feat: remove recreating gallery on window resize
- refactor: replace gap with margins
- refactor: more line height in gallery captions
- refactor: have routes in separate files

1 files changed, 6 insertions, 4 deletions

diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index 330a1ac..755744d 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -19,7 +19,7 @@
     {{ .ParsedMarkdown }}
 {{- if .MapLocationX }}
     <hr class="border-t-4 border-dotted border-main-dark mt-[0.8vmin] mb-[0.8vmin] w-[80%] ml-auto mr-auto">
-    <div id="location-map" class="relative p-[0.8vmin] flex-none ml-auto mr-auto w-[60%] ar-lt-0.8:w-[80%] h-[40vh] ar-lt-0.8:h-[30vh]"></div>
+    <div id="map-container" class="relative p-[0.8vmin] flex-none ml-auto mr-auto w-[60%] ar-lt-0.8:w-[80%] h-[40vh] ar-lt-0.8:h-[30vh]"></div>
     <hr class="border-t-4 border-dotted border-main-dark mt-[0.8vmin] mb-[0.8vmin] w-[80%] ml-auto mr-auto">
 {{- end }}
 </div>
@@ -33,8 +33,10 @@
 <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.js"></script>
 
 <script>
+    var map;
+
     function initLocationMap(id, x, y, relativeErrorMeters = 0) {
-        var map = L.map(id).setView([x, y], 8);
+        map = L.map(id).setView([x, y], 8);
 
         L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
             maxZoom: 18,
@@ -58,7 +60,7 @@
     }
 
     document.addEventListener('DOMContentLoaded', () => {initLocationMap(
-        'location-map',
+        'map-container',
         {{ .MapLocationX }},
         {{ .MapLocationY }},
         {{ .MapLocationAreaMeters }}
@@ -66,7 +68,7 @@
 
     window.addEventListener('resize', function() {
         setTimeout(() => {
-            if (window.location-map) window.location-map.invalidateSize();
+            map.invalidateSize();
         }, 100);
     });
 </script>