Improved lightbox

7 files changed, 87 insertions, 24 deletions

diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 9ab140e..a0ec11e 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -18,7 +18,7 @@
 
     @include iro.props-store((
         --colors: (
-            --bg: rgba(#000, .75),
+            --bg: rgba(#000, .85),
         ),
     ), 'colors-dark');
 
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 3ba9744..59ae03f 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -4,32 +4,81 @@
 @include iro.props-namespace('lightbox') {
     @include iro.props-store((
         --dims: (
-            
+            --pad-x:   fn.global-dim(--size --150),
+            --pad-y:   fn.global-dim(--size --150),
+            --spacing: fn.global-dim(--size --200),
+            --thumbnail: (
+                --size:     fn.global-dim(--size --800),
+                --spacing:  fn.global-dim(--size --100),
+                --selected: 3px,
+            ),
         ),
     ), 'dims');
 
+    @include iro.props-store((
+        --colors: (
+            --thumbnail: (
+                --selected: fn.global-color(--fg-lo),
+            ),
+        ),
+    ), 'colors');
+
     @include iro.bem-object(iro.props-namespace()) {
-        display: contents;
+        display:               grid;
+        grid-template-rows:    auto minmax(0, 1fr) auto;
+        grid-template-columns: minmax(0, 1fr) auto;
+        grid-template-areas:   'header close' 'content content' 'footer footer';
+        gap:                   fn.dim(--spacing);
+        min-height:            0;
+
+        @include iro.bem-elem('footer') {
+            grid-area: footer;
+            display:   flex;
+            gap:       fn.dim(--thumbnail --spacing);
+            padding:   fn.dim(--thumbnail --selected);
+            overflow:  auto;
+        }
 
         @include iro.bem-elem('header') {
-            display:     flex;
-            box-sizing:  border-box;
-            flex:        0 0 auto;
-            align-items: center;
-            width:       100%;
+            grid-area:     header;
+            overflow:      hidden;
+            text-overflow: ellipsis;
+            white-space:   nowrap;
         }
 
         @include iro.bem-elem('img') {
-            align-self:    center;
-            max-width:     100%;
-            min-height:    0;
-            max-height:    100%;
-            margin-top:    auto;
-            margin-bottom: auto;
+            grid-area:    content;
+            justify-self: center;
+            max-width:    100%;
+            max-height:   100%;
+        }
+
+        @include iro.bem-elem('thumbnail') {
+            opacity: .75;
+
+            &:hover {
+                opacity: 1;
+            }
+
+            @include iro.bem-is('selected') {
+                opacity:    1;
+                box-shadow: 0 0 0 fn.dim(--thumbnail --selected) fn.color(--thumbnail --selected);
+            }
+        }
+
+        @include iro.bem-elem('thumbnail-img') {
+            display:         block;
+            width:           fn.dim(--thumbnail --size);
+            height:          fn.dim(--thumbnail --size);
+            object-fit:      cover;
+            object-position: center center;
         }
 
         @include iro.bem-elem('close-btn') {
-            margin-left: auto;
+            --icon-stroke-width: 2px;
+
+            grid-area: close;
+            font-size: fn.global-dim(--font-size --150);
         }
     }
 }
diff --git a/static/ava_feralbot.png b/static/ava_feralbot.png
new file mode 100755
index 0000000..402f927
--- /dev/null
+++ b/static/ava_feralbot.png
diff --git a/static/volpeon_spooky.png b/static/volpeon_spooky.png
new file mode 100755
index 0000000..223769d
--- /dev/null
+++ b/static/volpeon_spooky.png
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)