Add photoswipe captions

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

assets/js/main.js

@@ -1,14 +1,41 @@
 import PhotoSwipeLightbox from "photoswipe/lightbox";
 import Masonry from "masonry-layout";
 
-new PhotoSwipeLightbox({
+const lightboxCaptionHeight = 5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+const lightbox = new PhotoSwipeLightbox({
   gallery: ".lightbox",
-  children: "a",
+  children: ".pswp-image",
   showAnimationDuration: 300,
   hideAnimationDuration: 300,
   initialZoomLevel: "fit",
   pswpModule: () => import("photoswipe"),
-}).init();
+  padding: {
+    top: lightboxCaptionHeight,
+    bottom: lightboxCaptionHeight,
+    left: 0,
+    right: 0,
+  }
+});
+
+lightbox.on("uiRegister", function () {
+  lightbox.pswp.ui.registerElement({
+    name: "caption",
+    order: 9,
+    isButton: false,
+    appendTo: "root",
+    onInit: (el, _) => {
+      lightbox.pswp.on("change", () => {
+        const element = lightbox.pswp.currSlide.data.element;
+        el.innerHTML =
+          element?.parentElement.querySelector(".pswp-caption-content")
+            ?.innerHTML || "";
+      });
+    },
+  });
+});
+
+lightbox.init();
 
 const masonryContainers = document.querySelectorAll(".masonry");
 masonryContainers.forEach((container) => {

assets/sass/common.scss

@@ -12,6 +12,10 @@ a {
   color: var(--text-600);
 }
 
+a:hover {
+  color: var(--text-700);
+}
+
 h1,
 h2,
 h3,

assets/sass/footer.scss

@@ -16,12 +16,11 @@
     color: color-mix(in srgb, var(--text) 30%, var(--background));
 
     a {
-      text-decoration: none;
       color: inherit;
     }
 
     a:hover {
-      color: var(--text-900);
+      color: var(--text-800);
     }
 
     .footer-nav {

assets/sass/header.scss

@@ -12,12 +12,11 @@
     align-items: center;
 
     a {
-      text-decoration: none;
       color: inherit;
     }
 
     a:hover {
-      color: var(--text-900);
+      color: var(--text-800);
     }
 
     .site-title {
@@ -83,7 +82,7 @@
           gap: 2rem;
 
           li a {
-            font-size: 1.25rem;
+            font-size: 1.5rem;
           }
         }
       }

assets/sass/list.scss

@@ -56,7 +56,6 @@ main.with-meta {
   .post {
     display: block;
     color: inherit;
-    text-decoration: none;
 
     &:not(:first-child) {
       margin-top: 4rem;
@@ -81,7 +80,7 @@ main.with-meta {
 
   .post:hover .title,
   .post:hover .summary {
-    color: var(--text-900);
+    color: var(--text-800);
   }
 }
 

assets/sass/photoswipe.scss

@@ -9,3 +9,29 @@
     var(--background)
   );
 }
+
+.pswp-caption-content {
+  display: none;
+}
+
+.pswp__caption {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 5rem;
+  padding: 1rem 2rem;
+  text-align: center;
+  line-height: 1.5rem;
+
+  .meta {
+    font-size: 0.7rem;
+  }
+
+  a {
+    color: inherit;
+  }
+
+  a:hover {
+    color: var(--text-800);
+  }
+}