1 files changed, 36 insertions, 61 deletions

diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index e68fcab..8978eb8 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -1,33 +1,29 @@
-{{ define "top-embeds" }}
-<script>
-    var galleryMap = new Map();
-    var map;
-
-    window.addEventListener('popout', (e) => {
-        map.remove();
-        galleryMap.forEach((_, g, m) => {
-            g.destroy();
-        });
-        galleryMap.clear();
-    }, {once: true});
-</script>
-{{ end }}
-
 {{ define "body" }}
-<div class="bg-background-light flex flex-col inset-shadow p-[2.4vmin] overflow-y-auto">
+<div class="absolute w-full h-full inset-0 inset-shadow-[0_0_0.4rem_black] pointer-events-none z-20"></div>
+<article class="relative bg-paper bg-background-light flex flex-col px-8 py-4 overflow-y-auto">
+    <h1 class="max-xs:block [@media(max-height:32rem)]:block hidden font-gentium text-2xl font-bold italic text-main-hard tracking-[.0125rem] mb-1">{{ .Title }}</h1>
+    <p class="block grow text-lg font-gentium text-secondary">
+        <b>{{ .L.Metadata.Published }}</b>: 
+        <time datetime="{{ .PublishedDate }}" hx-get="/api/v1/tz" hx-vals='js:{timestamp: "{{ .PublishedDate }}", tz: clientTimeZone}' hx-target="this" hx-swap="innerHTML" hx-trigger="load">
+            {{ .PublishedDate }}
+        </time>
+    </p>
+    <p class="block grow text-lg font-gentium text-secondary"><b>{{ .L.Metadata.Action }}</b>: {{ .ActionDate }}</p>
+    <p class="block grow text-md font-gentium font-thin text-main-hard">{{ .ShortDescription }}</p>
+    <hr class="block border-t-2 border-dotted border-main-hard mt-1 mb-2 w-full ml-auto mr-auto">
     {{ .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="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">
+    <hr class="border-t-3 border-dotted border-main-hard mt-1 mb-2 w-[80%] ml-auto mr-auto">
+    <div id="map-container" class="relative p-1 flex-none ml-auto mr-auto w-[60%] ar-lt-0.8:w-[80%] h-[40dvh] ar-lt-0.8:h-[30dvh]"></div>
+    <hr class="border-t-3 border-dotted border-main-hard mt-1 mb-2 w-[80%] ml-auto mr-auto">
 
     <script>
         function initLocationMap(id, x, y, relativeErrorMeters = 0) {
             map = L.map(id).setView([x, y], 8);
 
-            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                maxZoom: 18,
-                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+            L.tileLayer('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png', {
+                maxZoom: 20,
+                attribution: '<a href="https://github.com/cyclosm/cyclosm-cartocss-style/releases" title="CyclOSM - Open Bicycle render">CyclOSM</a> | Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
             }).addTo(map);
 
             if (relativeErrorMeters != 0) {
@@ -46,48 +42,27 @@
                 .openPopup();
         }
 
-        document.addEventListener('htmx:afterRequest', (e) => {
-            if (e.detail.target.id == 'general-page-body') {
-                initLocationMap(
-                    'map-container',
-                    {{ .MapLocationX }},
-                    {{ .MapLocationY }},
-                    {{ .MapLocationAreaMeters }}
-                );
-            }
-        }, {once: true});
+        if (map) {
+            map.remove();
+            map = null;
+        }
+
+        setTimeout(() => initLocationMap(
+            'map-container',
+            {{ .MapLocationX }},
+            {{ .MapLocationY }},
+            {{ .MapLocationAreaMeters }}
+        ), 1000);
+
+        var lightbox = GLightbox({
+            selector: '.glightbox',
+            moreLength: 0
+        });
     </script>
 {{- end }}
-</div>
+</article>
 {{ end }}
 
-{{ define "footer" }}
+{{ define "header" }}
 <div hx-get="/api/v1/like" hx-target="this" hx-swap="outerHTML" hx-trigger="load"></div>
 {{ end }}
-
-{{ define "bottom-embeds" }}
-<script>
-    let galleryResizeTimeout;
-
-    function resizeCb() {
-        clearTimeout(galleryResizeTimeout);
-        galleryResizeTimeout = setTimeout(() => {
-            if (map !== undefined) {
-                map.invalidateSize();
-            }
-            var oldGalleryMap = new Map(galleryMap);
-            oldGalleryMap.forEach((createFunc, g, map) => {
-                galleryMap.delete(g);
-                g.destroy();
-                createFunc();
-            });
-        }, 300);
-    }
-
-    window.addEventListener('resize', resizeCb);
-
-    document.addEventListener('popout', (e) => {
-        window.removeEventListener('resize', resizeCb, {once: true});
-    });
-</script>
-{{ end }}
\ No newline at end of file