3 files changed, 64 insertions, 27 deletions

diff --git a/assets/css/components/_exhibit.scss b/assets/css/components/_exhibit.scss
new file mode 100644
index 0000000..96ed1ae
--- /dev/null
+++ b/assets/css/components/_exhibit.scss
@@ -0,0 +1,38 @@
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+@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: (
+                --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:              fn.dim(--height);
+
+        @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);
+        }
+    }
+}
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index ce216ee..c8b50f8 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -19,10 +19,10 @@
 
     @include iro.props-store((
         --dims: (
-            --height: 4rem,
+            --height: fn.global-dim(--header --height),
             --icon:   1.5rem,
-            --pad-x:  calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))),
-            --gap:    2px,
+            --pad-x:  calc(.5 * (fn.dim(--height, null) - fn.dim(--icon, null))),
+            --gap:    fn.global-dim(--size --25),
         )
     ), 'dims');
 
@@ -32,18 +32,14 @@
         )
     ), 'colors-dark');
 
-    @include iro.props-store((
-        --dims: (
-            --height: 3.4rem,
-        )
-    ), 'sm');
-
     @include iro.bem-component(iro.props-namespace()) {
-        display: flex;
-        width:   0;
-        height:  fn.dim(--height);
-        padding: fn.dim(--gap);
-        gap:     fn.dim(--gap);
+        display:  flex;
+        position: absolute;
+        z-index:  100;
+        top:      0;
+        left:     0;
+        height:   fn.dim(--height);
+        gap:      fn.dim(--gap);
 
         @include iro.bem-elem('item') {
             padding:          0 fn.dim(--pad-x);
@@ -52,7 +48,6 @@
             color:            fn.color(--fg);
             line-height:      fn.dim(--height);
             text-decoration:  none;
-            white-space:      nowrap;
 
             &:hover,
             &:focus {
@@ -78,19 +73,8 @@
             height: fn.dim(--icon);
         }
 
-        @include iro.bem-modifier('fixed') {
-            position: fixed;
-        }
-
         @include media.media('>=lg') {
-            position:      sticky;
-            z-index:       100;
-            top:           0;
-            margin-bottom: calc(-.75 * #{fn.dim(--height)});
-
-            @include iro.bem-modifier('fixed') {
-                position: fixed;
-            }
+            position: fixed;
         }
 
         @media print {
diff --git a/assets/css/components/_main.scss b/assets/css/components/_main.scss
new file mode 100644
index 0000000..f0a839e
--- /dev/null
+++ b/assets/css/components/_main.scss
@@ -0,0 +1,15 @@
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+@use 'include-media/dist/include-media' as media;
+
+@include iro.props-namespace('main') {
+    @include iro.props-store((
+        --dims: (
+            --pad-top: fn.global-dim(--header --height),
+        )
+    ), 'dims');
+
+    @include iro.bem-component(iro.props-namespace()) {
+        margin-top: fn.dim(--pad-top);
+    }
+}