source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
refactor: update AltStore components and styles for clarity and responsiveness
- Renamed text in AltstorePalPeek component for improved clarity.
- Removed AltstorePalTouchHint component as it was no longer needed.
- Adjusted layout and styles in app and index pages to enhance user experience.
- Updated CSS for AltstorePalPeek to improve responsiveness and visual consistency.
+95
-60
+2
-2
src/components/AltstorePalPeek.astro
+2
-2
src/components/AltstorePalPeek.astro
···
65
65
</button>
66
66
</form>
67
67
<p class="altstore-pal-qr-dialog__new">
68
-
New to altstore?{' '}
68
+
Need AltStore?{' '}
69
69
<a
70
70
class="altstore-pal-qr-dialog__altstore-link"
71
71
href="https://altstore.io/#Downloads"
72
72
target="_blank"
73
73
rel="noopener noreferrer"
74
74
>
75
-
get it here
75
+
Get AltStore
76
76
</a>
77
77
</p>
78
78
</div>
-1
src/components/AltstorePalTouchHint.astro
-1
src/components/AltstorePalTouchHint.astro
···
1
-
<p class="altstore-pal-hint" aria-hidden="true">Opens with AltStore PAL</p>
+5
-4
src/pages/app.astro
+5
-4
src/pages/app.astro
···
1
1
---
2
-
// All users see this landing page with QR code
2
+
// QR helps desktop users open this URL on iPhone; hidden on touch (same page on device).
3
3
import AltstorePalPeek from '../components/AltstorePalPeek.astro';
4
-
import AltstorePalTouchHint from '../components/AltstorePalTouchHint.astro';
5
4
import DocumentColorScheme from '../components/DocumentColorScheme.astro';
6
5
import {
7
6
getIosDownloadOptionsFromRequest,
···
185
184
.subtitle-mobile {
186
185
display: block;
187
186
}
187
+
.qr-section {
188
+
display: none;
189
+
}
188
190
.buttons {
189
-
margin-top: 40px;
191
+
margin-top: 28px;
190
192
}
191
193
}
192
194
···
248
250
>
249
251
{showAltstorePalPeek && <AltstorePalPeek href={iosHref} />}
250
252
<a href="/ios" class="download-button">iOS</a>
251
-
{showAltstorePalPeek && <AltstorePalTouchHint />}
252
253
</div>
253
254
<a href="/android" class="download-button">Android Waitlist</a>
254
255
</div>
-2
src/pages/index.astro
-2
src/pages/index.astro
···
2
2
export const prerender = false;
3
3
4
4
import AltstorePalPeek from '../components/AltstorePalPeek.astro';
5
-
import AltstorePalTouchHint from '../components/AltstorePalTouchHint.astro';
6
5
import DocumentColorScheme from '../components/DocumentColorScheme.astro';
7
6
import SiteFooter from '../components/SiteFooter.astro';
8
7
import {
···
270
269
>
271
270
{showAltstorePalPeek && <AltstorePalPeek href={iosHref} />}
272
271
<a href="/ios" class="download-button">iOS</a>
273
-
{showAltstorePalPeek && <AltstorePalTouchHint />}
274
272
</div>
275
273
<a href="/android" class="download-button">Android Waitlist</a>
276
274
</div>
+88
-51
src/styles/altstore-pal-peek.css
+88
-51
src/styles/altstore-pal-peek.css
···
1
1
/* AltStore PAL badge + tip; parent must include .download-button-wrap--pal on the wrap */
2
2
3
-
.download-button-wrap--pal .altstore-pal-hint {
4
-
display: none;
5
-
margin: 0;
6
-
padding: 0;
7
-
font-family: 'Figtree', sans-serif;
8
-
font-size: 13px;
9
-
font-weight: 500;
10
-
letter-spacing: 0.05em;
11
-
color: #888;
12
-
text-align: center;
13
-
line-height: 1.4;
14
-
pointer-events: none;
15
-
}
16
-
17
-
@media (hover: none), (pointer: coarse) {
18
-
.download-button-wrap--pal .altstore-pal-hint {
19
-
display: block;
20
-
margin-top: 10px;
21
-
}
22
-
}
23
-
24
3
.download-button-wrap--pal {
25
4
--altstore-badge-border: 2px;
26
5
--altstore-badge-clip: polygon(
···
351
330
}
352
331
}
353
332
354
-
@media (prefers-reduced-motion: reduce) {
333
+
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
355
334
.download-button-wrap--pal .altstore-pal-peek {
356
335
transition: none;
357
336
transform: translate(38%, -40%) rotate(7deg);
···
370
349
height: 40px;
371
350
right: 4px;
372
351
}
373
-
374
-
.download-button-wrap--pal .altstore-pal-hint {
375
-
font-size: 12px;
376
-
margin-top: 8px;
377
-
}
378
352
}
379
353
354
+
/* ---------------------------------------------------------------------------
355
+
Touch (no hover) — celebrate AltStore the same way desktop does, but
356
+
without relying on hover. The corner peek stays glued to the iOS button
357
+
and the handwritten Caveat tip is always-visible (it's the desktop hover
358
+
state, made persistent).
359
+
--------------------------------------------------------------------------- */
380
360
@media (hover: none) and (pointer: coarse) {
361
+
.download-button-wrap--pal {
362
+
/* Reserve room for the badge that overflows the button's top edge */
363
+
padding-top: 16px;
364
+
}
365
+
381
366
.download-button-wrap--pal .altstore-pal-peek {
382
-
z-index: 2;
383
-
display: flex;
384
-
align-items: center;
385
-
justify-content: center;
386
367
width: 50px;
387
368
height: 50px;
388
-
top: 0;
389
-
right: 0;
390
-
box-sizing: border-box;
391
-
box-shadow: none;
369
+
top: 2px;
370
+
right: 8px;
371
+
transform-origin: 58% 76%;
372
+
transform: translate(28%, -36%) rotate(7deg);
373
+
transition: transform 0.18s ease;
374
+
}
375
+
376
+
.download-button-wrap--pal .altstore-pal-peek:active {
377
+
transform: translate(28%, -34%) rotate(7deg) scale(0.96);
392
378
}
393
379
394
-
.download-button-wrap--pal .altstore-pal-peek::before {
395
-
inset: auto;
396
-
width: calc(38px + 2 * var(--altstore-badge-border));
397
-
height: calc(38px + 2 * var(--altstore-badge-border));
398
-
left: 50%;
380
+
/* Persistent hand-drawn tip pointing at the badge */
381
+
.download-button-wrap--pal .altstore-pal-peek__tip {
382
+
display: flex;
383
+
flex-direction: row;
384
+
align-items: center;
385
+
direction: ltr;
386
+
gap: 8px;
387
+
position: absolute;
388
+
right: 100%;
399
389
top: 50%;
400
-
transform: translate(-50%, -50%);
390
+
transform: translateY(calc(-50% - 6px));
391
+
margin-right: 4px;
392
+
padding: 2px 0;
393
+
pointer-events: none;
394
+
white-space: nowrap;
395
+
opacity: 1;
396
+
z-index: 2;
401
397
}
402
398
403
-
.download-button-wrap--pal .altstore-pal-peek__img {
404
-
width: 38px;
405
-
height: 38px;
406
-
max-width: 38px;
407
-
max-height: 38px;
399
+
.download-button-wrap--pal .altstore-pal-peek__tip-label {
400
+
font-family: 'Caveat', cursive;
401
+
font-size: 1.18rem;
402
+
font-weight: 400;
403
+
line-height: 1;
404
+
color: rgba(255, 255, 255, 0.94);
405
+
letter-spacing: 0.02em;
406
+
text-transform: lowercase;
407
+
}
408
+
409
+
.download-button-wrap--pal .altstore-pal-peek__tip-arrow {
410
+
display: block;
411
+
width: 26px;
412
+
height: auto;
408
413
flex-shrink: 0;
409
-
-webkit-clip-path: var(--altstore-badge-clip);
410
-
clip-path: var(--altstore-badge-clip);
414
+
align-self: center;
415
+
margin: 2px 2px 2px 1px;
416
+
opacity: 0.95;
417
+
overflow: visible;
418
+
transform-origin: 32% 48%;
419
+
transform: rotate(30deg);
420
+
}
421
+
422
+
.download-button-wrap--pal .altstore-pal-peek__img {
411
423
filter:
412
-
drop-shadow(0 2px 5px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 18px rgba(1, 245, 179, 0.12));
424
+
drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22))
425
+
drop-shadow(0 0 22px rgba(1, 245, 179, 0.18));
426
+
}
427
+
}
428
+
429
+
@media (hover: none) and (pointer: coarse) and (max-width: 500px) {
430
+
.download-button-wrap--pal {
431
+
padding-top: 14px;
432
+
}
433
+
434
+
.download-button-wrap--pal .altstore-pal-peek {
435
+
width: 46px;
436
+
height: 46px;
437
+
right: 6px;
438
+
}
439
+
440
+
.download-button-wrap--pal .altstore-pal-peek__tip-label {
441
+
font-size: 1.1rem;
413
442
}
414
443
415
-
.download-button-wrap--pal .altstore-pal-peek:active .altstore-pal-peek__img {
416
-
opacity: 0.92;
444
+
.download-button-wrap--pal .altstore-pal-peek__tip-arrow {
445
+
width: 23px;
446
+
}
447
+
}
448
+
449
+
@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
450
+
.download-button-wrap--pal .altstore-pal-peek,
451
+
.download-button-wrap--pal .altstore-pal-peek:active {
452
+
transition: none;
453
+
transform: translate(28%, -36%) rotate(7deg);
417
454
}
418
455
}