1 files changed, 136 insertions, 0 deletions

diff --git a/src/styles/components/_site-header.scss b/src/styles/components/_site-header.scss
new file mode 100644
index 0000000..d23fa7c
--- /dev/null
+++ b/src/styles/components/_site-header.scss
@@ -0,0 +1,136 @@
+@use "sass:math";
+@use "sass:meta";
+
+@use "pkg:iro-design" as iro;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+
+@forward "site-header.vars";
+@use "site-header.vars" as vars;
+
+@mixin styles {
+        @include iro.props--materialize-at-root(meta.module-variables("vars"));
+
+        @include bem.component("site-header") {
+                position: sticky;
+                inset-block-start: 0;
+                z-index: props.get(vars.$z-index);
+                display: flex;
+                gap: props.get(vars.$spacing);
+                align-items: center;
+                line-height: 1.4;
+                block-size: props.get(vars.$block-size);
+                padding-inline: props.get(iro.$l-container--pad-i);
+                background-color: props.get(iro.$core--theme, --bg-l1);
+                overflow: hidden;
+                transition:
+                        background-color 0.2s ease,
+                        opacity 0.2s ease,
+                        transform 0.2s ease,
+                        visibility 0s linear 0.2s;
+
+                @include bem.at-theme("js") {
+                        background-color: transparent;
+                }
+
+                @include bem.modifier("hidden") {
+                        margin-block-start: calc(-1 * props.get(vars.$block-size));
+                        opacity: 0;
+                        visibility: hidden;
+                        transform: translateY(-0.2em);
+
+                        @include bem.is("scroll") {
+                                transition:
+                                        background-color 0.2s ease,
+                                        opacity 0.2s ease,
+                                        transform 0.2s ease,
+                                        visibility 0s linear;
+                                visibility: visible;
+                                opacity: 1;
+                                transform: none;
+                        }
+                }
+
+                @include bem.modifier("end") {
+                        background-color: props.get(iro.$core--transparent-colors, --black, --900);
+                }
+
+                @include bem.is("scroll") {
+                        background-color: props.get(iro.$core--theme, --base, --50);
+                }
+
+                @include bem.elem("logo") {
+                        @include bem.modifier("sm") {
+                                display: none;
+                        }
+                }
+
+                @include bem.elem("nav", "back") {
+                        margin-inline-end: calc(-1 * props.get(vars.$nav-pull));
+                }
+
+                @include bem.elem("back") {
+                        display: none;
+                }
+
+                @include bem.elem("spacer") {
+                        margin-inline-start: auto;
+                }
+
+                @include bem.elem("slot") {
+                        display: contents;
+
+                        @include bem.modifier("sm") {
+                                display: none;
+                        }
+                }
+
+                @include iro.media--media("<=sm") {
+                        @include bem.elem("logo") {
+                                display: none;
+
+                                @include bem.modifier("sm") {
+                                        display: block;
+                                }
+                        }
+
+                        @include bem.elem("nav") {
+                                display: none;
+                        }
+
+                        @include bem.elem("back") {
+                                display: block;
+                        }
+
+                        @include bem.elem("slot") {
+                                @include bem.modifier("end") {
+                                        display: none;
+                                }
+
+                                @include bem.modifier("sm") {
+                                        display: contents;
+                                }
+                        }
+
+                        @include bem.modifier("end") {
+                                @include bem.elem("logo") {
+                                        display: block;
+
+                                        @include bem.modifier("sm") {
+                                                display: none;
+                                        }
+                                }
+
+                                @include bem.elem("slot") {
+                                        @include bem.modifier("sm") {
+                                                display: none;
+                                        }
+                                }
+                        }
+                }
+
+                @include iro.media--media("height<=500px") {
+                        position: relative;
+                }
+        }
+}