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

2 files changed, 17 insertions, 13 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
diff --git a/internal/tailwind/transformer.go b/internal/tailwind/transformer.go
index 23ba1a3..d4d908c 100644
--- a/internal/tailwind/transformer.go
+++ b/internal/tailwind/transformer.go
@@ -20,19 +20,19 @@ func (t *TailwindTransformer) Transform(node *ast.Document, reader text.Reader,
 		switch node := n.(type) {
 		case *ast.Heading:
 			classes := map[int]string{
-				1: "font-patua text-4xl font-bold text-main-dark mb-3 tracking-[.0125rem]",
-				2: "font-spectral text-3xl font-bold text-main-dark mb-1 tracking-[.0125rem]",
-				3: "font-spectral text-2xl font-medium text-main-dark mb-0.8 tracking-[.0125rem]",
-				4: "font-spectral text-xl font-medium text-main-medium mb-0.5 tracking-[.0125rem]",
-				5: "font-spectral text-base font-medium text-main-medium mb-0.5 italic tracking-[.0125rem]",
-				6: "font-spectral text-base font-medium text-secondary mb-0.5",
+				1: "font-andika text-4xl font-bold text-main-dark mb-3 tracking-[.0125rem]",
+				2: "font-andika text-3xl font-bold text-main-dark mb-1 tracking-[.0125rem]",
+				3: "font-andika text-2xl font-medium text-main-dark mb-0.8 tracking-[.0125rem]",
+				4: "font-andika text-xl font-medium text-main-medium mb-0.5 tracking-[.0125rem]",
+				5: "font-andika text-base font-medium text-main-medium mb-0.5 italic tracking-[.0125rem]",
+				6: "font-andika text-base font-medium text-secondary mb-0.5",
 			}
 			if class, ok := classes[node.Level]; ok {
 				node.SetAttribute([]byte("class"), []byte(class))
 			}
 
 		case *ast.Paragraph:
-			node.SetAttribute([]byte("class"), []byte("text-base/[2] font-spectral tracking-[.0125rem] -indent-8 ml-4 mb-8"))
+			node.SetAttribute([]byte("class"), []byte("text-base/[2] font-andika tracking-[.0125rem] -indent-8 ml-4 mb-8"))
 
 		case *ast.List:
 			if node.IsOrdered() {
@@ -42,7 +42,7 @@ func (t *TailwindTransformer) Transform(node *ast.Document, reader text.Reader,
 			}
 
 		case *ast.ListItem:
-			node.SetAttribute([]byte("class"), []byte("text-base/[2] font-spectral tracking-[.0125rem]"))
+			node.SetAttribute([]byte("class"), []byte("text-base/[2] font-andika tracking-[.0125rem]"))
 
 		case *ast.Blockquote:
 			node.SetAttribute([]byte("class"), []byte("border-l-2 border-main-medium bg-background-dark p-1 mb-2 italic"))