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-footer.scss | 157 ++++++++++++++++++++++++++++++++
 1 file changed, 157 insertions(+)
 create mode 100644 src/styles/components/_site-footer.scss

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

diff --git a/src/styles/components/_site-footer.scss b/src/styles/components/_site-footer.scss
new file mode 100644
index 0000000..33608ff
--- /dev/null
+++ b/src/styles/components/_site-footer.scss
@@ -0,0 +1,157 @@
+@use "sass:math";
+@use "sass:meta";
+
+@use "pkg:iro-design" as iro;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+
+@forward "site-footer.vars";
+@use "site-footer.vars" as vars;
+
+@mixin styles {
+	@include iro.props--materialize-at-root(meta.module-variables("vars"));
+
+	@property --site-footer--l1-y {
+		initial-value: 0px;
+		inherits: true;
+		syntax: "<length>";
+	}
+
+	@property --site-footer--cloud-y {
+		initial-value: 0px;
+		inherits: true;
+		syntax: "<length>";
+	}
+
+	@property --site-footer--moon-y {
+		initial-value: 0px;
+		inherits: true;
+		syntax: "<length>";
+	}
+
+	@property --site-footer--star-y {
+		initial-value: 0px;
+		inherits: true;
+		syntax: "<length>";
+	}
+
+	@keyframes footer-l1-ani {
+		from {
+			--site-footer--l1-y: -300px;
+			--site-footer--cloud-y: -400px;
+			--site-footer--moon-y: -500px;
+			--site-footer--star-y: -500px;
+		}
+		to {
+			--site-footer--l1-y: 300px;
+			--site-footer--cloud-y: 400px;
+			--site-footer--moon-y: 500px;
+			--site-footer--star-y: 500px;
+		}
+	}
+
+	@include bem.component("site-footer") {
+		position: sticky;
+		inset-block-start: 100%;
+
+		@include bem.elem("banner") {
+			position: relative;
+			display: flex;
+			block-size: 33rem;
+			justify-content: end;
+			overflow: hidden;
+			background: linear-gradient(
+				to bottom,
+				props.get(vars.$colors, --bg-from) 35%,
+				props.get(vars.$colors, --bg) 85%
+			);
+
+			animation-name: footer-l1-ani;
+			//animation-fill-mode: both;
+			animation-duration: 1ms;
+			animation-timeline: view(block 0% 0%);
+			animation-timing-function: linear;
+		}
+
+		@include bem.elem("banner-img") {
+			position: relative;
+			z-index: 2;
+			flex: 0 0 auto;
+			display: block;
+			block-size: 100%;
+			margin-inline: auto;
+			aspect-ratio: 3840 / 1600;
+		}
+
+		@include bem.elem("banner-bg") {
+			position: absolute;
+			inset-inline-start: 50%;
+			inset-block-end: 0;
+			z-index: 1;
+			display: block;
+			inline-size: 100%;
+			block-size: 100%;
+			transform: translateX(-50%);
+		}
+
+		@include bem.elem("content-wrap") {
+			padding-block-end: props.get(iro.$core--size--400);
+			background-color: props.get(iro.$core--transparent-colors, --black, --900);
+		}
+
+		@include bem.elem("content") {
+			display: flex;
+			flex-wrap: wrap;
+			gap: props.get(iro.$core--size--600);
+		}
+
+		@include bem.elem("sections") {
+			display: flex;
+			flex-wrap: wrap;
+			gap: props.get(iro.$core--size--400) props.get(iro.$core--size--800);
+		}
+
+		@include bem.elem("table") {
+			display: grid;
+			grid-template-columns: auto auto auto auto;
+			column-gap: props.get(iro.$core--size--200);
+		}
+
+		@include bem.elem("table-row") {
+			display: contents;
+		}
+
+		@include bem.elem("divider") {
+			display: none;
+		}
+
+		@include bem.elem("logo") {
+			margin-block: auto;
+			margin-inline-start: auto;
+		}
+
+		@include iro.media--media("<=md") {
+			@include bem.elem("content") {
+				flex-direction: column;
+				align-items: center;
+			}
+
+			@include bem.elem("divider") {
+				display: flex;
+				inline-size: 100%;
+			}
+
+			@include bem.elem("logo") {
+				margin-inline-start: 0;
+			}
+		}
+
+		@include iro.media--media("<=sm") {
+			transform: translateY(calc(-1 * props.get(iro.$o-navbar--block-size)));
+
+			@include bem.elem("banner-img") {
+				transform: translateX(max(0rem, 19rem - 50vw));
+			}
+		}
+	}
+}
-- 
cgit v1.3.1