A calm place to write long-form, and publish it to the open social web.
skypress.blog/
Fix unstyled home pill: reach the client:only island with :global()
author
Jeremy Herve
date
(Jun 8, 2026, 8:59 PM +0200)
commit
4fac0146
4fac0146d612dc297f466c7a8a479bfbf2048f58
parent
3508701e
3508701e095952d72ba528fe8ef585ba8825b1fe
+11
-8
+11
-8
src/pages/index.astro
+11
-8
src/pages/index.astro
···
200
200
border-color: var(--sky-ink);
201
201
}
202
202
203
-
/* Signed-in author pill — shares the frosted sky-chip treatment + button radius. */
204
-
.masthead .authorpill {
203
+
/* Signed-in author pill — shares the frosted sky-chip treatment + button radius.
204
+
AuthorPill is a `client:only` React island, so Astro's scoped styles never
205
+
reach its DOM; target it with `:global()`. The `.masthead` prefix stays scoped
206
+
so the pill still inherits the per-phase `--sky-*` custom properties. */
207
+
.masthead :global(.authorpill) {
205
208
display: inline-flex;
206
209
align-items: center;
207
210
gap: 0.55rem;
···
215
218
-webkit-backdrop-filter: blur(8px);
216
219
text-shadow: var(--sky-shadow);
217
220
}
218
-
.masthead .authorpill:hover {
221
+
.masthead :global(.authorpill:hover) {
219
222
border-color: var(--sky-ink);
220
223
}
221
-
.authorpill__avatar {
224
+
.masthead :global(.authorpill__avatar) {
222
225
width: 30px;
223
226
height: 30px;
224
227
border-radius: 50%;
225
228
object-fit: cover;
226
229
flex: none;
227
230
}
228
-
.authorpill__avatar--fallback {
231
+
.masthead :global(.authorpill__avatar--fallback) {
229
232
display: inline-flex;
230
233
align-items: center;
231
234
justify-content: center;
···
234
237
font-weight: 700;
235
238
font-size: 0.85rem;
236
239
}
237
-
.authorpill__who {
240
+
.masthead :global(.authorpill__who) {
238
241
display: flex;
239
242
flex-direction: column;
240
243
line-height: 1.1;
241
244
}
242
-
.authorpill__name {
245
+
.masthead :global(.authorpill__name) {
243
246
font-weight: 680;
244
247
font-size: 0.86rem;
245
248
}
246
-
.authorpill__handle {
249
+
.masthead :global(.authorpill__handle) {
247
250
font-size: 0.72rem;
248
251
opacity: 0.8;
249
252
}