Improved lightbox

3 files changed, 23 insertions, 9 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index fde71fd..ed538df 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -554,7 +554,16 @@ html
             +rule('medium')
 
             +box
-                +backdrop(class='t-dark' center=true)
-                    +lightbox('avatar.png')
+                +backdrop(class='t-dark')
+                    +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
+                        = "Let's try multiple links! "
+                        a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
+                            = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
+                        = ' '
+                        a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c")
+                            = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c"
+                        = ' '
+                        a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
+                            = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
 
 
diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug
index 3de1f99..cbe8866 100644
--- a/tpl/objects/backdrop.pug
+++ b/tpl/objects/backdrop.pug
@@ -1,9 +1,8 @@
 mixin backdrop
     -
         let classes = {
-            'o-backdrop':         true,
-            'u-p-relative':       true,
-            'o-backdrop--center': attributes.center
+            'o-backdrop':   true,
+            'u-p-relative': true,
         }
         if (attributes.class) {
             classes[attributes.class] = true;
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index ba68299..bfb4f49 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -1,5 +1,11 @@
-mixin lightbox(src)
+mixin lightbox(images)
     .o-lightbox 
-        header.o-lightbox__header
-            +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn')
-        img.o-lightbox__img(src=src)
+        header.o-lightbox__header.s-colored-links
+            block
+        +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn')
+        img.o-lightbox__img(src=images[0])
+        footer.o-lightbox__footer
+            each img, i in images
+                - classes = i === 0 ? 'is-selected' : ''
+                button.o-lightbox__thumbnail(class=classes)
+                    img.o-lightbox__thumbnail-img(src=img)