5 files changed, 31 insertions, 54 deletions

diff --git a/assets/css/components/_exhibit.scss b/assets/css/components/_exhibit.scss
index 6122206..9ef013b 100644
--- a/assets/css/components/_exhibit.scss
+++ b/assets/css/components/_exhibit.scss
@@ -3,31 +3,8 @@
 @use 'include-media/dist/include-media' as media;
 
 @include iro.props-namespace('exhibit') {
-    @include iro.props-store((
-        --colors: (
-            --footer: (
-                --bg: fn.global-color(--bg-hi),
-            ),
-        )
-    ), 'colors');
-
     @include iro.bem-component(iro.props-namespace()) {
-        display:             grid;
-        grid-template-rows:  1fr auto;
-        grid-template-areas: 'content' 'footer';
-        box-sizing:          border-box;
-        height:              100vh;
-        height:              100dvh;
-
-        @include iro.bem-elem('content') {
-            grid-area: content;
-            height:    auto;
-            overflow:  hidden;
-        }
-
-        @include iro.bem-elem('footer') {
-            grid-area:        footer;
-            background-color: fn.color(--footer --bg);
-        }
+        height: 100vh;
+        height: 100dvh;
     }
 }
diff --git a/content/lightbox.js b/content/lightbox.js
index e672d63..deb5cce 100644
--- a/content/lightbox.js
+++ b/content/lightbox.js
@@ -1,12 +1,14 @@
 (() => {
     const mainEl = document.querySelector("main");
     const lightboxContainerEl = document.querySelector(".js-lightbox");
-    const lightboxEl = lightboxContainerEl.querySelector(".o-lightbox");
+    const lightboxEl = lightboxContainerEl.classList.contains("o-lightbox")
+        ? lightboxContainerEl
+        : lightboxContainerEl.querySelector(".o-lightbox");
     const lightboxCloseEl = lightboxEl.querySelector(".o-lightbox__close-btn");
-    const lightboxPrevEl = lightboxEl.querySelector(".o-lightbox__prev-btn");
-    const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__next-btn");
+    const lightboxPrevEl = lightboxEl.querySelector(".o-lightbox__nav-btn--prev");
+    const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__nav-btn--next");
     const lightboxImgEl = lightboxEl.querySelector(".o-lightbox__img");
-    const lightboxFooterEl = lightboxEl.querySelector(".o-lightbox__footer");
+    const lightboxThumbnailsEl = lightboxEl.querySelector(".o-lightbox__thumbnails");
     const figureEls = Array.from(mainEl.querySelectorAll(".js-lightbox__image"));
 
     const standalone = lightboxContainerEl.classList.contains("js-lightbox--standalone");
@@ -72,7 +74,7 @@
         thumbnailButtonEl.appendChild(thumbnailImgEl);
         thumbnailButtonEl.addEventListener("click", go);
 
-        lightboxFooterEl.appendChild(thumbnailButtonEl);
+        lightboxThumbnailsEl.appendChild(thumbnailButtonEl);
 
         if (!standalone) {
             figureEl.firstElementChild.addEventListener("click", go);
@@ -89,7 +91,7 @@
     if (figureEls.length <= 1) {
         lightboxPrevEl.remove();
         lightboxNextEl.remove();
-        lightboxFooterEl.remove();
+        lightboxThumbnailsEl.remove();
     }
 
     if (!standalone) {
diff --git a/templates/layouts/exhibit.html b/templates/layouts/exhibit.html
index 1e0f19c..7e45298 100644
--- a/templates/layouts/exhibit.html
+++ b/templates/layouts/exhibit.html
@@ -5,26 +5,24 @@
     itemtype="https://schema.org/$schema_type$"
     itemid="$url.full$"
 >
-    <section class="c-exhibit js-lightbox js-lightbox--standalone">
-        <div class="c-exhibit__content o-lightbox">
-            <img class="o-lightbox__img" />
-        
-            <button class="o-lightbox__prev-btn o-action-button o-action-button--quiet o-action-button--round">
-                <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
-                    <use href="/icons.svg#chevron-left"></use>
-                </svg>
-            </button>
-        
-            <button class="o-lightbox__next-btn o-action-button o-action-button--quiet o-action-button--round">
-                <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
-                    <use href="/icons.svg#chevron-right"></use>
-                </svg>
-            </button>
-        
-            <footer class="o-lightbox__footer"></footer>
-        </div>            
+    <section class="c-exhibit o-lightbox js-lightbox js-lightbox--standalone">
+        <img class="o-lightbox__img" />
+    
+        <button class="o-lightbox__nav-btn o-lightbox__nav-btn--prev o-action-button o-action-button--quiet o-action-button--round">
+            <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
+                <use href="/icons.svg#chevron-left"></use>
+            </svg>
+        </button>
+    
+        <button class="o-lightbox__nav-btn o-lightbox__nav-btn--next o-action-button o-action-button--quiet o-action-button--round">
+            <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
+                <use href="/icons.svg#chevron-right"></use>
+            </svg>
+        </button>
+    
+        <div class="o-lightbox__thumbnails"></div>         
 
-        <footer class="c-exhibit__footer">
+        <footer class="o-lightbox__footer">
             <div class="l-container l-container--pad-x l-container--narrow-125">
                 <div class="l-media l-media--200 u-pl-0 u-pr-0">
                     <div class="l-media__block l-media__block--main">
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index 3721510..e40bf4c 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -46,19 +46,19 @@ $body$
         
             <img class="o-lightbox__img" />
         
-            <button class="o-lightbox__prev-btn o-action-button o-action-button--quiet o-action-button--round">
+            <button class="o-lightbox__nav-btn o-lightbox__nav-btn--prev o-action-button o-action-button--quiet o-action-button--round">
                 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
                     <use href="/icons.svg#chevron-left"></use>
                 </svg>
             </button>
         
-            <button class="o-lightbox__next-btn o-action-button o-action-button--quiet o-action-button--round">
+            <button class="o-lightbox__nav-btn o-lightbox__nav-btn--next o-action-button o-action-button--quiet o-action-button--round">
                 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
                     <use href="/icons.svg#chevron-right"></use>
                 </svg>
             </button>
         
-            <footer class="o-lightbox__footer"></footer>
+            <div class="o-lightbox__thumbnails"></div>
         </div>        
     </div>
 </main>
diff --git a/yarn.lock b/yarn.lock
index 038dc69..7b7fdbd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1280,7 +1280,7 @@ internal-slot@^1.0.3:
 
 "iro-design@git+https://git.vulpes.one/git/iro-design.git":
   version "1.0.0"
-  resolved "git+https://git.vulpes.one/git/iro-design.git#916c0b8fb2201f650ab32bac1d3896422c8f396f"
+  resolved "git+https://git.vulpes.one/git/iro-design.git#6a319739bb2adac5532a9b6547fd1e01af665a78"
   dependencies:
     "@oddbird/blend" "^0.2.3"
     include-media "^1.4.9"