From 52e2f1b9edcf7507dbef073e4978d5deef04b672 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 18 Jun 2022 07:21:26 +0200
Subject: Update

---
 assets/css/components/_exhibit.scss |  8 +---
 assets/css/components/_header.scss  |  6 +--
 templates/layouts/exhibit.html      | 89 ++++++++++++++++++-------------------
 yarn.lock                           |  2 +-
 4 files changed, 49 insertions(+), 56 deletions(-)

diff --git a/assets/css/components/_exhibit.scss b/assets/css/components/_exhibit.scss
index 96ed1ae..a68c5f6 100644
--- a/assets/css/components/_exhibit.scss
+++ b/assets/css/components/_exhibit.scss
@@ -3,12 +3,6 @@
 @use 'include-media/dist/include-media' as media;
 
 @include iro.props-namespace('exhibit') {
-    @include iro.props-store((
-        --dims: (
-            --height:  100vh,
-        )
-    ), 'dims');
-
     @include iro.props-store((
         --colors: (
             --footer: (
@@ -22,7 +16,7 @@
         grid-template-rows:  1fr auto;
         grid-template-areas: 'content' 'footer';
         box-sizing:          border-box;
-        height:              fn.dim(--height);
+        height:              100vh;
 
         @include iro.bem-elem('content') {
             grid-area: content;
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index c8b50f8..2d8818f 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -19,7 +19,7 @@
 
     @include iro.props-store((
         --dims: (
-            --height: fn.global-dim(--header --height),
+            --height: calc(fn.global-dim(--header --height) - 2 * fn.dim(--gap, null)),
             --icon:   1.5rem,
             --pad-x:  calc(.5 * (fn.dim(--height, null) - fn.dim(--icon, null))),
             --gap:    fn.global-dim(--size --25),
@@ -36,8 +36,8 @@
         display:  flex;
         position: absolute;
         z-index:  100;
-        top:      0;
-        left:     0;
+        top:      fn.dim(--gap);
+        left:     fn.dim(--gap);
         height:   fn.dim(--height);
         gap:      fn.dim(--gap);
 
diff --git a/templates/layouts/exhibit.html b/templates/layouts/exhibit.html
index 091859a..22f4bcf 100644
--- a/templates/layouts/exhibit.html
+++ b/templates/layouts/exhibit.html
@@ -1,66 +1,65 @@
 <main
+    class="h-entry"
     itemprop="hasPart"
     itemscope
     itemtype="https://schema.org/$schema_type$"
     itemid="$url.full$"
 >
-    <article class="h-entry">
-        <section class="c-exhibit js-lightbox">
-            <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 js-lightbox">
+        <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>            
 
-            <footer class="c-exhibit__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">
-                            $if(date)$
-                                <small class="u-d-block u-d-none@sm-hi">
-                                    <time datetime="$date.yyyy_mm_dd$" class="dt-updated" itemprop="dateCreated">
-                                        $date.short$
-                                    </time>
-                                </small>
-                            $endif$
-                            <strong class="u-d-block u-elp" itemprop="name headline">$title$</strong>
-                        </div>
+        <footer class="c-exhibit__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">
                         $if(date)$
-                            <small class="l-media__block u-d-none@sm-lo">
-                                <time datetime="$date.yyyy_mm_dd$" itemprop="dateCreated">
+                            <small class="u-d-block u-d-none@sm-hi">
+                                <time datetime="$date.yyyy_mm_dd$" class="dt-updated" itemprop="dateCreated">
                                     $date.short$
                                 </time>
                             </small>
                         $endif$
+                        <strong class="u-d-block u-elp" itemprop="name headline">$title$</strong>
                     </div>
+                    $if(date)$
+                        <small class="l-media__block u-d-none@sm-lo">
+                            <time datetime="$date.yyyy_mm_dd$" itemprop="dateCreated">
+                                $date.short$
+                            </time>
+                        </small>
+                    $endif$
                 </div>
-            </footer>
-        </section>
+            </div>
+        </footer>
+    </section>
 
-        <div class="l-container l-container--pad-x l-container--pad-y l-container--narrow-125 u-pt-400">
-            <div class="s-body s-colored-links s-headings s-blockquotes s-code s-lists s-tables s-alerts e-content" itemprop="articleBody">
+    <div class="l-container l-container--pad-x l-container--pad-y l-container--narrow-125 u-pt-400">
+        <div class="s-body s-colored-links s-headings s-blockquotes s-code s-lists s-tables s-alerts e-content" itemprop="articleBody">
 $body$
 
-                $for(images)$
-                    <figure class="c-figure js-lightbox__image u-d-none@js">
-                        <img src="$it$" />
-                    </figure>
-                $endfor$
-            </div>
+            $for(images)$
+                <figure class="c-figure js-lightbox__image u-d-none@js">
+                    <img src="$it$" />
+                </figure>
+            $endfor$
         </div>
-    </article>
+    </div>
 </main>
 
 <script src="/lightbox.js"></script>
diff --git a/yarn.lock b/yarn.lock
index 655697b..e7c2fd1 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#a3296360acb08cf19d358aa140f8d3c4d054b169"
+  resolved "git+https://git.vulpes.one/git/iro-design.git#3f9783606896b9d51055c38a052d3612c9181421"
   dependencies:
     "@oddbird/blend" "^0.2.3"
     include-media "^1.4.9"
-- 
cgit v1.2.3-54-g00ecf