source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
refactor: adjust mobile caption styles and improve responsiveness in embed and post CSS; enhance caption toggle functionality in post-view.js
+41
-28
+36
-24
public/css/embed.css
+36
-24
public/css/embed.css
···
58
58
.post-caption-mobile-inner {
59
59
display: flex;
60
60
flex-direction: row;
61
-
align-items: center;
61
+
align-items: flex-end;
62
62
gap: 6px;
63
63
width: 100%;
64
64
min-width: 0;
65
-
}
66
-
.post-caption-mobile-inner[data-collapsed="false"] {
67
-
flex-direction: column;
68
-
align-items: stretch;
69
-
gap: 6px;
70
65
}
71
66
.post-caption-mobile-text {
72
67
flex: 1;
···
86
81
-webkit-box-orient: unset;
87
82
overflow: visible;
88
83
}
89
-
.post-caption-mobile-inner[data-collapsed="false"] .post-caption-mobile-toggle {
90
-
align-self: flex-end;
91
-
}
92
84
.post-caption-mobile-toggle {
93
85
flex-shrink: 0;
94
86
display: inline-flex;
95
87
align-items: center;
96
88
justify-content: center;
97
-
box-sizing: border-box;
98
89
margin: 0;
99
-
padding: 3px 12px;
90
+
padding: 0 8px;
91
+
height: 20px;
100
92
border: none;
101
93
border-radius: 999px;
102
94
cursor: pointer;
···
104
96
font-size: 11px;
105
97
font-weight: 600;
106
98
line-height: 1;
107
-
letter-spacing: 0.9px;
108
-
min-height: 24px;
109
-
color: rgba(243, 245, 254, 0.9);
110
-
-webkit-text-fill-color: rgba(243, 245, 254, 0.9);
111
-
background-color: rgba(243, 245, 254, 0.18) !important;
112
-
background: rgba(243, 245, 254, 0.18) !important;
113
-
-webkit-backdrop-filter: blur(6px);
114
-
backdrop-filter: blur(6px);
115
-
overflow: hidden;
99
+
letter-spacing: 0.5px;
100
+
color: rgba(243, 245, 254, 0.88);
101
+
-webkit-text-fill-color: rgba(243, 245, 254, 0.88);
102
+
background-color: rgba(243, 245, 254, 0.12) !important;
103
+
background: rgba(243, 245, 254, 0.12) !important;
104
+
-webkit-backdrop-filter: blur(8px);
105
+
backdrop-filter: blur(8px);
116
106
-webkit-tap-highlight-color: transparent;
117
107
-webkit-appearance: none;
118
108
appearance: none;
···
127
117
outline-offset: 2px;
128
118
}
129
119
.post-caption-mobile-toggle:active {
130
-
color: rgba(243, 245, 254, 0.98);
131
-
-webkit-text-fill-color: rgba(243, 245, 254, 0.98);
132
-
background-color: rgba(243, 245, 254, 0.28) !important;
133
-
background: rgba(243, 245, 254, 0.28) !important;
120
+
color: rgba(243, 245, 254, 1);
121
+
-webkit-text-fill-color: rgba(243, 245, 254, 1);
122
+
background-color: rgba(243, 245, 254, 0.22) !important;
123
+
background: rgba(243, 245, 254, 0.22) !important;
134
124
}
135
125
}
136
126
.post-overlay {
···
147
137
box-sizing: border-box;
148
138
width: 100%;
149
139
z-index: 10;
140
+
}
141
+
142
+
/*--- Caption expanded dim ---*/
143
+
#post-media.caption-expanded .post-media-visual::after {
144
+
content: '';
145
+
position: absolute;
146
+
inset: 0;
147
+
background: rgba(0, 0, 0, 0.35);
148
+
z-index: 5;
149
+
pointer-events: none;
150
+
transition: opacity 0.25s ease;
151
+
opacity: 1;
152
+
}
153
+
#post-media:not(.caption-expanded) .post-media-visual::after {
154
+
content: '';
155
+
position: absolute;
156
+
inset: 0;
157
+
background: rgba(0, 0, 0, 0.35);
158
+
z-index: 5;
159
+
pointer-events: none;
160
+
transition: opacity 0.25s ease;
161
+
opacity: 0;
150
162
}
151
163
152
164
/*--- Video ---*/
+2
-2
public/css/post.css
+2
-2
public/css/post.css
···
1
1
/*--- Responsive styles ---*/
2
-
@media screen and (max-width: 700px) {
2
+
@media screen and (max-width: 665px) {
3
3
#desktop {
4
4
display: none;
5
5
}
6
6
}
7
7
8
-
@media screen and (min-width: 700px) {
8
+
@media screen and (min-width: 665px) {
9
9
.mobile-overlay {
10
10
display: none;
11
11
}
+1
public/js/post-view.js
+1
public/js/post-view.js
···
295
295
inner.dataset.collapsed = expanded ? 'true' : 'false';
296
296
toggle.textContent = expanded ? 'Show' : 'Hide';
297
297
toggle.setAttribute('aria-expanded', expanded ? 'false' : 'true');
298
+
document.getElementById('post-media')?.classList.toggle('caption-expanded', !expanded);
298
299
});
299
300
}
300
301
+2
-2
src/pages/@[handle]/[postId].astro
+2
-2
src/pages/@[handle]/[postId].astro
···
164
164
text-box-edge: cap alphabetic;
165
165
}
166
166
@media screen and (max-width: 699px) {
167
-
.logo-overlay.mobile-overlay .logo-text {
168
-
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
167
+
.logo-overlay.mobile-overlay .logo-wordmark {
168
+
opacity: 0.85;
169
169
}
170
170
}
171
171
@media screen and (max-width: 540px) {