feat: implement new prototype gallery

10 files changed, 206 insertions, 339 deletions

diff --git a/internal/glightbox/block.go b/internal/glightbox/block.go
new file mode 100644
index 0000000..696f328
--- /dev/null
+++ b/internal/glightbox/block.go
@@ -0,0 +1,31 @@
+package glightbox
+
+import (
+	"time"
+
+	"github.com/yuin/goldmark/ast"
+)
+
+// GLightboxBlock represents a light gallery block in the AST
+type GLightboxBlock struct {
+	ast.BaseBlock
+	Images   []GLightboxImage
+	Location *time.Location
+}
+
+type GLightboxImage struct {
+	URL     string
+	Caption []byte
+}
+
+var KindGLightboxBlock = ast.NewNodeKind("GLightboxBlock")
+
+// Dump implements ast.Node.Dump
+func (n *GLightboxBlock) Dump(source []byte, level int) {
+	ast.DumpHelper(n, source, level, nil, nil)
+}
+
+// Kind implements ast.Node.Kind
+func (n *GLightboxBlock) Kind() ast.NodeKind {
+	return KindGLightboxBlock
+}
diff --git a/internal/lightgallery/extension.go b/internal/glightbox/extension.go
index 761dc05..7fd17b1 100644
--- a/internal/lightgallery/extension.go
+++ b/internal/glightbox/extension.go
@@ -1,4 +1,4 @@
-package lightgallery
+package glightbox
 
 import (
 	"github.com/yuin/goldmark"
@@ -8,21 +8,21 @@ import (
 )
 
 // Extension that combines parser and renderer
-type LightGalleryExtension struct{}
+type GLightboxExtension struct{}
 
-func NewLightGalleryExtension() goldmark.Extender {
-	return &LightGalleryExtension{}
+func NewGLightboxExtension() goldmark.Extender {
+	return &GLightboxExtension{}
 }
 
-func (e *LightGalleryExtension) Extend(m goldmark.Markdown) {
+func (e *GLightboxExtension) Extend(m goldmark.Markdown) {
 	m.Parser().AddOptions(
 		parser.WithBlockParsers(
-			util.Prioritized(NewLightGalleryParser(), 500),
+			util.Prioritized(NewGLightboxParser(), 500),
 		),
 	)
 	m.Renderer().AddOptions(
 		renderer.WithNodeRenderers(
-			util.Prioritized(NewLightGalleryHTMLRenderer(), 500),
+			util.Prioritized(NewGLightboxHTMLRenderer(), 500),
 		),
 	)
 }
diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
new file mode 100644
index 0000000..3b6a533
--- /dev/null
+++ b/internal/glightbox/html_renderer.go
@@ -0,0 +1,134 @@
+package glightbox
+
+import (
+	"bytes"
+	"fmt"
+	"math/rand"
+	"strings"
+	"time"
+
+	"github.com/yuin/goldmark"
+	"github.com/yuin/goldmark/ast"
+	"github.com/yuin/goldmark/renderer"
+	"github.com/yuin/goldmark/renderer/html"
+	"github.com/yuin/goldmark/util"
+)
+
+type GLightboxHTMLRenderer struct {
+	html.Config
+	md goldmark.Markdown
+}
+
+func NewGLightboxHTMLRenderer(opts ...html.Option) renderer.NodeRenderer {
+	r := &GLightboxHTMLRenderer{
+		Config: html.NewConfig(),
+		md: goldmark.New(
+			goldmark.WithRendererOptions(
+				html.WithHardWraps(),
+				html.WithXHTML(),
+			),
+		),
+	}
+	for _, opt := range opts {
+		opt.SetHTMLOption(&r.Config)
+	}
+	return r
+}
+
+func (r *GLightboxHTMLRenderer) RegisterFuncs(reg renderer.NodeRendererFuncRegisterer) {
+	reg.Register(KindGLightboxBlock, r.renderGLightbox)
+}
+
+func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, n ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		gallery := n.(*GLightboxBlock)
+
+		if len(gallery.Images) == 0 {
+			return ast.WalkContinue, nil
+		}
+
+		galleryID := generateDivId(8)
+
+		var elements []string
+		for i, img := range gallery.Images {
+			imageUrlSegments := strings.Split(img.URL, ".")
+			imageUrlWithoutExt := strings.Join(imageUrlSegments[:len(imageUrlSegments)-1], ".")
+			imageUrlParts := strings.Split(imageUrlWithoutExt, "/")
+			imageNameParts := strings.Split(imageUrlParts[len(imageUrlParts)-1], "-")
+
+			var captionBuf bytes.Buffer
+			captionHTML := img.Caption
+			if err := r.md.Convert(img.Caption, &captionBuf); err == nil {
+				captionHTML = captionBuf.Bytes()
+				captionHTML = bytes.TrimPrefix(captionHTML, []byte("<p>"))
+				captionHTML = bytes.TrimSuffix(captionHTML, []byte("</p>\n"))
+				captionHTML = bytes.TrimSuffix(captionHTML, []byte("</p>"))
+			}
+
+			dayDate, _ := time.Parse("20060102 150405", imageNameParts[len(imageNameParts)-2]+" "+imageNameParts[len(imageNameParts)-1])
+			dayDate = dayDate.In(gallery.Location)
+
+			glightboxDescId := ""
+			if len(captionHTML) != 0 {
+				glightboxDescId = fmt.Sprintf("glightbox-desc-%s-%d", galleryID, i)
+			}
+
+			dataDescriptionAttribute := ""
+			if glightboxDescId != "" {
+				dataDescriptionAttribute = fmt.Sprintf("data-description=\".%s\"", glightboxDescId)
+			}
+
+			elements = append(elements, fmt.Sprintf(`
+	<a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox-%s grid-item grid-item-%s"
+	    data-gallery="gallery-%s" data-title="%s" %s>
+	    <img src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" class="rounded-md p-0.5" alt="webp thumbnail" />
+	</a>`, img.URL, galleryID, galleryID, galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt))
+
+			if glightboxDescId != "" {
+				elements = append(elements, fmt.Sprintf(`
+	<div class="glightbox-desc rounded-4 %s">
+		<p>%s</p>
+	</div>`, glightboxDescId, captionHTML))
+			}
+		}
+
+		w.WriteString(fmt.Sprintf(`
+<div class="justify-content-center display-block m-1">
+	<hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%%] ml-auto mr-auto">
+	<div class="grid masonry-grid-%s">
+		<div class="grid-sizer grid-sizer-%s"></div>
+		%s
+	</div>
+	<hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%%] ml-auto mr-auto">
+</div>`, galleryID, galleryID, strings.Join(elements, "\n")))
+
+		w.WriteString(fmt.Sprintf(`
+<script>
+	var lightbox_%s = GLightbox({
+		selector: '.glightbox-%s'
+	});
+
+	var msnry_%s = new Masonry('.masonry-grid-%s', {
+		itemSelector: '.grid-item-%s',
+		columnWidth: '.grid-sizer-%s',
+		percentPosition: true
+	});
+
+	imagesLoaded('.masonry-grid-%s', function() {
+		msnry_%s.layout();
+	});
+</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID))
+	}
+
+	return ast.WalkContinue, nil
+}
+
+func generateDivId(length int) string {
+	const charset = "abcdefghijklmnopqrstuvwxyz"
+	seededRand := rand.New(rand.NewSource(time.Now().UnixNano())) // Seed with current time
+	b := make([]byte, length)
+	for i := range b {
+		b[i] = charset[seededRand.Intn(len(charset))]
+	}
+	return string(b)
+}
diff --git a/internal/lightgallery/parser.go b/internal/glightbox/parser.go
index daec797..ba3f22e 100644
--- a/internal/lightgallery/parser.go
+++ b/internal/glightbox/parser.go
@@ -1,4 +1,4 @@
-package lightgallery
+package glightbox
 
 import (
 	"bytes"
@@ -11,17 +11,17 @@ import (
 	"github.com/yuin/goldmark/text"
 )
 
-type LightGalleryParser struct{}
+type GLightboxParser struct{}
 
-func NewLightGalleryParser() parser.BlockParser {
-	return &LightGalleryParser{}
+func NewGLightboxParser() parser.BlockParser {
+	return &GLightboxParser{}
 }
 
-func (p *LightGalleryParser) Trigger() []byte {
+func (p *GLightboxParser) Trigger() []byte {
 	return []byte{'{'}
 }
 
-func (p *LightGalleryParser) Open(parent ast.Node, reader text.Reader, pc parser.Context) (ast.Node, parser.State) {
+func (p *GLightboxParser) Open(parent ast.Node, reader text.Reader, pc parser.Context) (ast.Node, parser.State) {
 	line, _ := reader.PeekLine()
 
 	if !bytes.HasPrefix(line, []byte("{Gallery:")) {
@@ -43,10 +43,10 @@ func (p *LightGalleryParser) Open(parent ast.Node, reader text.Reader, pc parser
 		return nil, parser.NoChildren
 	}
 
-	return &LightGalleryBlock{Location: loc}, parser.NoChildren
+	return &GLightboxBlock{Location: loc}, parser.NoChildren
 }
 
-func (p *LightGalleryParser) Continue(node ast.Node, reader text.Reader, pc parser.Context) parser.State {
+func (p *GLightboxParser) Continue(node ast.Node, reader text.Reader, pc parser.Context) parser.State {
 	line, segment := reader.PeekLine()
 	if len(line) == 0 || segment.Len() == 0 {
 		return parser.Continue | parser.NoChildren
@@ -58,7 +58,7 @@ func (p *LightGalleryParser) Continue(node ast.Node, reader text.Reader, pc pars
 		return parser.Close
 	}
 
-	gallery := node.(*LightGalleryBlock)
+	gallery := node.(*GLightboxBlock)
 
 	parts := bytes.SplitN(trimmed, []byte{'|'}, 2)
 	url := bytes.TrimSpace(parts[0])
@@ -68,7 +68,7 @@ func (p *LightGalleryParser) Continue(node ast.Node, reader text.Reader, pc pars
 		caption = bytes.TrimSpace(parts[1])
 	}
 
-	gallery.Images = append(gallery.Images, LightGalleryImage{
+	gallery.Images = append(gallery.Images, GLightboxImage{
 		URL:     string(url),
 		Caption: caption,
 	})
@@ -76,13 +76,13 @@ func (p *LightGalleryParser) Continue(node ast.Node, reader text.Reader, pc pars
 	return parser.Continue | parser.NoChildren
 }
 
-func (p *LightGalleryParser) Close(node ast.Node, reader text.Reader, pc parser.Context) {
+func (p *GLightboxParser) Close(node ast.Node, reader text.Reader, pc parser.Context) {
 }
 
-func (p *LightGalleryParser) CanInterruptParagraph() bool {
+func (p *GLightboxParser) CanInterruptParagraph() bool {
 	return true
 }
 
-func (p *LightGalleryParser) CanAcceptIndentedLine() bool {
+func (p *GLightboxParser) CanAcceptIndentedLine() bool {
 	return false
 }
diff --git a/internal/lightgallery/block.go b/internal/lightgallery/block.go
deleted file mode 100644
index 8eb7c9e..0000000
--- a/internal/lightgallery/block.go
+++ /dev/null
@@ -1,31 +0,0 @@
-package lightgallery
-
-import (
-	"time"
-
-	"github.com/yuin/goldmark/ast"
-)
-
-// LightGalleryBlock represents a light gallery block in the AST
-type LightGalleryBlock struct {
-	ast.BaseBlock
-	Images   []LightGalleryImage
-	Location *time.Location
-}
-
-type LightGalleryImage struct {
-	URL     string
-	Caption []byte
-}
-
-var KindLightGalleryBlock = ast.NewNodeKind("LightGalleryBlock")
-
-// Dump implements ast.Node.Dump
-func (n *LightGalleryBlock) Dump(source []byte, level int) {
-	ast.DumpHelper(n, source, level, nil, nil)
-}
-
-// Kind implements ast.Node.Kind
-func (n *LightGalleryBlock) Kind() ast.NodeKind {
-	return KindLightGalleryBlock
-}
diff --git a/internal/lightgallery/html_renderer.go b/internal/lightgallery/html_renderer.go
deleted file mode 100644
index c2f785e..0000000
--- a/internal/lightgallery/html_renderer.go
+++ /dev/null
@@ -1,145 +0,0 @@
-package lightgallery
-
-import (
-	"bytes"
-	"fmt"
-	"math/rand"
-	"strings"
-	"time"
-
-	"github.com/yuin/goldmark"
-	"github.com/yuin/goldmark/ast"
-	"github.com/yuin/goldmark/renderer"
-	"github.com/yuin/goldmark/renderer/html"
-	"github.com/yuin/goldmark/util"
-)
-
-type LightGalleryHTMLRenderer struct {
-	html.Config
-	md goldmark.Markdown
-}
-
-func NewLightGalleryHTMLRenderer(opts ...html.Option) renderer.NodeRenderer {
-	r := &LightGalleryHTMLRenderer{
-		Config: html.NewConfig(),
-		md: goldmark.New(
-			goldmark.WithRendererOptions(
-				html.WithHardWraps(),
-				html.WithXHTML(),
-			),
-		),
-	}
-	for _, opt := range opts {
-		opt.SetHTMLOption(&r.Config)
-	}
-	return r
-}
-
-func (r *LightGalleryHTMLRenderer) RegisterFuncs(reg renderer.NodeRendererFuncRegisterer) {
-	reg.Register(KindLightGalleryBlock, r.renderLightGallery)
-}
-
-func (r *LightGalleryHTMLRenderer) renderLightGallery(w util.BufWriter, source []byte, n ast.Node, entering bool) (ast.WalkStatus, error) {
-	if entering {
-		gallery := n.(*LightGalleryBlock)
-
-		if len(gallery.Images) == 0 {
-			return ast.WalkContinue, nil
-		}
-
-		galleryID := generateDivId(8)
-
-		w.WriteString(fmt.Sprintf(`
-<div class="justify-content-center display-block m-1">
-	<hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%%] ml-auto mr-auto">
-	<div id="lg-%s" class="inline-gallery-container relative ml-auto mr-auto"></div>
-	<hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%%] ml-auto mr-auto">
-</div>`, galleryID))
-
-		var dynamicElements []string
-		for _, img := range gallery.Images {
-			imageUrlSegments := strings.Split(img.URL, ".")
-			imageUrlWithoutExt := strings.Join(imageUrlSegments[:len(imageUrlSegments)-1], ".")
-			imageUrlParts := strings.Split(imageUrlWithoutExt, "/")
-			imageNameParts := strings.Split(imageUrlParts[len(imageUrlParts)-1], "-")
-
-			var captionBuf bytes.Buffer
-			captionHTML := img.Caption
-			if err := r.md.Convert(img.Caption, &captionBuf); err == nil {
-				captionHTML = captionBuf.Bytes()
-				captionHTML = bytes.TrimPrefix(captionHTML, []byte("<p>"))
-				captionHTML = bytes.TrimSuffix(captionHTML, []byte("</p>\n"))
-				captionHTML = bytes.TrimSuffix(captionHTML, []byte("</p>"))
-			}
-
-			dayDate, _ := time.Parse("20060102 150405", imageNameParts[len(imageNameParts)-2]+" "+imageNameParts[len(imageNameParts)-1])
-			dayDate = dayDate.In(gallery.Location)
-			dynamicElements = append(dynamicElements, fmt.Sprintf(`{
-				src:
-					"https://f003.backblazeb2.com/file/sayana-photos/full/%s",
-				downloadUrl:
-					"https://f003.backblazeb2.com/file/sayana-photos/full/%s",
-				alt: "%s",
-				responsive: "https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp 384, https://f003.backblazeb2.com/file/sayana-photos/webp-560p/%s.webp 672, https://f003.backblazeb2.com/file/sayana-photos/webp-800p/%s.webp 960, https://f003.backblazeb2.com/file/sayana-photos/webp-1200p/%s.webp 1440, https://f003.backblazeb2.com/file/sayana-photos/webp-1600p/%s.webp 1920",
-				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-base/[1] text-left font-spectral text-main-dark">%s</p>
-								<p class="!text-base/[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 createLightGallery%s() {
-	const $lgContainer = document.getElementById('lg-%s');
-	const config = {
-		container: $lgContainer,
-		dynamic: true,
-		dynamicEl: [%s],
-		width: "100%%",
-		height: "50vmin",
-		hash: false,
-		closable: false,
-		showMaximizeIcon: true,
-		appendSubHtmlTo: ".lg-sub-html",
-		isMobile: () => false,
-		slideDelay: 0,
-		plugins: [lgZoom, lgThumbnail],
-		thumbWidth: calculateVmin(10),
-		thumbHeight: "10vmin",
-		thumbMargin: 4
-	};
-	const inlineGallery = lightGallery($lgContainer, config);
-
-	setTimeout(() => {
-		inlineGallery.openGallery();
-	}, 200);
-
-	galleryMap.set(inlineGallery, createLightGallery%s);
-}
-
-document.addEventListener('htmx:afterRequest', (e) => {
-	if (e.detail.xhr.status == 404 || e.detail.successful != true) {
-		return console.error(e);
-    }
-	if (e.detail.target.id == 'general-page-body') {
-		createLightGallery%s();
-	}
-}, {once: true});
-</script>`, galleryID, galleryID, strings.Join(dynamicElements, ","), galleryID, galleryID))
-	}
-
-	return ast.WalkContinue, nil
-}
-
-func generateDivId(length int) string {
-	const charset = "abcdefghijklmnopqrstuvwxyz"
-	seededRand := rand.New(rand.NewSource(time.Now().UnixNano())) // Seed with current time
-	b := make([]byte, length)
-	for i := range b {
-		b[i] = charset[seededRand.Intn(len(charset))]
-	}
-	return string(b)
-}
diff --git a/main.go b/main.go
index 20e90f4..53dbb74 100644
--- a/main.go
+++ b/main.go
@@ -12,7 +12,7 @@ import (
 	"github.com/SayaAndy/saya-today-web/config"
 	"github.com/SayaAndy/saya-today-web/internal/b2"
 	"github.com/SayaAndy/saya-today-web/internal/factgiver"
-	"github.com/SayaAndy/saya-today-web/internal/lightgallery"
+	"github.com/SayaAndy/saya-today-web/internal/glightbox"
 	"github.com/SayaAndy/saya-today-web/internal/router"
 	"github.com/SayaAndy/saya-today-web/internal/tailwind"
 	"github.com/SayaAndy/saya-today-web/locale"
@@ -32,7 +32,7 @@ import (
 var (
 	md = goldmark.New(
 		goldmark.WithExtensions(
-			lightgallery.NewLightGalleryExtension(),
+			glightbox.NewGLightboxExtension(),
 			tailwind.NewTailwindExtension(),
 		),
 		goldmark.WithParserOptions(
diff --git a/static/input.css b/static/input.css
index 51c3c30..36d17b2 100644
--- a/static/input.css
+++ b/static/input.css
@@ -247,10 +247,6 @@ a:hover {
     background-size: calc(var(--squares-and-triangles-background-width-coef) * 1vw) calc(var(--squares-and-triangles-background-height-coef) * 1vw);
 }
 
-body:has(.lg-container:not([class~="lg-inline"])) #sidebar {
-    display: none !important;
-}
-
 .logo-custom {
     width: 3.5vw;
     height: 20vw;
@@ -346,142 +342,25 @@ body:has(.lg-container:not([class~="lg-inline"])) #sidebar {
     transform: scale(1.1);
 }
 
-.lg-backdrop {
-    background-color: var(--background-light-color);
-    opacity: 0.8 !important;
-}
-
-.lg-container:not([class~="lg-inline"]) .lg-outer {
-    width: 90%;
-    height: 90%;
-    margin: 5dvh 5dvw;
-}
-
-.lg-thumb-outer {
-    background-color: var(--background-light-color) !important;
-    opacity: 0.8 !important;
-}
-
-.lg-prev {
-    background-color: var(--background-light-color);
-    color: var(--main-dark-color);
-}
-
-.lg-next {
-    background-color: var(--background-light-color);
-    color: var(--main-dark-color);
-}
-
-.lg-counter {
-    color: var(--main-dark-color);
-    font-family: 'Spectral';
-    font-size: 1vmax;
-    padding-top: 0;
-    height: 1vmax;
-}
-
-.lg-container:not([class~="lg-inline"]) .lg-counter {
-    font-size: 2vmax;
-    height: 2vmax;
-}
-
-.lg-content {
-    top: 2.5vmax !important;
-    bottom: calc(10vmin + 5vmax) !important;
-}
-
-.lg-outer[class~="lg-single-item"] .lg-content {
-    bottom: 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-content .lg-icon {
-    padding: 0 0.7vmax;
-    font-size: 1.5vmax !important;
-    height: 1.5vmax;
-    width: auto;
-    color: var(--main-dark-color);
-}
-
-.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;
+.grid-item, .grid-sizer {
+    width: 50%;
 }
 
-.lg-toolbar .lg-icon:hover {
-    color: var(--main-medium-color);
-}
-
-.lg-toolbar .lg-icon {
-    font-size: 1.5vmax !important;
-    color: var(--main-dark-color);
-}
-
-.lg-content .lg-icon:hover {
-    color: var(--main-medium-color);
-}
-
-.lg-sub-html {
-    padding: 0.7vmin 1.25vmin !important;
-}
-
-.inline-gallery-container {
-    width: 80%;
-    height: 70vmin;
-}
-
-.light-gallery-captions {
-    p {
-        transform: translate3d(0, 0, 0px);
-        transition-delay: 500ms;
-        opacity: 1;
+@media (width >= 32rem) {
+    .grid-item, .grid-sizer {
+        width: 33%;
     }
 }
 
-.lg-slide-progress {
-    .light-gallery-captions {
-        h4 {
-            transform: translate3d(-60px, 0, 0px);
-        }
-
-        p {
-            transform: translate3d(60px, 0, 0px);
-        }
-
-        h4,
-        p {
-            opacity: 0;
-        }
+@media (width >= 40rem) {
+    .grid-item, .grid-sizer {
+        width: 25%;
     }
 }
 
-.lg-current {
-    &.lg-slide-progress {
-        .light-gallery-captions {
-
-            h4,
-            p {
-                transition-delay: 0ms;
-            }
-        }
+@media (width >= 48rem) {
+    .grid-item, .grid-sizer {
+        width: 20%;
     }
 }
 
@@ -535,8 +414,8 @@ body[data-theme~="ram"] .leaflet-tile {
         background-size: calc(var(--squares-and-triangles-background-width-coef) * 1.6vh) calc(var(--squares-and-triangles-background-height-coef) * 1.6vh);
     }
 
-    .inline-gallery-container {
-        width: 100%;
+    .ar-lt-0\.8\:bg-background-light {
+        background-color: var(--background-light-color);
     }
 
     .logo-custom {
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 5d84649..88c5de5 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -7,10 +7,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Patua+One&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/css/lightgallery.min.css">
-    <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/css/lg-zoom.min.css">
-    <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/css/lg-thumbnail.min.css">
     <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.css">
+    <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/glightbox/3.3.0/css/glightbox.min.css">
     <link href="/output.css" rel="stylesheet">
 </head>
 
@@ -26,6 +24,8 @@
         };
     </script>
 
+    <script src="https://f003.backblazeb2.com/file/sayana-static/libs/glightbox/3.3.0/js/glightbox.min.js"></script>
+
     <script>
         function sfc32(a, b, c, d) {
             return function() {
@@ -208,10 +208,9 @@
     </div>
 
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/htmx/2.0.6/htmx.min.js"></script>
-    <script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/lightgallery.min.js"></script>
-    <script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/plugins/lg-zoom.min.js"></script>
-    <script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/plugins/lg-thumbnail.min.js"></script>
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.js"></script>
+    <script src="https://f003.backblazeb2.com/file/sayana-static/libs/imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script>
+    <script src="https://f003.backblazeb2.com/file/sayana-static/libs/masonry-layout/4.2.2/masonry.pkgd.min.js"></script>
 
     <div id="general-page-bottom-embeds" class="flex"
         hx-get="/api/v1/general-page/bottom-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html
index faa6588..05a7bc5 100644
--- a/views/pages/blog-catalogue.html
+++ b/views/pages/blog-catalogue.html
@@ -1,7 +1,7 @@
 {{ define "body" }}
 <div class="flex flex-row ar-lt-0.8:flex-col text-base h-[100%]">
     <form hx-get="/api/v1/blog-search" hx-vals='{"lang": "{{ .Lang }}"}' hx-target=".blog-cards" hx-swap="innerHTML"
-        class="tags-list ar-gt-0.8:min-w-[10dvh] ar-gt-0.8:max-w-[20dvh] ar-gt-0.8:w-fit ar-lt-0.8:w-[100%] ar-lt-0.8:max-h-[30%] flex shrink-0 flex-col ar-gt-0.8:mr-6 bg-background-light inset-shadow">
+        class="tags-list ar-gt-0.8:min-w-[10dvh] ar-gt-0.8:max-w-[20dvh] ar-gt-0.8:w-fit ar-lt-0.8:w-[100%] ar-lt-0.8:max-h-[30%] flex shrink-0 flex-col ar-gt-0.8:mr-6 bg-background-dark ar-lt-0.8:bg-background-light inset-shadow">
         <div class="flex flex-col overflow-y-auto">
             <fieldset>
                 <legend class="font-bold w-[100%] text-center">{{ .L.BlogSearch.TagsHeader }}</legend>