source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
Implement view transition adjustments for post captions in embed.css and [postId].astro
- Updated CSS to disable view transitions for mobile and desktop post captions based on screen size.
- Modified inline style for the desktop caption to align with the new transition naming convention.
+13
-1
+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
+
85
97
/* Desktop: video sizing using CSS viewport units */
86
98
@media screen and (min-width: 700px) {
87
99
.video-container {
+1
-1
src/pages/@[handle]/[postId].astro
+1
-1
src/pages/@[handle]/[postId].astro
···
457
457
458
458
<div>
459
459
460
-
<div id="post-caption-desktop" class="post-content" style={`view-transition-name: caption-${postId}-desktop`} set:html={parseRichText(caption)}></div>
460
+
<div id="post-caption-desktop" class="post-content" style={`view-transition-name: caption-${postId}`} set:html={parseRichText(caption)}></div>
461
461
462
462
<div class="post-author">
463
463
<span class='avatar-wrapper'>