interactive intro to open social
at-me.zzstoatzz.io
fix mobile layout for discover callout
- stack callout vertically on mobile instead of side-by-side
- shorten callout text for tighter mobile fit
- reduce padding and font sizes for mobile
- sync view/index.html
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+33
-13
+32
-11
src/view/layout.css
+32
-11
src/view/layout.css
···
244
244
/* Discover callout banner */
245
245
.discover-callout {
246
246
position: fixed;
247
-
bottom: 5rem;
247
+
bottom: 4.5rem;
248
248
left: 50%;
249
249
transform: translateX(-50%);
250
250
z-index: 500;
251
+
width: min(440px, calc(100vw - 2rem));
251
252
opacity: 0;
252
-
transition: opacity 0.3s ease, transform 0.3s ease;
253
+
transition: opacity 0.3s ease;
253
254
pointer-events: none;
254
255
}
255
256
···
262
263
background: var(--surface);
263
264
border: 1px solid var(--border);
264
265
border-radius: 8px;
265
-
padding: 1rem 1.25rem;
266
-
max-width: min(480px, calc(100vw - 2rem));
266
+
padding: 0.75rem 1rem;
267
267
display: flex;
268
268
align-items: center;
269
-
gap: 1rem;
269
+
gap: 0.75rem;
270
270
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
271
271
}
272
272
273
273
.discover-callout-text {
274
-
font-size: 0.75rem;
274
+
font-size: 0.7rem;
275
275
color: var(--text-light);
276
-
line-height: 1.5;
276
+
line-height: 1.4;
277
+
flex: 1;
278
+
min-width: 0;
277
279
}
278
280
279
281
.discover-callout-text strong {
280
282
color: var(--text);
281
-
display: block;
282
-
margin-bottom: 0.25rem;
283
283
}
284
284
285
285
.discover-callout-dismiss {
286
286
font-family: inherit;
287
-
font-size: 0.7rem;
288
-
padding: 0.35rem 0.75rem;
287
+
font-size: 0.65rem;
288
+
padding: 0.3rem 0.6rem;
289
289
background: var(--text);
290
290
color: var(--bg);
291
291
border: none;
···
299
299
.discover-callout-dismiss:hover {
300
300
opacity: 0.85;
301
301
}
302
+
303
+
@media (max-width: 768px) {
304
+
.discover-callout {
305
+
bottom: 3.5rem;
306
+
}
307
+
308
+
.discover-callout-content {
309
+
flex-direction: column;
310
+
align-items: flex-start;
311
+
gap: 0.5rem;
312
+
padding: 0.75rem;
313
+
}
314
+
315
+
.discover-callout-text {
316
+
font-size: 0.65rem;
317
+
}
318
+
319
+
.discover-callout-text strong {
320
+
display: inline;
321
+
}
322
+
}
+1
-2
src/view/visualization.js
+1
-2
src/view/visualization.js
···
327
327
callout.innerHTML = `
328
328
<div class="discover-callout-content">
329
329
<div class="discover-callout-text">
330
-
<strong>your account works with more than just bluesky.</strong>
331
-
try any of these apps — sign in with your existing account, and come back here to see your updated activity.
330
+
<strong>your account works with more than just bluesky.</strong> try any of these apps with your existing account.
332
331
</div>
333
332
<button class="discover-callout-dismiss" id="discoverDismiss">got it</button>
334
333
</div>