Init

1 files changed, 157 insertions, 0 deletions

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));
+                        }
+                }
+        }
+}