interactive intro to open social at-me.zzstoatzz.io
25
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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>