feat: have toolbar on the top by default (only return to left if the screen is short on height)

feat: center the layout by default
feat: switch font to Andika
feat: switch masonry to use rem units
feat: fit masonry to center

1 files changed, 9 insertions, 5 deletions

diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
index aad7984..8974ab4 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -147,25 +147,29 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 	var msnry_%s = new Masonry('.masonry-grid-%s', {
 		itemSelector: '.grid-item-%s',
 		columnWidth: '.grid-sizer-%s',
-		percentPosition: true
+		percentPosition: false,
+		fitWidth: true
 	});
 
 	var imgLoad_%s_timer;
 	var imgLoad_%s = imagesLoaded('.masonry-grid-%s');
 
-	function initMasonryLayout_%s() {
+	function initMasonryLayout_%s(tm) {
 		clearTimeout(imgLoad_%s_timer);
-		imgLoad_%s_timer = setTimeout(() => msnry_%s.layout(), 500);
+		imgLoad_%s_timer = setTimeout(() => msnry_%s.layout(), 300);
 	}
 
 	imgLoad_%s.on('progress', initMasonryLayout_%s);
 
+	window.addEventListener('resize', initMasonryLayout_%s);
+
 	document.addEventListener('popout', (e) => {
+		window.removeEventListener('resize', initMasonryLayout_%s);
 		imgLoad_%s.off('progress', initMasonryLayout_%s);
 		initMasonryLayout_%s = null;
 		imgLoad_%s = null;
-	});
-</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID))
+	}, {once: true});
+</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID))
 	}
 
 	return ast.WalkContinue, nil