[READ-ONLY] Mirror of https://github.com/bombshell-dev/docs.
bomb.sh/docs
feat: add aside
Nate Moore
(Apr 7, 2025, 10:32 PM -0500)
55b9d941
06438745
+301
+301
src/components/Aside.astro
+301
src/components/Aside.astro
···
1
+
---
2
+
import type { Aside as BaseProps } from "@astrojs/starlight/components";
3
+
4
+
type Props = Parameters<typeof BaseProps>[0];
5
+
6
+
const { type = "note" } = Astro.props;
7
+
8
+
const symbols = {
9
+
note: "●",
10
+
tip: "◆",
11
+
caution: "▲",
12
+
danger: "■",
13
+
};
14
+
---
15
+
16
+
<box-gleam>
17
+
<aside class:list={["aside", `type-${type}`]}>
18
+
<h2 class="label font-mono">
19
+
<span class="symbol">{symbols[type]}</span>
20
+
{type}
21
+
</h2>
22
+
<slot />
23
+
</aside>
24
+
</box-gleam>
25
+
26
+
<style>
27
+
:root {
28
+
--c-space: srgb;
29
+
--c-blue: var(--c-space) 0 90% 1;
30
+
--c-green: var(--c-space) 0 1 25%;
31
+
--c-yellow: var(--c-space) 1 90% 15%;
32
+
--c-red: var(--c-space) 1 25% 25%;
33
+
@media (dynamic-range: high) {
34
+
@supports (color: color(display-p3 1 1 1)) {
35
+
--c-space: display-p3;
36
+
}
37
+
}
38
+
}
39
+
.label,
40
+
.aside :global(code) {
41
+
--_mod: 0.67;
42
+
--text: color(
43
+
from color(var(--color)) srgb calc(r + var(--_mod)) calc(g + var(--_mod))
44
+
calc(b + var(--_mod)) / 100%
45
+
);
46
+
font-size: 1rem;
47
+
color: var(--text);
48
+
margin: 0;
49
+
text-box: trim-both cap alphabetic;
50
+
position: relative;
51
+
}
52
+
.aside :global(code) {
53
+
--text-10: color(from var(--text) srgb r g b / 10%);
54
+
--text-50: color(from var(--text) srgb r g b / 50%);
55
+
border-top: 2px solid var(--text-10);
56
+
/* border-bottom: 1px solid var(--text-10); */
57
+
padding: 0.05ch 0.33ch;
58
+
border-radius: 4px;
59
+
background: var(--text-10);
60
+
/* https://smoothshadows.com/#djEsMiw1LDAuMDcsMjQsMzIsMCwjMDMwNzEyLCNmM2Y0ZjYsI2ZmZmZmZiwy */
61
+
box-shadow:
62
+
0px 1px 1px rgba(3, 7, 18, 0.07),
63
+
0px 5px 4px rgba(3, 7, 18, 0.06),
64
+
0px 12px 9px rgba(3, 7, 18, 0.04),
65
+
0px 20px 15px rgba(3, 7, 18, 0.03),
66
+
0px 32px 24px rgba(3, 7, 18, 0.01);
67
+
}
68
+
.label {
69
+
text-transform: uppercase;
70
+
}
71
+
.label::after {
72
+
--_s-line: 1px;
73
+
--_s-gap: 2px;
74
+
75
+
content: "";
76
+
position: absolute;
77
+
inset: 0;
78
+
left: var(--inset, 0);
79
+
background: repeating-linear-gradient(
80
+
to right,
81
+
transparent 0,
82
+
var(--text) var(--_s-line),
83
+
transparent var(--_s-line),
84
+
transparent calc(var(--_s-line) + var(--_s-gap))
85
+
);
86
+
mask-image: linear-gradient(
87
+
in lab to right,
88
+
rgb(0 0 0 / 0%),
89
+
rgb(0 0 0 / 90%)
90
+
);
91
+
}
92
+
.type-note {
93
+
--color: var(--c-blue);
94
+
--inset: 8ch;
95
+
}
96
+
.type-tip {
97
+
--color: var(--c-green);
98
+
--inset: 6ch;
99
+
}
100
+
.type-caution {
101
+
--color: var(--c-yellow);
102
+
--inset: 10ch;
103
+
}
104
+
.type-danger {
105
+
--color: var(--c-red);
106
+
--inset: 9ch;
107
+
}
108
+
.aside {
109
+
display: flex;
110
+
flex-direction: column;
111
+
padding: 24px 16px;
112
+
gap: 8px;
113
+
114
+
position: relative;
115
+
aspect-ratio: 3 / 1;
116
+
width: 320px;
117
+
118
+
--_border-width: 2px;
119
+
--_corner: 12px;
120
+
121
+
background: linear-gradient(
122
+
to bottom,
123
+
color(var(--color) / 90%),
124
+
color(var(--color) / 50%)
125
+
);
126
+
isolation: isolate;
127
+
box-shadow:
128
+
0px 1px 1px color(var(--color) / 0.07),
129
+
0px 5px 4px color(var(--color) / 0.06),
130
+
0px 12px 9px color(var(--color) / 0.04),
131
+
0px 20px 15px color(var(--color) / 0.03),
132
+
0px 32px 24px color(var(--color) / 0.01);
133
+
}
134
+
.aside::before {
135
+
content: "";
136
+
inset: var(--_border-width);
137
+
clip-path: polygon(
138
+
var(--_corner) 0,
139
+
calc(100% - var(--_corner)) 0,
140
+
100% var(--_corner),
141
+
100% calc(100% - var(--_corner)),
142
+
calc(100% - var(--_corner)) 100%,
143
+
var(--_corner) 100%,
144
+
0 calc(100% - var(--_corner)),
145
+
0 var(--_corner)
146
+
);
147
+
pointer-events: none;
148
+
149
+
background: var(--c-background)
150
+
radial-gradient(
151
+
400% 200% at center top,
152
+
color(var(--color) / 50%),
153
+
color(var(--color) / 10%)
154
+
);
155
+
156
+
position: absolute;
157
+
z-index: -1;
158
+
}
159
+
.aside::after {
160
+
content: "";
161
+
inset: 0;
162
+
position: absolute;
163
+
z-index: 1;
164
+
pointer-events: none;
165
+
}
166
+
</style>
167
+
168
+
<style>
169
+
@property --angle {
170
+
syntax: "<angle>";
171
+
initial-value: 0deg;
172
+
inherits: false;
173
+
}
174
+
175
+
@property --x {
176
+
syntax: "<percentage>";
177
+
initial-value: 35%;
178
+
inherits: false;
179
+
}
180
+
181
+
@property --shine {
182
+
syntax: "<color>";
183
+
initial-value: transparent;
184
+
inherits: false;
185
+
}
186
+
187
+
@property --shadow-strength {
188
+
syntax: "<percentage>";
189
+
initial-value: 0%;
190
+
inherits: false;
191
+
}
192
+
193
+
:root {
194
+
--h: 240;
195
+
--s: 0%;
196
+
--l: 100%;
197
+
--surface-1: hsl(var(--h) var(--s) calc(var(--l) + 4%) / 0);
198
+
--surface-2: hsl(var(--h) var(--s) calc(var(--l) + 8%) / 0);
199
+
--surface-3: hsl(var(--h) var(--s) calc(var(--l) + 15%) / 1);
200
+
--shadow-color: var(--h) var(--s) 15%;
201
+
--shadow-strength: 1%;
202
+
--shadow: 0 -2px 5px 0 hsl(var(--shadow-color) /
203
+
calc(var(--shadow-strength) + 2%)),
204
+
0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
205
+
0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
206
+
0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
207
+
0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
208
+
0 16px 16px -2px hsl(var(--shadow-color) /
209
+
calc(var(--shadow-strength) + 6%));
210
+
--space: 1rem;
211
+
}
212
+
213
+
.aside::after {
214
+
--_gleam: linear-gradient(
215
+
60deg,
216
+
transparent 40%,
217
+
var(--surface-3),
218
+
transparent 70%
219
+
)
220
+
var(--x) 0 / 600% 100% padding-box;
221
+
--_gleam-cover: radial-gradient(
222
+
circle at center,
223
+
var(--surface-1),
224
+
transparent
225
+
)
226
+
padding-box;
227
+
--_cover: linear-gradient(var(--surface-1), var(--surface-1)) padding-box;
228
+
--_shine: conic-gradient(
229
+
from var(--angle) at 20px 32px,
230
+
var(--shine),
231
+
transparent 20% 80%,
232
+
var(--shine)
233
+
)
234
+
border-box;
235
+
--_edges: linear-gradient(
236
+
30deg,
237
+
var(--surface-3),
238
+
var(--surface-2) 20% 80%,
239
+
var(--surface-3)
240
+
)
241
+
border-box;
242
+
243
+
display: grid;
244
+
position: relative;
245
+
border: 2px solid transparent;
246
+
background: var(--_gleam-cover), var(--_gleam), var(--_cover), var(--_shine),
247
+
var(--_edges);
248
+
mix-blend-mode: overlay;
249
+
opacity: 33%;
250
+
}
251
+
252
+
@supports (animation-timeline: view()) {
253
+
.aside::after {
254
+
animation: linear both;
255
+
animation-name: gleam, shine, shadow;
256
+
animation-timeline: view();
257
+
animation-range:
258
+
cover -10% cover 100%,
259
+
entry 0% cover 65%,
260
+
entry 0% exit 150%;
261
+
}
262
+
}
263
+
264
+
@media (prefers-reduced-motion: reduce) {
265
+
.aside::after {
266
+
animation: none !important;
267
+
}
268
+
}
269
+
270
+
@keyframes gleam {
271
+
from {
272
+
--angle: -1turn;
273
+
--x: 0%;
274
+
}
275
+
to {
276
+
--angle: 1turn;
277
+
--x: 100%;
278
+
}
279
+
}
280
+
281
+
@keyframes shadow {
282
+
from,
283
+
to {
284
+
box-shadow: none;
285
+
}
286
+
50%,
287
+
65% {
288
+
box-shadow: var(--shadow);
289
+
}
290
+
}
291
+
292
+
@keyframes shine {
293
+
0%,
294
+
45% {
295
+
--shine: transparent;
296
+
}
297
+
80% {
298
+
--shine: hsl(var(--h) var(--s) calc(var(--l) + 38%));
299
+
}
300
+
}
301
+
</style>