Improved lightbox

3 files changed, 44 insertions, 17 deletions

diff --git a/assets/css/components/_lightbox.scss b/assets/css/components/_lightbox.scss
index b23943a..d980c41 100644
--- a/assets/css/components/_lightbox.scss
+++ b/assets/css/components/_lightbox.scss
@@ -6,9 +6,6 @@
                 --idle:  prop(--colors --fg-hi, $global: true),
                 --hover: prop(--colors --fg-lo, $global: true),
             )
-        ),
-        --dims: (
-            --col-width: 17em
         )
     ));
 
@@ -20,11 +17,11 @@
         top:             0;
         left:            0;
         box-sizing:      border-box;
+        flex-direction:  column;
         align-items:     center;
         justify-content: center;
         width:           100%;
         height:          100%;
-        padding:         1em calc(3em + 1rem);
         transition:      opacity .2s, visibility .2s;
         opacity:         0;
 
@@ -45,9 +42,22 @@
             opacity:    1;
         }
 
+        @include element('infobar') {
+            display:     flex;
+            box-sizing:  border-box;
+            flex:        0 0 auto;
+            align-items: center;
+            width:       100%;
+            padding:     0 1rem;
+        }
+
         @include element('img') {
-            max-width:  100%;
-            max-height: 100%;
+            max-width:      100%;
+            min-height:     0;
+            max-height:     100%;
+            margin-top:     auto;
+            margin-bottom:  auto;
+            padding-bottom: 2rem;
         }
 
         @include element('close', 'prev', 'next') {
@@ -63,20 +73,31 @@
         }
 
         @include element('close') {
-            position:  absolute;
-            top:       0;
-            right:     0;
-            padding:   1rem;
-            font-size: 1.5em;
+            margin:      0 -1rem 0 auto;
+            padding:     1rem;
+            font-size:   1.5em;
         }
 
         @include element('prev', 'next') {
             position:  absolute;
             top:       50%;
-            padding:   .5rem;
+            padding:   2rem .5rem;
             transform: translate(0, -50%);
             font-size: 3em;
 
+            &::before {
+                content:          '';
+                display:          block;
+                position:         absolute;
+                z-index:          -1;
+                top:              50%;
+                left:             50%;
+                width:            1.2em;
+                height:           1.2em;
+                transform:        translate(-50%, -50%);
+                background-color: rgba(#000, .25);
+            }
+
             > * {
                 stroke-width: .75px;
             }
diff --git a/content/lightbox.js b/content/lightbox.js
index d6115b4..4ec959d 100644
--- a/content/lightbox.js
+++ b/content/lightbox.js
@@ -5,6 +5,7 @@
     const mainEl = document.querySelector("main");
     const lightboxEl = document.querySelector(".c-lightbox");
     const lightboxBgEl = lightboxEl.querySelector(".c-lightbox__bg");
+    const lightboxCountEl = lightboxEl.querySelector(".c-lightbox__count");
     const lightboxCloseEl = lightboxEl.querySelector(".c-lightbox__close");
     const lightboxPrevEl = lightboxEl.querySelector(".c-lightbox__prev");
     const lightboxNextEl = lightboxEl.querySelector(".c-lightbox__next");
@@ -24,6 +25,7 @@
     const setIndex = (i) => {
         currentIndex = i;
         lightboxImgEl.src = figureEls[i].href;
+        lightboxCountEl.textContent = (i + 1) + " / " + figureEls.length;
         lightboxPrevEl.classList.toggle("u-dn", i === 0);
         lightboxNextEl.classList.toggle("u-dn", i === figureEls.length - 1);
     };
diff --git a/templates/base.html b/templates/base.html
index 0690ee1..6da1065 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -84,11 +84,15 @@ ${layouts/page()}
     <div class="c-lightbox">
         <div class="c-lightbox__bg"></div>
 
-        <button class="c-lightbox__close">
-            <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
-                <use href="/symbols.svg#icon-x"></use>
-            </svg>
-        </button>
+        <div class="c-lightbox__infobar">
+            <span class="c-lightbox__count"></span>
+            
+            <button class="c-lightbox__close">
+                <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
+                    <use href="/symbols.svg#icon-x"></use>
+                </svg>
+            </button>
+        </div>
 
         <button class="c-lightbox__prev">
             <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">