My website
1/* Structural reset for inlay custom elements.
2 Display modes, flex, sizing. No visual styling.
3 Everything visual comes from host-theme.css. */
4
5at-inlay-root {
6 display: block;
7 width: fit-content;
8 max-width: 100%;
9 max-height: 100%;
10 box-sizing: border-box;
11 overflow-y: auto;
12 overflow-x: hidden;
13 overflow-wrap: break-word;
14 position: relative;
15}
16at-inlay-root[data-page] {
17 width: 100%;
18 max-width: 600px;
19}
20at-inlay-root[data-full] {
21 width: 100%;
22 min-height: 100%;
23 max-width: none;
24 max-height: none;
25 border-radius: 0;
26}
27at-inlay-root:has(org-atsui-stack) {
28 width: 100%;
29}
30
31/* Stack — vertical flex, fills parent width */
32
33org-atsui-stack {
34 display: flex;
35 flex-direction: column;
36 width: 100%;
37 box-sizing: border-box;
38 text-align: inherit;
39}
40org-atsui-stack[align="start"] {
41 align-items: flex-start;
42}
43org-atsui-stack[align="center"] {
44 align-items: center;
45}
46org-atsui-stack[align="end"] {
47 align-items: flex-end;
48}
49org-atsui-stack[align="stretch"] {
50 align-items: stretch;
51}
52org-atsui-stack[sticky] {
53 position: sticky;
54 top: 0;
55 z-index: 1;
56}
57
58/* Row — horizontal flex, hugs content */
59
60org-atsui-row {
61 display: flex;
62 flex-direction: row;
63 flex-wrap: nowrap;
64 align-items: center;
65 text-align: inherit;
66}
67org-atsui-row[align="start"] {
68 align-items: flex-start;
69}
70org-atsui-row[align="center"] {
71 align-items: center;
72}
73org-atsui-row[align="end"] {
74 align-items: flex-end;
75}
76org-atsui-row[sticky] {
77 position: sticky;
78 top: 0;
79 z-index: 1;
80}
81
82/* Justify — shared between Stack and Row */
83
84:is(org-atsui-stack, org-atsui-row)[justify="between"] {
85 justify-content: space-between;
86}
87:is(org-atsui-stack, org-atsui-row)[justify="center"] {
88 justify-content: center;
89}
90:is(org-atsui-stack, org-atsui-row)[justify="end"] {
91 justify-content: flex-end;
92}
93
94/* Fill — greedy child, takes remaining space on parent main axis */
95
96org-atsui-fill {
97 display: flex;
98 flex-direction: column;
99 flex: 1;
100 min-width: 0;
101 min-height: 0;
102}
103
104/* Text elements */
105
106org-atsui-title,
107org-atsui-heading,
108org-atsui-text,
109org-atsui-caption {
110 display: block;
111 overflow-wrap: break-word;
112}
113org-atsui-timestamp {
114 display: inline;
115}
116
117/* Avatar — fixed dimensions, never stretches */
118
119org-atsui-avatar {
120 display: block;
121 overflow: hidden;
122 flex-shrink: 0;
123}
124org-atsui-avatar[size="xsmall"] {
125 width: 20px;
126 height: 20px;
127}
128org-atsui-avatar[size="small"] {
129 width: 32px;
130 height: 32px;
131}
132org-atsui-avatar[size="medium"] {
133 width: 48px;
134 height: 48px;
135}
136org-atsui-avatar[size="large"] {
137 width: 80px;
138 height: 80px;
139}
140org-atsui-avatar img {
141 width: 100%;
142 height: 100%;
143 object-fit: cover;
144 display: block;
145}
146
147/* Cover — full-bleed background image */
148
149org-atsui-cover {
150 display: block;
151 width: 100%;
152}
153org-atsui-cover::before {
154 content: "";
155 display: block;
156}
157
158/* Clip — constrains child height relative to own width.
159 cqi custom props are set on the outer element; the inner
160 div resolves them relative to Clip's inline size. */
161
162org-atsui-clip {
163 display: block;
164 container-type: inline-size;
165}
166org-atsui-clip > div {
167 display: grid;
168 grid-template-rows: auto;
169 min-height: var(--clip-min, 0px);
170 max-height: var(--clip-max, none);
171 overflow: hidden;
172}
173
174/* Blob — image container */
175
176org-atsui-blob {
177 display: block;
178 overflow: hidden;
179 width: 100%;
180}
181org-atsui-blob[fit] {
182 height: 100%;
183}
184org-atsui-blob img {
185 display: block;
186 width: 100%;
187 object-fit: cover;
188}
189org-atsui-blob[fit] img {
190 height: 100%;
191}
192org-atsui-blob[fit="contain"] img {
193 object-fit: contain;
194}
195
196/* Link — transparent wrapper */
197
198org-atsui-link {
199 display: contents;
200}
201org-atsui-link a {
202 overflow-wrap: break-word;
203 min-width: 0;
204}
205
206/* Tabs */
207
208org-atsui-tabs {
209 display: flex;
210 flex-direction: column;
211}
212org-atsui-tabs .tabs-bar {
213 display: flex;
214 flex-direction: row;
215 position: sticky;
216 top: 0;
217 z-index: 1;
218}
219org-atsui-tabs .tabs-bar button {
220 all: unset;
221 cursor: pointer;
222}
223
224/* Grid — equal columns */
225
226org-atsui-grid {
227 display: grid;
228 grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
229 width: 100%;
230}