summaryrefslogtreecommitdiffstats
path: root/src/styles
diff options
context:
space:
mode:
Diffstat (limited to 'src/styles')
-rw-r--r--src/styles/_common.scss87
-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
-rw-r--r--src/styles/objects/_deflist.scss25
-rw-r--r--src/styles/objects/_message.scss216
-rw-r--r--src/styles/objects/_message.vars.scss39
-rw-r--r--src/styles/objects/_placeholder-box.scss12
-rw-r--r--src/styles/objects/_toc.scss27
-rw-r--r--src/styles/style.scss53
16 files changed, 988 insertions, 0 deletions
diff --git a/src/styles/_common.scss b/src/styles/_common.scss
new file mode 100644
index 0000000..2b1f6c2
--- /dev/null
+++ b/src/styles/_common.scss
@@ -0,0 +1,87 @@
1@use "sass:map";
2@use "sass:math";
3@use "pkg:iro-sass/props";
4@use "pkg:iro-sass/functions" as fn;
5@use "pkg:iro-sass/easing" as easing;
6@use "pkg:iro-design/config.defaults" as defaults;
7
8$font--standard--family: props.def(
9 --font--standard--family,
10 (
11 "Inter",
12 "Open Sans",
13 "Segoe UI",
14 "Droid Sans",
15 Roboto,
16 Oxygen,
17 "Helvetica Neue",
18 Helvetica,
19 Tahoma,
20 Arial,
21 sans-serif
22 )
23);
24
25@use "pkg:iro-design/core.vars" as core;
26
27@use "./components/site-header.vars" as site-header;
28
29@use "pkg:iro-design/layouts/split-view.vars" with (
30 $panel--sticky-offset: props.def(
31 --l-split-view--panel--sticky-offset,
32 calc(props.get(site-header.$block-size) + props.get(core.$size--400))
33 )
34);
35
36@forward "pkg:iro-design";
37
38@forward "objects/deflist" as o-deflist--*;
39@forward "objects/message" as o-message--*;
40@forward "objects/placeholder-box" as o-placeholder-box--*;
41@forward "objects/toc" as o-toc--*;
42
43@forward "components/home-banner" as c-home-banner--*;
44@forward "components/logo" as c-logo--*;
45@forward "components/site-header" as c-site-header--*;
46@forward "components/site-nav" as c-site-nav--*;
47@forward "components/site-footer" as c-site-footer--*;
48@forward "components/subtitle" as c-subtitle--*;
49@forward "components/visited-indicator" as c-visited-indicator--*;
50
51@use "pkg:iro-design" as iro;
52
53@mixin styles {
54 @font-face {
55 font-family: "Inter";
56 font-style: normal;
57 font-weight: 50 950;
58 font-display: swap;
59 src: url(load("/assets/InterVariable.woff2")) format("woff2-variations");
60 font-feature-settings: "ss01";
61 }
62
63 @font-face {
64 font-family: "Inter";
65 font-style: italic;
66 font-weight: 50 950;
67 font-display: swap;
68 src: url(load("/assets/InterVariable-Italic.woff2")) format("woff2-variations");
69 font-feature-settings: "ss01";
70 }
71
72 html {
73 scroll-behavior: smooth;
74 scroll-padding-block-start: props.get(site-header.$block-size);
75 scrollbar-gutter: stable;
76 min-block-size: 100%;
77 display: flex;
78 }
79
80 body {
81 inline-size: 100%;
82 }
83
84 [x-cloak] {
85 display: none;
86 }
87}
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}
diff --git a/src/styles/objects/_deflist.scss b/src/styles/objects/_deflist.scss
new file mode 100644
index 0000000..63ba1b9
--- /dev/null
+++ b/src/styles/objects/_deflist.scss
@@ -0,0 +1,25 @@
1@use "sass:list";
2
3@use "pkg:iro-sass/bem";
4@use "pkg:iro-sass/props";
5@use "pkg:iro-design" as iro;
6
7@mixin styles {
8 @include bem.object("deflist") {
9 display: grid;
10 grid-template-columns: auto 1fr;
11 gap: props.get(iro.$core--size--50) props.get(iro.$core--size--400);
12 padding: 0;
13 margin-block: props.get(iro.$s-implicit--paragraph--margin-bs) 0;
14 margin-inline: 0;
15
16 dt {
17 font-weight: bold;
18 color: props.get(iro.$core--theme, --heading);
19 }
20
21 dd {
22 margin: 0;
23 }
24 }
25}
diff --git a/src/styles/objects/_message.scss b/src/styles/objects/_message.scss
new file mode 100644
index 0000000..a7c9996
--- /dev/null
+++ b/src/styles/objects/_message.scss
@@ -0,0 +1,216 @@
1@use "sass:meta";
2
3@use "pkg:iro-design" as iro;
4@use "pkg:iro-sass/bem";
5@use "pkg:iro-sass/props";
6
7@forward "message.vars";
8@use "message.vars" as vars;
9
10@mixin styles {
11 @include iro.props--materialize-at-root(meta.module-variables("vars"));
12
13 @include bem.object("message") {
14 display: grid;
15 position: relative;
16 grid-template-rows: auto 1fr auto;
17 grid-template-columns:
18 auto calc(props.get(vars.$avatar-size) + props.get(vars.$spacing-x))
19 minmax(0, 1fr);
20 grid-template-areas:
21 "line-from avatar main"
22 "line-from line-to main"
23 "line-from replies replies";
24
25 & + & {
26 padding-block-start: props.get(vars.$spacing-outer);
27 }
28
29 @include bem.elem("line-from") {
30 grid-area: line-from;
31 position: relative;
32 inline-size: calc(props.get(vars.$avatar-size) + props.get(vars.$spacing-x));
33
34 &::before,
35 &::after {
36 content: "";
37 display: block;
38 position: absolute;
39 inset-block-start: 0;
40 inset-inline-start: props.get(vars.$line-offset);
41 }
42
43 &::before {
44 inline-size: props.get(vars.$line-width);
45 block-size: calc(100% + props.get(vars.$spacing-outer));
46 background-color: props.get(vars.$colors, --line);
47 }
48
49 &::after {
50 inline-size: calc(
51 props.get(vars.$avatar-size) - props.get(vars.$line-offset) + props.get(vars.$spacing-x)
52 );
53 block-size: calc(0.5 * (props.get(vars.$avatar-size) - props.get(vars.$line-width)));
54 border-block-end: props.get(vars.$line-width) solid props.get(vars.$colors, --line);
55 border-inline-start: props.get(vars.$line-width) solid props.get(vars.$colors, --line);
56 border-radius: 0 0 0 props.get(vars.$line-curve);
57 }
58
59 @include bem.modifier("last") {
60 &::before {
61 block-size: 0;
62 }
63 }
64
65 @include bem.sibling-elem("avatar") {
66 &::before {
67 inset-block-start: 50%;
68 inset-block-end: auto;
69 inset-inline-start: 0;
70 inline-size: 50%;
71 block-size: props.get(vars.$line-width);
72 transform: translateY(-50%);
73 }
74 }
75 }
76
77 @include bem.elem("line-to") {
78 grid-area: line-to;
79 display: block;
80 inline-size: props.get(vars.$line-width);
81 margin-inline-start: props.get(vars.$line-offset);
82 background-color: props.get(vars.$colors, --line);
83 }
84
85 @include bem.elem("avatar") {
86 position: relative;
87 grid-area: avatar;
88 inline-size: props.get(vars.$avatar-size);
89 block-size: props.get(vars.$avatar-size);
90 margin-inline-end: props.get(vars.$spacing-x);
91
92 &::before,
93 &::after {
94 content: "";
95 display: block;
96 position: absolute;
97 z-index: -1;
98 inset-inline-start: props.get(vars.$line-offset);
99 inline-size: props.get(vars.$line-width);
100 block-size: 50%;
101 background-color: props.get(vars.$colors, --line);
102 }
103
104 &::before {
105 inset-block-start: 0;
106 }
107
108 &::after {
109 inset-block-end: 0;
110 }
111
112 @include bem.modifier("last") {
113 &::after {
114 display: none;
115 }
116 }
117 }
118
119 @include bem.elem("avatar-dot") {
120 grid-area: avatar;
121 position: absolute;
122 inset-block-start: 50%;
123 inset-inline-start: 50%;
124 inline-size: props.get(vars.$dot-radius);
125 block-size: props.get(vars.$dot-radius);
126 transform: translate(-50%, -50%);
127 border: props.get(vars.$dot-width) solid props.get(vars.$colors, --dot, --border);
128 border-radius: 1em;
129 background-color: props.get(vars.$colors, --dot, --bg);
130 }
131
132 @include bem.elem("meta") {
133 white-space: nowrap;
134 color: props.get(vars.$colors, --meta);
135 }
136
137 @include bem.elem("main") {
138 position: relative;
139 grid-area: main;
140 }
141
142 @include bem.elem("replies") {
143 grid-area: replies;
144
145 &::before {
146 content: "";
147 grid-area: line;
148 display: block;
149 inline-size: props.get(vars.$line-width);
150 block-size: props.get(vars.$spacing-inner);
151 margin-inline-start: props.get(vars.$line-offset);
152 background-color: props.get(vars.$colors, --line);
153 }
154 }
155
156 @include bem.elem("header") {
157 line-height: 1.4;
158
159 @include bem.next-elem("body") {
160 padding-block-start: props.get(vars.$spacing-y);
161 }
162 }
163
164 @include bem.elem("body") {
165 word-wrap: break-word;
166
167 &::before {
168 content: "";
169 display: block;
170 margin-block: -100em 100em;
171 }
172 }
173
174 @include bem.elem("attachments") {
175 display: grid;
176 grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$attachment-width), 1fr));
177 grid-auto-rows: auto;
178 gap: props.get(vars.$spacing-x);
179 margin-block-start: props.get(vars.$spacing-attachments);
180 }
181
182 @include bem.elem("attachment") {
183 aspect-ratio: 3 / 2;
184 background-color: props.get(vars.$colors, --attachment, --bg);
185 }
186
187 @include bem.modifier("expanded") {
188 grid-template-rows: auto 1fr auto;
189 grid-template-columns: calc(props.get(vars.$avatar-size) + props.get(vars.$spacing-x)) minmax(
190 0,
191 1fr
192 );
193 grid-template-areas:
194 "avatar header"
195 "body body"
196 "attachments attachments";
197
198 @include bem.elem("header") {
199 grid-area: header;
200 align-self: center;
201 }
202
203 @include bem.elem("main") {
204 display: contents;
205 }
206
207 @include bem.elem("body") {
208 grid-area: body;
209 }
210
211 @include bem.elem("attachments") {
212 grid-area: attachments;
213 }
214 }
215 }
216}
diff --git a/src/styles/objects/_message.vars.scss b/src/styles/objects/_message.vars.scss
new file mode 100644
index 0000000..f394894
--- /dev/null
+++ b/src/styles/objects/_message.vars.scss
@@ -0,0 +1,39 @@
1@use "pkg:iro-design/core.vars" as core;
2@use "pkg:iro-design/objects/avatar.vars" as avatar;
3@use "pkg:iro-sass/props";
4
5$avatar-size: props.def(--o-message--avatar-size, props.get(avatar.$size));
6
7$dot-radius: props.def(--o-message--dot-radius, 6px);
8$dot-width: props.def(--o-message--dot-width, 4px);
9
10$spacing-x: props.def(--o-message--spacing-x, props.get(core.$size--200));
11$spacing-y: props.def(--o-message--spacing-y, props.get(core.$size--150));
12$spacing-inner: props.def(--o-message--spacing-inner, props.get(core.$size--500));
13$spacing-outer: props.def(--o-message--spacing-outer, props.get(core.$size--700));
14$spacing-attachments: props.def(--o-message--spacing-attachments, props.get(core.$size--200));
15
16$line-width: props.def(--o-message--line-width, props.get(core.$border-width--medium));
17$line-offset: props.def(
18 --o-message--line-offset,
19 calc(0.5 * props.get($avatar-size) - props.get($line-width))
20);
21$line-curve: props.def(--o-message--line-curve, props.get(core.$size--250));
22
23$attachment-width: props.def(--o-message--attachment-width, props.get(core.$size--2000));
24
25$colors: props.def(
26 --o-message,
27 (
28 --meta: props.get(core.$theme, --text-mute-more),
29 --line: props.get(core.$theme, --border),
30 --dot: (
31 --border: props.get(core.$theme, --text-mute-more),
32 --bg: props.get(core.$theme, --bg-base),
33 ),
34 --attachment: (
35 --bg: props.get(core.$theme, --border-mute),
36 ),
37 ),
38 "color"
39);
diff --git a/src/styles/objects/_placeholder-box.scss b/src/styles/objects/_placeholder-box.scss
new file mode 100644
index 0000000..9be3dc8
--- /dev/null
+++ b/src/styles/objects/_placeholder-box.scss
@@ -0,0 +1,12 @@
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.object("placeholder-box") {
7 padding: props.get(iro.$core--size--250) props.get(iro.$core--size--300);
8 border: props.get(iro.$core--border-width--thin) dashed
9 props.get(iro.$core--theme, --border, --mute);
10 border-radius: props.get(iro.$core--rounding);
11 }
12}
diff --git a/src/styles/objects/_toc.scss b/src/styles/objects/_toc.scss
new file mode 100644
index 0000000..aefb0c5
--- /dev/null
+++ b/src/styles/objects/_toc.scss
@@ -0,0 +1,27 @@
1@use "sass:list";
2
3@use "pkg:iro-sass/bem";
4@use "pkg:iro-sass/props";
5@use "pkg:iro-design" as iro;
6
7@mixin styles {
8 @include bem.object("toc") {
9 @include bem.elem("item") {
10 @include bem.next-twin-elem {
11 margin-block-start: props.get(iro.$core--size--50);
12 }
13
14 @include bem.is("active") {
15 @include bem.elem("item-link") {
16 font-weight: bold;
17 text-decoration-line: none;
18 color: props.get(iro.$core--theme, --heading);
19
20 &:hover {
21 text-decoration-line: underline;
22 }
23 }
24 }
25 }
26 }
27}
diff --git a/src/styles/style.scss b/src/styles/style.scss
new file mode 100644
index 0000000..75d123f
--- /dev/null
+++ b/src/styles/style.scss
@@ -0,0 +1,53 @@
1@use "./common" as iro;
2
3@include iro.layers--styles;
4@include iro.core--styles;
5@include iro.styles;
6
7@include iro.s-implicit--styles;
8@include iro.s-blockquotes--styles;
9@include iro.s-body--styles;
10@include iro.s-code--styles;
11@include iro.s-figures--styles;
12@include iro.s-headings--styles;
13@include iro.s-lists--styles;
14@include iro.s-links--styles;
15
16@include iro.l-card-list--styles;
17@include iro.l-container--styles;
18@include iro.l-flex--styles;
19@include iro.l-hlist--styles;
20@include iro.l-media--styles;
21@include iro.l-split-view--styles;
22
23@include iro.o-alert--styles;
24@include iro.o-avatar--styles;
25@include iro.o-backdrop--styles;
26@include iro.o-button--styles;
27@include iro.o-card--styles;
28@include iro.o-deflist--styles;
29@include iro.o-dialog--styles;
30@include iro.o-divider--styles;
31@include iro.o-emoji--styles;
32@include iro.o-figure--styles;
33@include iro.o-heading--styles;
34@include iro.o-icon--styles;
35@include iro.o-thumbnail--styles;
36@include iro.o-lightbox--styles;
37@include iro.o-navbar--styles;
38@include iro.o-placeholder-box--styles;
39@include iro.o-side-nav--styles;
40@include iro.o-tabbar--styles;
41@include iro.o-text-field--styles;
42@include iro.o-toc--styles;
43
44@include iro.c-home-banner--styles;
45@include iro.c-logo--styles;
46@include iro.c-site-header--styles;
47@include iro.c-site-nav--styles;
48@include iro.c-site-footer--styles;
49@include iro.c-subtitle--styles;
50@include iro.c-visited-indicator--styles;
51
52@include iro.utils--styles;
53@include iro.themes--styles;
generated by cgit v1.3.1 (git 2.54.0) at 2026-09-10 13:49:34 +0000