summaryrefslogtreecommitdiffstats
path: root/src/styles/components
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2026-07-22 19:40:59 +0200
committerVolpeon <git@volpeon.ink>2026-07-22 19:40:59 +0200
commitc1e28224aa2e1450031669d9a7e359b63e04687d (patch)
tree68f3d8905c763a91f68001d868197effa92adafa /src/styles/components
downloadcorvos-website-c1e28224aa2e1450031669d9a7e359b63e04687d.tar.gz
corvos-website-c1e28224aa2e1450031669d9a7e359b63e04687d.tar.bz2
corvos-website-c1e28224aa2e1450031669d9a7e359b63e04687d.zip
Init
Diffstat (limited to 'src/styles/components')
-rw-r--r--src/styles/components/_home-banner.scss39
-rw-r--r--src/styles/components/_logo.scss81
-rw-r--r--src/styles/components/_site-footer.scss157
-rw-r--r--src/styles/components/_site-footer.vars.scss34
-rw-r--r--src/styles/components/_site-header.scss136
-rw-r--r--src/styles/components/_site-header.vars.scss14
-rw-r--r--src/styles/components/_site-nav.scss30
-rw-r--r--src/styles/components/_subtitle.scss11
-rw-r--r--src/styles/components/_visited-indicator.scss27
9 files changed, 529 insertions, 0 deletions
diff --git a/src/styles/components/_home-banner.scss b/src/styles/components/_home-banner.scss
new file mode 100644
index 0000000..660cd9b
--- /dev/null
+++ b/src/styles/components/_home-banner.scss
@@ -0,0 +1,39 @@
1@use "sass:map";
2@use "sass:string";
3@use "sass:meta";
4
5@use "pkg:iro-sass/bem";
6@use "pkg:iro-sass/props";
7@use "pkg:iro-design" as iro;
8
9@use "site-header.vars" as site-header;
10
11@mixin styles {
12 @include bem.component("home-banner") {
13 @include bem.elem("intro") {
14 margin-block-start: 0;
15 font-size: clamp(props.get(iro.$core--font-size--500), 5.3vw, 5rem);
16 font-weight: 300;
17 color: props.get(iro.$core--theme, --text);
18 line-height: 1.2;
19
20 strong {
21 font-family: props.get(iro.$core--font--headline--family);
22 font-weight: 900;
23 text-transform: uppercase;
24 letter-spacing: 2px;
25 color: props.get(iro.$core--theme, --heading);
26 }
27 }
28
29 @include iro.media--media("<=md") {
30 @include bem.elem("intro") {
31 font-size: props.get(iro.$core--font-size--500);
32 }
33
34 @include bem.elem("buttons") {
35 justify-content: center;
36 }
37 }
38 }
39}
diff --git a/src/styles/components/_logo.scss b/src/styles/components/_logo.scss
new file mode 100644
index 0000000..3450817
--- /dev/null
+++ b/src/styles/components/_logo.scss
@@ -0,0 +1,81 @@
1@use "sass:map";
2@use "sass:string";
3
4@use "pkg:iro-sass/bem";
5@use "pkg:iro-sass/props";
6@use "pkg:iro-design" as iro;
7
8@mixin styles {
9 @include bem.component("logo") {
10 display: block;
11 padding: props.get(iro.$core--size--50);
12 margin-inline: calc(-1 * props.get(iro.$core--size--50));
13 border-radius: props.get(iro.$s-links--rounding);
14 color: props.get(iro.$core--theme, --heading);
15
16 &:link,
17 &:visited {
18 &:hover {
19 text-decoration: none;
20 color: props.get(iro.$core--theme, --text-mute);
21 }
22
23 &:focus-visible {
24 color: props.get(iro.$s-links--key-focus--text-color);
25 text-decoration: none;
26 outline: props.get(iro.$s-links--key-focus--border-color) solid
27 props.get(iro.$s-links--key-focus--border-width);
28 box-shadow: 0 0 0
29 calc(
30 props.get(iro.$s-links--key-focus--border-width) +
31 props.get(iro.$s-links--key-focus--outline-width)
32 )
33 props.get(iro.$s-links--key-focus--outline-color);
34 }
35 }
36
37 @include bem.elem("img") {
38 display: block;
39 block-size: 1.7em;
40 aspect-ratio: 2700 / 600;
41 }
42
43 @include bem.modifier("sm") {
44 @include bem.elem("img") {
45 aspect-ratio: 600 / 600;
46 }
47 }
48
49 @include bem.modifier("lg") {
50 @include bem.elem("img") {
51 block-size: 2em;
52 }
53 }
54
55 @each $theme in map.keys(props.get(iro.$core--transparent-colors)) {
56 $logo-theme: static-#{string.slice($theme, 3)};
57
58 @include bem.modifier($logo-theme) {
59 color: props.get(iro.$core--transparent-colors, $theme, --900);
60
61 &:link,
62 &:visited {
63 &:hover {
64 color: props.get(iro.$core--transparent-colors, $theme, --800);
65 }
66
67 &:focus-visible {
68 color: props.get(iro.$core--transparent-colors, $theme, --900);
69 outline-color: props.get(iro.$core--transparent-colors, $theme, --900);
70 box-shadow: 0 0 0
71 calc(
72 props.get(iro.$s-links--key-focus--border-width) +
73 props.get(iro.$s-links--key-focus--outline-width)
74 )
75 props.get(iro.$core--transparent-colors, $theme, --300);
76 }
77 }
78 }
79 }
80 }
81}
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 @@
1@use "sass:math";
2@use "sass:meta";
3
4@use "pkg:iro-design" as iro;
5@use "pkg:iro-sass/bem";
6@use "pkg:iro-sass/props";
7
8@forward "site-footer.vars";
9@use "site-footer.vars" as vars;
10
11@mixin styles {
12 @include iro.props--materialize-at-root(meta.module-variables("vars"));
13
14 @property --site-footer--l1-y {
15 initial-value: 0px;
16 inherits: true;
17 syntax: "<length>";
18 }
19
20 @property --site-footer--cloud-y {
21 initial-value: 0px;
22 inherits: true;
23 syntax: "<length>";
24 }
25
26 @property --site-footer--moon-y {
27 initial-value: 0px;
28 inherits: true;
29 syntax: "<length>";
30 }
31
32 @property --site-footer--star-y {
33 initial-value: 0px;
34 inherits: true;
35 syntax: "<length>";
36 }
37
38 @keyframes footer-l1-ani {
39 from {
40 --site-footer--l1-y: -300px;
41 --site-footer--cloud-y: -400px;
42 --site-footer--moon-y: -500px;
43 --site-footer--star-y: -500px;
44 }
45 to {
46 --site-footer--l1-y: 300px;
47 --site-footer--cloud-y: 400px;
48 --site-footer--moon-y: 500px;
49 --site-footer--star-y: 500px;
50 }
51 }
52
53 @include bem.component("site-footer") {
54 position: sticky;
55 inset-block-start: 100%;
56
57 @include bem.elem("banner") {
58 position: relative;
59 display: flex;
60 block-size: 33rem;
61 justify-content: end;
62 overflow: hidden;
63 background: linear-gradient(
64 to bottom,
65 props.get(vars.$colors, --bg-from) 35%,
66 props.get(vars.$colors, --bg) 85%
67 );
68
69 animation-name: footer-l1-ani;
70 //animation-fill-mode: both;
71 animation-duration: 1ms;
72 animation-timeline: view(block 0% 0%);
73 animation-timing-function: linear;
74 }
75
76 @include bem.elem("banner-img") {
77 position: relative;
78 z-index: 2;
79 flex: 0 0 auto;
80 display: block;
81 block-size: 100%;
82 margin-inline: auto;
83 aspect-ratio: 3840 / 1600;
84 }
85
86 @include bem.elem("banner-bg") {
87 position: absolute;
88 inset-inline-start: 50%;
89 inset-block-end: 0;
90 z-index: 1;
91 display: block;
92 inline-size: 100%;
93 block-size: 100%;
94 transform: translateX(-50%);
95 }
96
97 @include bem.elem("content-wrap") {
98 padding-block-end: props.get(iro.$core--size--400);
99 background-color: props.get(iro.$core--transparent-colors, --black, --900);
100 }
101
102 @include bem.elem("content") {
103 display: flex;
104 flex-wrap: wrap;
105 gap: props.get(iro.$core--size--600);
106 }
107
108 @include bem.elem("sections") {
109 display: flex;
110 flex-wrap: wrap;
111 gap: props.get(iro.$core--size--400) props.get(iro.$core--size--800);
112 }
113
114 @include bem.elem("table") {
115 display: grid;
116 grid-template-columns: auto auto auto auto;
117 column-gap: props.get(iro.$core--size--200);
118 }
119
120 @include bem.elem("table-row") {
121 display: contents;
122 }
123
124 @include bem.elem("divider") {
125 display: none;
126 }
127
128 @include bem.elem("logo") {
129 margin-block: auto;
130 margin-inline-start: auto;
131 }
132
133 @include iro.media--media("<=md") {
134 @include bem.elem("content") {
135 flex-direction: column;
136 align-items: center;
137 }
138
139 @include bem.elem("divider") {
140 display: flex;
141 inline-size: 100%;
142 }
143
144 @include bem.elem("logo") {
145 margin-inline-start: 0;
146 }
147 }
148
149 @include iro.media--media("<=sm") {
150 transform: translateY(calc(-1 * props.get(iro.$o-navbar--block-size)));
151
152 @include bem.elem("banner-img") {
153 transform: translateX(max(0rem, 19rem - 50vw));
154 }
155 }
156 }
157}
diff --git a/src/styles/components/_site-footer.vars.scss b/src/styles/components/_site-footer.vars.scss
new file mode 100644
index 0000000..0b2f968
--- /dev/null
+++ b/src/styles/components/_site-footer.vars.scss
@@ -0,0 +1,34 @@
1@use "pkg:iro-design/core.vars" as core;
2@use "pkg:iro-design/objects/backdrop.vars" as backdrop;
3@use "pkg:iro-sass/props";
4
5$colors: props.def(
6 --site-footer,
7 (
8 --bg-from: props.get(core.$theme, --bg-l1),
9 --bg: props.get(core.$theme, --bg-l1),
10 --star: transparent,
11 --cloud: props.get(core.$theme, --base, --50),
12 --l1: props.get(core.$theme, --bg-base),
13 --dragon-awake: props.get(core.$transparent-colors, --black, --900),
14 --dragon-asleep--eye: transparent,
15 --dragon-asleep: transparent,
16 --fg: props.get(core.$transparent-colors, --black, --900),
17 ),
18 "color"
19);
20
21$colors--dark: props.def(
22 --site-footer,
23 (
24 --bg: props.get(core.$theme, --bg-l2),
25 --star: #fff,
26 --cloud: props.get(core.$theme, --base, --100),
27 --l1: props.get(core.$theme, --bg-l1),
28 --dragon-awake: transparent,
29 --dragon-asleep--eye: #fff,
30 --dragon-asleep: #000,
31 --fg: #000,
32 ),
33 "dark"
34);
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 @@
1@use "sass:math";
2@use "sass:meta";
3
4@use "pkg:iro-design" as iro;
5@use "pkg:iro-sass/bem";
6@use "pkg:iro-sass/props";
7
8@forward "site-header.vars";
9@use "site-header.vars" as vars;
10
11@mixin styles {
12 @include iro.props--materialize-at-root(meta.module-variables("vars"));
13
14 @include bem.component("site-header") {
15 position: sticky;
16 inset-block-start: 0;
17 z-index: props.get(vars.$z-index);
18 display: flex;
19 gap: props.get(vars.$spacing);
20 align-items: center;
21 line-height: 1.4;
22 block-size: props.get(vars.$block-size);
23 padding-inline: props.get(iro.$l-container--pad-i);
24 background-color: props.get(iro.$core--theme, --bg-l1);
25 overflow: hidden;
26 transition:
27 background-color 0.2s ease,
28 opacity 0.2s ease,
29 transform 0.2s ease,
30 visibility 0s linear 0.2s;
31
32 @include bem.at-theme("js") {
33 background-color: transparent;
34 }
35
36 @include bem.modifier("hidden") {
37 margin-block-start: calc(-1 * props.get(vars.$block-size));
38 opacity: 0;
39 visibility: hidden;
40 transform: translateY(-0.2em);
41
42 @include bem.is("scroll") {
43 transition:
44 background-color 0.2s ease,
45 opacity 0.2s ease,
46 transform 0.2s ease,
47 visibility 0s linear;
48 visibility: visible;
49 opacity: 1;
50 transform: none;
51 }
52 }
53
54 @include bem.modifier("end") {
55 background-color: props.get(iro.$core--transparent-colors, --black, --900);
56 }
57
58 @include bem.is("scroll") {
59 background-color: props.get(iro.$core--theme, --base, --50);
60 }
61
62 @include bem.elem("logo") {
63 @include bem.modifier("sm") {
64 display: none;
65 }
66 }
67
68 @include bem.elem("nav", "back") {
69 margin-inline-end: calc(-1 * props.get(vars.$nav-pull));
70 }
71
72 @include bem.elem("back") {
73 display: none;
74 }
75
76 @include bem.elem("spacer") {
77 margin-inline-start: auto;
78 }
79
80 @include bem.elem("slot") {
81 display: contents;
82
83 @include bem.modifier("sm") {
84 display: none;
85 }
86 }
87
88 @include iro.media--media("<=sm") {
89 @include bem.elem("logo") {
90 display: none;
91
92 @include bem.modifier("sm") {
93 display: block;
94 }
95 }
96
97 @include bem.elem("nav") {
98 display: none;
99 }
100
101 @include bem.elem("back") {
102 display: block;
103 }
104
105 @include bem.elem("slot") {
106 @include bem.modifier("end") {
107 display: none;
108 }
109
110 @include bem.modifier("sm") {
111 display: contents;
112 }
113 }
114
115 @include bem.modifier("end") {
116 @include bem.elem("logo") {
117 display: block;
118
119 @include bem.modifier("sm") {
120 display: none;
121 }
122 }
123
124 @include bem.elem("slot") {
125 @include bem.modifier("sm") {
126 display: none;
127 }
128 }
129 }
130 }
131
132 @include iro.media--media("height<=500px") {
133 position: relative;
134 }
135 }
136}
diff --git a/src/styles/components/_site-header.vars.scss b/src/styles/components/_site-header.vars.scss
new file mode 100644
index 0000000..282e944
--- /dev/null
+++ b/src/styles/components/_site-header.vars.scss
@@ -0,0 +1,14 @@
1@use "pkg:iro-design/core.vars" as core;
2@use "pkg:iro-design/objects/backdrop.vars" as backdrop;
3@use "pkg:iro-sass/props";
4
5$z-index: props.def(--c-site-header--z-index, calc(props.get(backdrop.$z-index) - 10));
6$block-size: props.def(--c-site-header--block-size, props.get(core.$size--800));
7$spacing: props.def(--c-site-header--spacing, props.get(core.$size--500));
8$nav-pull: props.def(--c-site-header--nav-pull, props.get(core.$size--300));
9
10$spacing--md: props.def(--c-site-header--spacing, props.get(core.$size--400), "md");
11$nav-pull--md: props.def(--c-site-header--nav-pull, props.get(core.$size--200), "md");
12
13$block-size--sm: props.def(--c-site-header--block-size, props.get(core.$size--700), "sm");
14$spacing--sm: props.def(--c-site-header--spacing, props.get(core.$size--300), "sm");
diff --git a/src/styles/components/_site-nav.scss b/src/styles/components/_site-nav.scss
new file mode 100644
index 0000000..99a8afc
--- /dev/null
+++ b/src/styles/components/_site-nav.scss
@@ -0,0 +1,30 @@
1@use "sass:math";
2@use "sass:meta";
3
4@use "pkg:iro-design" as iro;
5@use "pkg:iro-sass/bem";
6@use "pkg:iro-sass/props";
7
8@mixin styles {
9 @include bem.component("site-nav-placeholder") {
10 block-size: props.get(iro.$o-navbar--block-size);
11
12 @include iro.media--media(">sm") {
13 display: none;
14 }
15 }
16
17 @include bem.component("site-nav") {
18 position: fixed;
19 inset-block-end: 0;
20 inset-inline: 0;
21 z-index: calc(props.get(iro.$o-backdrop--z-index) - 10);
22 background-color: props.get(iro.$core--transparent-colors, --black, --900);
23 //border-block-start: 1px solid props.get(iro.$core--theme, --border-mute);
24 overflow-x: auto;
25
26 @include iro.media--media(">sm") {
27 display: none;
28 }
29 }
30}
diff --git a/src/styles/components/_subtitle.scss b/src/styles/components/_subtitle.scss
new file mode 100644
index 0000000..e9a40bb
--- /dev/null
+++ b/src/styles/components/_subtitle.scss
@@ -0,0 +1,11 @@
1@use "pkg:iro-sass/bem";
2@use "pkg:iro-sass/props";
3@use "pkg:iro-design" as iro;
4
5@mixin styles {
6 @include bem.component("subtitle") {
7 margin-block-start: props.get(iro.$s-implicit--paragraph--margin-bs);
8 color: props.get(iro.$core--theme, --text-mute-more);
9 font-size: props.get(iro.$core--font-size--300);
10 }
11}
diff --git a/src/styles/components/_visited-indicator.scss b/src/styles/components/_visited-indicator.scss
new file mode 100644
index 0000000..7aa1f38
--- /dev/null
+++ b/src/styles/components/_visited-indicator.scss
@@ -0,0 +1,27 @@
1@use "pkg:iro-sass/bem";
2@use "pkg:iro-sass/props";
3@use "pkg:iro-design" as iro;
4
5@mixin styles {
6 @include bem.component("with-visited-indicator") {
7 @include bem.elem("indicator") {
8 block-size: 1.4em;
9 color: props.get(iro.$core--theme, --text);
10
11 &::after {
12 content: "";
13 display: block;
14 block-size: 100%;
15 inline-size: props.get(iro.$core--border-width--thick);
16 border-radius: 10em;
17 background-color: currentColor;
18 }
19 }
20
21 &:visited {
22 @include bem.elem("indicator") {
23 color: props.get(iro.$core--theme, --border-mute);
24 }
25 }
26 }
27}
generated by cgit v1.3.1 (git 2.54.0) at 2026-09-10 14:30:39 +0000