refactor: more line height in gallery captions

feat: fixate gallery divs to viewport measures
feat: make thumbnails square
feat: remove recreating gallery on window resize

2 files changed, 25 insertions, 19 deletions

diff --git a/internal/lightgallery/html_renderer.go b/internal/lightgallery/html_renderer.go
index 7ecad44..849759e 100644
--- a/internal/lightgallery/html_renderer.go
+++ b/internal/lightgallery/html_renderer.go
@@ -83,15 +83,15 @@ func (r *LightGalleryHTMLRenderer) renderLightGallery(w util.BufWriter, source [
 				thumb:
 					"https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp",
 				subHtml: `+"`"+`<div class="flex flex-row light-gallery-captions">
-								<p class="grow !text-[1vmax]/[0.9] text-left font-spectral text-main-dark">%s</p>
-								<p class="!text-[1vmax]/[0.9] text-right font-spectral text-secondary">%s</p>
+								<p class="grow !text-[1vmax]/[1] text-left font-spectral text-main-dark">%s</p>
+								<p class="!text-[1vmax]/[1] text-right font-spectral text-secondary">%s</p>
 							</div>`+"`"+`
 			}`, img.URL, img.URL, util.EscapeHTML(captionHTML), imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, captionHTML, dayDate.Format("2006-01-02 15:04:05 -07:00")))
 		}
 
 		w.WriteString(fmt.Sprintf(`
 <script>
-function createLightLibrary%s() {
+function createLightGallery%s() {
 		const $lgContainer = document.getElementById('lg-%s');
         const inlineGallery = lightGallery($lgContainer, {
 			container: $lgContainer,
@@ -116,18 +116,8 @@ function createLightLibrary%s() {
 		}, 200);
 }
 
-document.addEventListener('DOMContentLoaded', createLightLibrary%s);
-
-let resizeTimer%s;
-window.addEventListener("resize", () => {
-	clearTimeout(resizeTimer%s);
-	resizeTimer%s = setTimeout(() => {
-		const $lgContainer = document.getElementById('lg-%s');
-		$lgContainer.innerHTML = "";
-		createLightLibrary%s();
-	}, 1000);
-});
-</script>`, galleryID, galleryID, strings.Join(dynamicElements, ","), galleryID, galleryID, galleryID, galleryID, galleryID, galleryID))
+document.addEventListener('DOMContentLoaded', createLightGallery%s);
+</script>`, galleryID, galleryID, strings.Join(dynamicElements, ","), galleryID))
 	}
 
 	return ast.WalkContinue, nil
diff --git a/static/input.css b/static/input.css
index 0d6e786..8c0069b 100644
--- a/static/input.css
+++ b/static/input.css
@@ -323,14 +323,21 @@ body:has(.lg-container:not([class~="lg-inline"])) #sidebar {
 }
 
 .lg-content {
-    top: 3vmax !important;
+    top: 2.5vmax !important;
+    bottom: calc(10vmin + 5vmax) !important;
+}
+
+.lg-thumb-item {
+    width: 10vmin !important;
+    height: 10vmin !important;
 }
 
 .lg-container:not([class~="lg-inline"]) .lg-content {
     top: 4vmax !important;
 }
 
-.lg-toolbar .lg-icon {
+.lg-toolbar .lg-icon,
+.lg-content .lg-icon {
     padding: 0 0.7vmax;
     font-size: 1.5vmax !important;
     height: 1.5vmax;
@@ -338,11 +345,20 @@ body:has(.lg-container:not([class~="lg-inline"])) #sidebar {
     color: var(--main-dark-color);
 }
 
-.lg-container:not([class~="lg-inline"]) .lg-toolbar .lg-icon {
+.lg-container:not([class~="lg-inline"]) .lg-toolbar .lg-icon,
+.lg-container:not([class~="lg-inline"]) .lg-content .lg-icon {
     font-size: 3vmax !important;
     height: 3vmax;
 }
 
+.lg-prev {
+    left: 0 !important;
+}
+
+.lg-next {
+    right: 0 !important;
+}
+
 .lg-toolbar .lg-icon:hover {
     color: var(--main-medium-color);
 }
@@ -362,7 +378,7 @@ body:has(.lg-container:not([class~="lg-inline"])) #sidebar {
 
 .inline-gallery-container {
     width: 80%;
-    height: 60vmin;
+    height: 70vmin;
 }
 
 .light-gallery-captions {