source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
style: update color variables for improved consistency across styles
- Refactor color properties in embed.css, shared.css, site-document.css, site-footer.css, and tokens.css to utilize CSS variables for better maintainability.
- Replace hardcoded color values with corresponding CSS variables to enhance design consistency and facilitate future updates.
+30
-21
+18
-13
public/css/embed.css
+18
-13
public/css/embed.css
···
103
103
font-weight: 500;
104
104
line-height: 1;
105
105
letter-spacing: 0;
106
-
color: rgba(255, 255, 255, 0.8);
107
-
-webkit-text-fill-color: rgba(255, 255, 255, 0.8);
108
-
background: rgba(243, 245, 254, 0.12);
106
+
color: rgb(var(--orbyt-white-rgb) / 0.8);
107
+
-webkit-text-fill-color: rgb(var(--orbyt-white-rgb) / 0.8);
108
+
background: rgb(var(--orbyt-white-rgb) / 0.12);
109
109
overflow: hidden;
110
110
-webkit-tap-highlight-color: transparent;
111
111
-webkit-appearance: none;
···
117
117
outline: none;
118
118
}
119
119
.post-caption-mobile-toggle:focus-visible {
120
-
outline: 2px solid rgba(255, 255, 255, 0.35);
120
+
outline: 2px solid rgb(var(--orbyt-white-rgb) / 0.35);
121
121
outline-offset: 2px;
122
122
}
123
123
.post-caption-mobile-toggle:active {
124
-
color: rgba(255, 255, 255, 0.8);
125
-
-webkit-text-fill-color: rgba(255, 255, 255, 0.8);
126
-
background: rgba(243, 245, 254, 0.2);
124
+
color: rgb(var(--orbyt-white-rgb) / 0.8);
125
+
-webkit-text-fill-color: rgb(var(--orbyt-white-rgb) / 0.8);
126
+
background: rgb(var(--orbyt-white-rgb) / 0.2);
127
127
}
128
128
}
129
129
.post-overlay {
130
-
background: linear-gradient(360deg, rgba(0,0,0,0.4) 0%, rgba(0, 0, 0, 0.2) 43.67%, rgba(0, 0, 0, 0) 96.43%);
131
-
color: #f3f5fe;
130
+
background: linear-gradient(
131
+
360deg,
132
+
rgb(var(--orbyt-scrim-rgb) / 0.4) 0%,
133
+
rgb(var(--orbyt-scrim-rgb) / 0.2) 43.67%,
134
+
rgb(var(--orbyt-scrim-rgb) / 0) 96.43%
135
+
);
136
+
color: var(--orbyt-white);
132
137
padding: 100px 20px 20px;
133
138
position: absolute;
134
139
bottom: 0;
···
209
214
display: none;
210
215
}
211
216
#mute-toggle {
212
-
background: rgba(0,0,0,0.5);
217
+
background: rgb(var(--orbyt-scrim-rgb) / 0.5);
213
218
border-radius: 35px;
214
-
color: #f3f5fe;
219
+
color: var(--orbyt-white);
215
220
display: flex;
216
221
line-height: 1;
217
222
letter-spacing: 1.6px;
···
301
306
white-space: nowrap;
302
307
}
303
308
.post-author .username a {
304
-
color: #f3f5fe;
309
+
color: var(--orbyt-white);
305
310
text-decoration: none;
306
311
display: block;
307
312
overflow: hidden;
···
310
315
.post-author .username a:active,
311
316
.post-author .username a:hover,
312
317
.post-author .username a:visited {
313
-
color: #f3f5fe;
318
+
color: var(--orbyt-white);
314
319
text-decoration: none;
315
320
}
316
321
.likes {
+2
-2
public/css/site-document.css
+2
-2
public/css/site-document.css
+8
-4
public/css/tokens.css
+8
-4
public/css/tokens.css
···
19
19
:root {
20
20
/* Brand */
21
21
--orbyt-white: #f3f5fe;
22
+
--orbyt-white-rgb: 243, 245, 254;
22
23
--orbyt-black: #05070a;
23
24
--orbyt-purple: #551def;
25
+
--orbyt-teal: #01f5b3;
24
26
25
27
/* Neutrals (common surfaces / text) */
26
28
--orbyt-neutral-900: #0e141b;
27
29
--orbyt-neutral-200: #ccd7e9;
28
-
--orbyt-neutral-muted: #b1bacf;
30
+
--orbyt-neutral-300: #a8b8d4;
31
+
--orbyt-neutral-400: #7a8aa8;
32
+
--orbyt-neutral-muted: var(--orbyt-neutral-300);
29
33
30
34
/* Marketing / embed surfaces */
31
35
--orbyt-page-bg: var(--orbyt-black);
32
36
--orbyt-page-fg: var(--orbyt-neutral-muted);
33
-
--orbyt-install-surface: #f4f7ff;
37
+
--orbyt-install-surface: #e4eaf5;
34
38
35
39
/* Default profile chrome (SSR normally sets --orbyt-chrome on body) */
36
-
--orbyt-chrome-fallback: #0c1117;
40
+
--orbyt-chrome-fallback: #0c1118;
37
41
38
42
/* Scrims / shadows (Orbyt black rgb — matches app Colors.overlay) */
39
43
--orbyt-scrim-rgb: 5, 7, 10;
40
44
--orbyt-shadow-soft: rgb(var(--orbyt-scrim-rgb) / 0.15);
41
45
42
46
/* Profile: optional empty state */
43
-
--orbyt-text-subtle: #9ca3af;
47
+
--orbyt-text-subtle: var(--orbyt-neutral-400);
44
48
45
49
/* Site layout */
46
50
--site-content-max-width: 800px;