Added page type for art pieces

1 files changed, 11 insertions, 27 deletions

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 {