Add dynamic photoswipe padding

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/js/main.js

@@ -1,8 +1,6 @@
 import PhotoSwipeLightbox from "photoswipe/lightbox";
 import Masonry from "masonry-layout";
 
-const lightboxCaptionHeight = 5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
-
 const lightbox = new PhotoSwipeLightbox({
   gallery: ".lightbox",
   children: ".pswp-image",
@@ -10,12 +8,16 @@ const lightbox = new PhotoSwipeLightbox({
   hideAnimationDuration: 300,
   initialZoomLevel: "fit",
   pswpModule: () => import("photoswipe"),
-  padding: {
-    top: lightboxCaptionHeight,
-    bottom: lightboxCaptionHeight,
-    left: 0,
-    right: 0,
-  }
+  paddingFn: () => {
+    const captionHeight =
+      5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return {
+      top: captionHeight,
+      bottom: captionHeight,
+      left: 0,
+      right: 0,
+    };
+  },
 });
 
 lightbox.on("uiRegister", function () {