From c1e28224aa2e1450031669d9a7e359b63e04687d Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 22 Jul 2026 19:40:59 +0200
Subject: Init

---
 src/styles/components/_site-header.scss | 136 ++++++++++++++++++++++++++++++++
 1 file changed, 136 insertions(+)
 create mode 100644 src/styles/components/_site-header.scss

(limited to 'src/styles/components/_site-header.scss')

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;
+		}
+	}
+}
-- 
cgit v1.3.1