source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
Merge pull request #5 from Hann8n/claude/simplify-page-transitions-focJx
authored by
Jack Hannon
and committed by
GitHub
7681532d
15792d2c
+8
-20
-12
public/css/embed.css
-12
public/css/embed.css
···
82
82
visibility: hidden;
83
83
}
84
84
85
-
/* View transition: only the visible caption participates (matches profile's caption-{postId}) */
86
-
@media (min-width: 700px) {
87
-
#post-caption-mobile {
88
-
view-transition-name: none !important;
89
-
}
90
-
}
91
-
@media (max-width: 699px) {
92
-
#post-caption-desktop {
93
-
view-transition-name: none !important;
94
-
}
95
-
}
96
-
97
85
/* Desktop: video sizing using CSS viewport units */
98
86
@media screen and (min-width: 700px) {
99
87
.video-container {
+4
-4
src/pages/@[handle].astro
+4
-4
src/pages/@[handle].astro
···
214
214
<header style={`background-color: ${backgroundColor};`}>
215
215
<div class="links">
216
216
<a href='/' class="logo-wordmark">
217
-
<span class="logo-text" style={`color: ${textColor}; view-transition-name: orbyt-logo;`}>orbyt</span>
217
+
<span class="logo-text" style={`color: ${textColor};`}>orbyt</span>
218
218
</a>
219
-
<a class='install-button mobile' href="https://apps.apple.com/us/app/orbyt-video/id6751679299" style={`background-color: ${textColor}; color: ${backgroundColor}; view-transition-name: orbyt-beta;`}>
219
+
<a class='install-button mobile' href="https://apps.apple.com/us/app/orbyt-video/id6751679299" style={`background-color: ${textColor}; color: ${backgroundColor};`}>
220
220
Get the app
221
221
<svg class="svg-button" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
222
222
<path d="M1.93892 19.9988L18.9736 2.96362" stroke="currentColor" stroke-width="3.993"/>
···
272
272
<img class="post-placeholder" src="/images/post/placeholder.png" alt="" />
273
273
<img class="post-thumb" src={post.thumbnail} alt="" style={`view-transition-name: video-${post.postId}`} />
274
274
<div class="post-overlay">
275
-
<div class="caption" style={`view-transition-name: caption-${post.postId}`} set:html={parseRichText(post.caption)}></div>
275
+
<div class="caption" set:html={parseRichText(post.caption)}></div>
276
276
</div>
277
277
</div>
278
278
<a href={`/@${handle}/${post.postId}`} aria-label="View post"></a>
···
335
335
<img class="post-placeholder" src="/images/post/placeholder.png" alt="" />
336
336
<img class="post-thumb" src="${post.thumbnail}" alt="" style="view-transition-name: video-${post.postId}" />
337
337
<div class="post-overlay">
338
-
<div class="caption" style="view-transition-name: caption-${post.postId}">${post.captionHtml}</div>
338
+
<div class="caption">${post.captionHtml}</div>
339
339
</div>
340
340
</div>
341
341
<a href="/@${handle}/${post.postId}" aria-label="View post"></a>
+4
-4
src/pages/@[handle]/[postId].astro
+4
-4
src/pages/@[handle]/[postId].astro
···
372
372
373
373
<div class="logo">
374
374
<a href='/' class="logo-wordmark">
375
-
<span class="logo-text" style="view-transition-name: orbyt-logo;">orbyt</span>
375
+
<span class="logo-text">orbyt</span>
376
376
</a>
377
377
</div>
378
378
379
-
<a class='install-button' href="https://apps.apple.com/us/app/orbyt-video/id6751679299" style="view-transition-name: orbyt-beta;">
379
+
<a class='install-button' href="https://apps.apple.com/us/app/orbyt-video/id6751679299">
380
380
Get the app
381
381
<svg class="svg-button" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
382
382
<path d="M1.93892 19.9988L18.9736 2.96362" stroke-width="3.993"/>
···
396
396
</button>
397
397
</div>
398
398
399
-
<div id="post-caption-mobile" class="post-content mobile-overlay" style={`view-transition-name: caption-${postId}`} set:html={parseRichText(caption)}></div>
399
+
<div id="post-caption-mobile" class="post-content mobile-overlay" set:html={parseRichText(caption)}></div>
400
400
401
401
<div class="post-author mobile-overlay">
402
402
···
457
457
458
458
<div>
459
459
460
-
<div id="post-caption-desktop" class="post-content" style={`view-transition-name: caption-${postId}`} set:html={parseRichText(caption)}></div>
460
+
<div id="post-caption-desktop" class="post-content" set:html={parseRichText(caption)}></div>
461
461
462
462
<div class="post-author">
463
463
<span class='avatar-wrapper'>