Fixed lightbox misalignment

3 files changed, 28 insertions, 13 deletions

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 568265e..a5f077f 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -51,7 +51,7 @@
         grid-template-rows:    auto minmax(0, 1fr) auto auto;
         grid-template-columns: auto minmax(0, 1fr) auto;
         grid-template-areas:
-            'header     header     close'
+            'header     header     header'
             'prev       content    next'
             'thumbnails thumbnails thumbnails'
             'footer     footer     footer';
@@ -60,8 +60,10 @@
         overflow:              hidden;
 
         @include iro.bem-elem('header') {
-            grid-area: header;
-            padding:   fn.dim(--pad) fn.dim(--pad) 0;
+            grid-area:   header;
+            display:     flex;
+            align-items: flex-start;
+            padding:     fn.dim(--pad) fn.dim(--pad) 0;
         }
 
         @include iro.bem-elem('img') {
@@ -108,11 +110,9 @@
         }
 
         @include iro.bem-elem('close-btn') {
-            grid-area:    close;
-            align-self:   start;
-            margin-top:   calc(.5 * fn.dim(--pad));
-            margin-right: calc(.5 * fn.dim(--pad));
-            font-size:    fn.dim(--close-button --font-size);
+            flex:      0 0 auto;
+            margin:    calc(-.5 * fn.dim(--pad)) calc(-.5 * fn.dim(--pad)) 0 auto;
+            font-size: fn.dim(--close-button --font-size);
         }
 
         @include iro.bem-elem('nav-btn') {
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 5ba8c57..faf7fa2 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -2,12 +2,14 @@ include icon.pug
 
 mixin lightbox(images)
     .o-lightbox 
-        header.o-lightbox__header.s-colored-links
-            block
-        +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn')
+        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])
-        +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
-        +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
+        if images.length > 1
+            +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
+            +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
         .o-lightbox__thumbnails
             each img, i in images
                 - classes = i === 0 ? 'is-selected' : ''
diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug
index 174e904..c1e5054 100644
--- a/tpl/views/lightbox.pug
+++ b/tpl/views/lightbox.pug
@@ -12,3 +12,16 @@ mixin view-lightbox
                     = ' '
                     a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
                         = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
+
+        .c-box
+            +backdrop(class='t-dark')
+                +lightbox(['avatar.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"