7 files changed, 87 insertions, 29 deletions

diff --git a/assets/css/_declare-vars.scss b/assets/css/_declare-vars.scss
index 3422588..38aaa21 100644
--- a/assets/css/_declare-vars.scss
+++ b/assets/css/_declare-vars.scss
@@ -19,6 +19,10 @@
             --1000: iro.fn-px-to-rem(60px),
             --1100: iro.fn-px-to-rem(70px),
         ),
+
+        --header: (
+            --height: fn.dim(--size --800),
+        ),
     )
 ), 'dims');
 
@@ -40,6 +44,10 @@
             --1000: iro.fn-px-to-rem(45px),
             --1100: iro.fn-px-to-rem(50px),
         ),
+
+        --header: (
+            --height: fn.dim(--size --700),
+        ),
     )
 ), 'sm');
 
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);
+    }
+}
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index 2d9d58f..92c89b7 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -9,7 +9,7 @@
             --gap:        fn.global-dim(--size --25),
             --grid-2: (
                 --gap:       fn.global-dim(--size --75),
-                --col-width: fn.global-dim(--size --3400),
+                --col-width: fn.global-dim(--size --3200),
             ),
             --grid-3: (
                 --gap:       fn.global-dim(--size --75),
@@ -17,7 +17,7 @@
             ),
             --gallery-2: (
                 --gap:       fn.global-dim(--size --200),
-                --col-width: fn.global-dim(--size --3400),
+                --col-width: fn.global-dim(--size --3200),
             ),
             --gallery-3: (
                 --gap:       fn.global-dim(--size --200),
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
new file mode 100644
index 0000000..1c76843
--- /dev/null
+++ b/assets/css/scopes/_body.scss
@@ -0,0 +1,10 @@
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+
+@include iro.props-namespace('body') {
+    @include iro.bem-scope(iro.props-namespace()) {
+        > :first-child {
+            margin-top: 0;
+        }
+    }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 3fce2f4..046210f 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -18,11 +18,13 @@
 @use 'iro-design/src/objects/alert' as iro-alert;
 @use 'iro-design/src/objects/lightbox' as iro-lightbox;
 
+@use 'components/main';
 @use 'components/footer';
 @use 'components/header';
 @use 'components/hnav';
 @use 'components/card';
 @use 'components/figure';
+@use 'components/exhibit';
 
 @use 'iro-design/src/scopes/blockquotes' as iro-blockquotes;
 @use 'iro-design/src/scopes/code' as iro-code;
@@ -31,6 +33,7 @@
 @use 'iro-design/src/scopes/invisible-links' as iro-invisible-links;
 @use 'iro-design/src/scopes/lists' as iro-lists;
 @use 'iro-design/src/scopes/tables' as iro-tables;
+@use 'scopes/body';
 @use 'scopes/small';
 @use 'scopes/alerts';