source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
style: implement corner-shape support for enhanced media presentation
- Add support for corner-shape styling in embed.css, post.css, profile.css, and app.astro to improve visual consistency of video and image elements.
- Define a CSS variable for corner-shape in tokens.css to standardize usage across stylesheets.
- Update mute toggle and QR code container styles to utilize the new corner-shape property for a modern look.
+42
+14
public/css/embed.css
+14
public/css/embed.css
···
190
190
.video-thumbnail {
191
191
border-radius: 10px;
192
192
}
193
+
194
+
@supports (corner-shape: squircle) {
195
+
video,
196
+
.video-thumbnail {
197
+
corner-shape: var(--orbyt-corner-shape, squircle);
198
+
}
199
+
}
193
200
}
194
201
.mute-toggle-wrapper {
195
202
display: flex;
···
217
224
cursor: pointer;
218
225
border: none;
219
226
}
227
+
228
+
@supports (corner-shape: squircle) {
229
+
#mute-toggle {
230
+
corner-shape: var(--orbyt-corner-shape, squircle);
231
+
}
232
+
}
233
+
220
234
#mute-toggle span {
221
235
text-box-trim: trim-both;
222
236
text-box-edge: cap alphabetic;
+6
public/css/post.css
+6
public/css/post.css
+8
public/css/profile.css
+8
public/css/profile.css
···
360
360
border-radius: 10px;
361
361
}
362
362
363
+
@supports (corner-shape: squircle) {
364
+
.post img,
365
+
.post-overlay {
366
+
corner-shape: var(--orbyt-corner-shape, squircle);
367
+
}
368
+
}
369
+
363
370
.post {
364
371
padding-left: 10px;
365
372
padding-right: 10px;
···
371
378
padding-right: 10px;
372
379
border-radius: 0 0 10px 10px;
373
380
}
381
+
374
382
.post-overlay .caption {
375
383
/* Fluid font size: scales smoothly with viewport */
376
384
font-size: clamp(14px, 1.2vw, 16px);
+7
public/css/tokens.css
+7
public/css/tokens.css
···
47
47
--site-page-padding-x: clamp(1rem, 5vw, 2rem);
48
48
--site-page-padding-y: clamp(1rem, 5vw, 2rem);
49
49
--site-footer-margin-bottom: 2.5rem;
50
+
51
+
/*
52
+
* CSS Borders 4 — corner-shape + border-radius (squircle ≡ superellipse(2)).
53
+
* Use on rounded media surfaces and the tap-to-mute control; skip pure circles, 999px pills, and stadium CTAs elsewhere.
54
+
* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/superellipse
55
+
*/
56
+
--orbyt-corner-shape: squircle;
50
57
}
+6
src/pages/app.astro
+6
src/pages/app.astro