source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
feat: enhance language switcher with flags and codes, improve CSS styles for better layout
+195
-70
+2
public/css/site-document.css
+2
public/css/site-document.css
···
71
71
color: var(--orbyt-white);
72
72
margin: 0 0 0.75rem;
73
73
line-height: 1.1;
74
+
overflow-wrap: break-word;
74
75
}
75
76
76
77
.site-doc__subtitle {
···
85
86
flex: 1;
86
87
line-height: 1.6;
87
88
font-size: 1rem;
89
+
overflow-wrap: break-word;
88
90
}
89
91
90
92
.site-doc__prose h2 {
+132
-4
public/css/tokens.css
+132
-4
public/css/tokens.css
···
29
29
--orbyt-black: #05070a;
30
30
--orbyt-purple: #551def;
31
31
--orbyt-teal: #01f5b3;
32
+
--orbyt-coral: #fe5f79;
32
33
33
-
/* Neutrals (common surfaces / text) */
34
-
--orbyt-neutral-900: #0e141b;
34
+
/* Purple scale */
35
+
--orbyt-purple-50: #f5f0ff;
36
+
--orbyt-purple-100: #ece0ff;
37
+
--orbyt-purple-200: #d4bfff;
38
+
--orbyt-purple-300: #b894ff;
39
+
--orbyt-purple-400: #9b6aff;
40
+
--orbyt-purple-500: #551def;
41
+
--orbyt-purple-600: #4a14cc;
42
+
--orbyt-purple-700: #3c10a6;
43
+
--orbyt-purple-800: #2e0c80;
44
+
--orbyt-purple-900: #200858;
45
+
--orbyt-purple-950: #120430;
46
+
47
+
/* Teal scale */
48
+
--orbyt-teal-50: #e0fff5;
49
+
--orbyt-teal-100: #b3ffe9;
50
+
--orbyt-teal-200: #75ffd8;
51
+
--orbyt-teal-300: #38ffc6;
52
+
--orbyt-teal-400: #01f5b3;
53
+
--orbyt-teal-500: #00d69c;
54
+
--orbyt-teal-600: #00b382;
55
+
--orbyt-teal-700: #008f68;
56
+
--orbyt-teal-800: #006b4e;
57
+
--orbyt-teal-900: #004734;
58
+
--orbyt-teal-950: #00291e;
59
+
60
+
/* Coral scale */
61
+
--orbyt-coral-50: #fff0f2;
62
+
--orbyt-coral-100: #ffdbdf;
63
+
--orbyt-coral-200: #ffb8c2;
64
+
--orbyt-coral-300: #ff8d9e;
65
+
--orbyt-coral-400: #fe5f79;
66
+
--orbyt-coral-500: #f5355a;
67
+
--orbyt-coral-600: #db1f44;
68
+
--orbyt-coral-700: #b71a39;
69
+
--orbyt-coral-800: #93152e;
70
+
--orbyt-coral-900: #6f1023;
71
+
--orbyt-coral-950: #450a15;
72
+
73
+
/* Pink scale */
74
+
--orbyt-pink-50: #fff0f8;
75
+
--orbyt-pink-100: #ffd9ef;
76
+
--orbyt-pink-200: #ffb3df;
77
+
--orbyt-pink-300: #ff80c7;
78
+
--orbyt-pink-400: #ff4dad;
79
+
--orbyt-pink-500: #f72595;
80
+
--orbyt-pink-600: #d60f7a;
81
+
--orbyt-pink-700: #ad0c63;
82
+
--orbyt-pink-800: #850a4c;
83
+
--orbyt-pink-900: #5c0735;
84
+
--orbyt-pink-950: #33041d;
85
+
86
+
/* Neutral scale */
87
+
--orbyt-neutral-0: #f3f5fe;
88
+
--orbyt-neutral-50: #f3f5fe;
89
+
--orbyt-neutral-100: #e4eaf5;
35
90
--orbyt-neutral-200: #ccd7e9;
36
91
--orbyt-neutral-300: #a8b8d4;
37
92
--orbyt-neutral-400: #7a8aa8;
93
+
--orbyt-neutral-500: #5a6580;
94
+
--orbyt-neutral-600: #3d4659;
95
+
--orbyt-neutral-700: #282f3d;
96
+
--orbyt-neutral-800: #1a1f2a;
97
+
--orbyt-neutral-900: #0e141b;
98
+
--orbyt-neutral-925: #0c1118;
99
+
--orbyt-neutral-950: #0a0e14;
100
+
--orbyt-neutral-975: #05070a;
38
101
--orbyt-neutral-muted: var(--orbyt-neutral-300);
39
102
103
+
/* Amber scale */
104
+
--orbyt-amber-50: #fffaeb;
105
+
--orbyt-amber-100: #fff0c2;
106
+
--orbyt-amber-200: #ffdf85;
107
+
--orbyt-amber-300: #ffcc3d;
108
+
--orbyt-amber-400: #ffb800;
109
+
--orbyt-amber-500: #ffa500;
110
+
--orbyt-amber-600: #d68a00;
111
+
--orbyt-amber-700: #ad7000;
112
+
--orbyt-amber-800: #855600;
113
+
--orbyt-amber-900: #5c3c00;
114
+
--orbyt-amber-950: #332100;
115
+
116
+
/* Blue scale */
117
+
--orbyt-blue-50: #f0f5ff;
118
+
--orbyt-blue-100: #dce8ff;
119
+
--orbyt-blue-200: #b8d4ff;
120
+
--orbyt-blue-300: #85b8ff;
121
+
--orbyt-blue-400: #5299ff;
122
+
--orbyt-blue-500: #2b7fff;
123
+
--orbyt-blue-600: #1766e6;
124
+
--orbyt-blue-700: #1355c0;
125
+
--orbyt-blue-800: #12449a;
126
+
--orbyt-blue-900: #103374;
127
+
--orbyt-blue-950: #0d1f45;
128
+
129
+
/* Orange scale */
130
+
--orbyt-orange-50: #fff5f0;
131
+
--orbyt-orange-100: #ffe5d6;
132
+
--orbyt-orange-200: #ffc9a8;
133
+
--orbyt-orange-300: #ffa670;
134
+
--orbyt-orange-400: #ff7c33;
135
+
--orbyt-orange-500: #ff6b35;
136
+
--orbyt-orange-600: #eb4f0a;
137
+
--orbyt-orange-700: #c44108;
138
+
--orbyt-orange-800: #9c3409;
139
+
--orbyt-orange-900: #752709;
140
+
--orbyt-orange-950: #451607;
141
+
142
+
/* Cyan scale */
143
+
--orbyt-cyan-50: #f0feff;
144
+
--orbyt-cyan-100: #ccfcff;
145
+
--orbyt-cyan-200: #8ff8ff;
146
+
--orbyt-cyan-300: #3df0ff;
147
+
--orbyt-cyan-400: #00e5ff;
148
+
--orbyt-cyan-500: #00b5d6;
149
+
--orbyt-cyan-600: #0096b3;
150
+
--orbyt-cyan-700: #007890;
151
+
--orbyt-cyan-800: #005e70;
152
+
--orbyt-cyan-900: #004452;
153
+
--orbyt-cyan-950: #002830;
154
+
155
+
/* Overlays */
156
+
--orbyt-overlay-black-15: rgba(5, 7, 10, 0.15);
157
+
--orbyt-overlay-black-35: rgba(5, 7, 10, 0.35);
158
+
--orbyt-overlay-black-50: rgba(5, 7, 10, 0.50);
159
+
--orbyt-overlay-black-60: rgba(5, 7, 10, 0.60);
160
+
--orbyt-overlay-black-70: rgba(5, 7, 10, 0.70);
161
+
--orbyt-overlay-black-75: rgba(5, 7, 10, 0.75);
162
+
--orbyt-overlay-black-85: rgba(5, 7, 10, 0.85);
163
+
--orbyt-overlay-black-95: rgba(5, 7, 10, 0.95);
164
+
--orbyt-overlay-white-10: rgba(255, 255, 255, 0.10);
165
+
--orbyt-overlay-white-30: rgba(255, 255, 255, 0.30);
166
+
--orbyt-overlay-white-80: rgba(255, 255, 255, 0.80);
167
+
40
168
/* Marketing / embed surfaces */
41
169
--orbyt-page-bg: var(--orbyt-black);
42
170
--orbyt-page-fg: var(--orbyt-neutral-muted);
43
-
--orbyt-install-surface: #e4eaf5;
171
+
--orbyt-install-surface: var(--orbyt-neutral-100);
44
172
45
173
/* Default profile chrome (SSR normally sets --orbyt-chrome on body) */
46
-
--orbyt-chrome-fallback: #0c1118;
174
+
--orbyt-chrome-fallback: var(--orbyt-neutral-925);
47
175
48
176
/* Scrims / shadows (Orbyt black rgb — matches app Colors.overlay) */
49
177
--orbyt-scrim-rgb: 5, 7, 10;
+20
-47
src/components/LanguageSwitcher.astro
+20
-47
src/components/LanguageSwitcher.astro
···
1
1
---
2
-
import { SUPPORTED_LOCALES, DEFAULT_LOCALE, LOCALE_LABELS } from '../i18n/utils'
2
+
import { SUPPORTED_LOCALES, DEFAULT_LOCALE, LOCALE_LABELS, LOCALE_FLAGS, LOCALE_CODES } from '../i18n/utils'
3
3
4
4
interface Props {
5
5
currentLocale: string
···
9
9
const { currentLocale, currentPath = '/' } = Astro.props
10
10
const allLocales = [DEFAULT_LOCALE, ...SUPPORTED_LOCALES]
11
11
12
-
const currentLabel = LOCALE_LABELS[currentLocale] ?? currentLocale
13
12
---
14
13
15
-
<div class="lang-switcher">
16
-
<label for="lang-select" class="lang-label-sr">Language</label>
17
-
<span class="lang-icon" aria-hidden="true">
18
-
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" style="display:block;flex-shrink:0">
19
-
<path d="M11.08 2.045c-1.874.165-3.723.904-5.28 2.109-.437.339-1.307 1.209-1.646 1.646-1.8 2.326-2.505 5.195-1.976 8.046.29 1.566.959 3.04 1.976 4.354.339.437 1.209 1.307 1.646 1.646 2.441 1.889 5.453 2.566 8.44 1.895 2.487-.559 4.752-2.144 6.145-4.301.806-1.247 1.283-2.527 1.521-4.08.098-.641.098-2.079 0-2.72-.285-1.858-.936-3.388-2.06-4.84-.339-.437-1.209-1.307-1.646-1.646-2.067-1.599-4.554-2.336-7.12-2.109m1.345 2.068c.599.31 1.046 1.356 1.294 3.027.101.683.196 1.67.164 1.707-.147.171-3.619.171-3.766 0-.032-.037.063-1.024.164-1.707.274-1.845.761-2.87 1.479-3.105.154-.051.493-.011.665.078M8.8 4.714c0 .018-.037.14-.082.27-.227.656-.554 2.514-.558 3.176-.002.252-.024.257-.483.097-.761-.264-2.117-.892-2.117-.98 0-.071.496-.641.886-1.018A7.26 7.26 0 0 1 8.3 4.912c.454-.237.5-.256.5-.198m6.811.151a7.509 7.509 0 0 1 1.943 1.394c.385.372.886.947.886 1.016 0 .042-.866.486-1.32.677-.209.089-.568.226-.797.305-.459.16-.481.155-.482-.099-.001-.2-.15-1.389-.226-1.798a11.97 11.97 0 0 0-.333-1.376c-.085-.245-.097-.304-.061-.304a5.4 5.4 0 0 1 .39.185M4.662 9.077c.062.06 1.21.623 1.598.784.198.082.674.253 1.057.38l.697.232-.005 1.273c-.003.701.007 1.604.023 2.007.015.404.023.739.017.745-.041.041-1.301-.368-2.049-.664-.586-.233-1.852-.852-1.928-.943-.085-.103-.07-1.597.022-2.145.107-.639.42-1.706.501-1.706.016 0 .046.017.067.037m14.851.173a8.02 8.02 0 0 1 .478 3.021c-.019.553-.024.584-.115.654-.162.124-1.348.699-1.876.909-.746.296-2.008.705-2.049.664-.006-.006.002-.341.017-.745.016-.403.026-1.306.023-2.007l-.005-1.273.697-.232a20.45 20.45 0 0 0 1.057-.38c.386-.159 1.535-.723 1.598-.784.068-.066.095-.04.175.173M11 10.96c.83.063 1.855.039 2.776-.065l.236-.027-.026 1.816c-.028 1.978-.041 2.184-.141 2.213a10.34 10.34 0 0 1-.725.067c-.899.065-2.926.003-3.021-.092-.045-.045-.096-1.492-.097-2.767L10 10.871l.25.026c.138.014.475.042.75.063m-5.349 4.882c.623.238 1.355.465 2.055.637l.526.129.027.226c.085.695.279 1.624.447 2.139.056.171.093.321.082.332-.061.061-1.165-.58-1.688-.979a10.805 10.805 0 0 1-1.311-1.286c-.373-.461-.949-1.372-.949-1.499 0-.012.067.007.15.042.082.036.38.152.661.259m13.396-.056c-.319.629-.873 1.356-1.493 1.955-.459.444-.728.66-1.234.989-.372.241-1.076.607-1.108.575-.011-.011.026-.161.082-.332.167-.507.353-1.409.447-2.158l.025-.206.607-.15a20.184 20.184 0 0 0 2.327-.751c.242-.098.446-.173.453-.167.007.006-.041.116-.106.245m-7.507 1.199c.486.014 1.117.006 1.497-.02.361-.024.661-.04.666-.035.019.02-.105.663-.205 1.063-.253 1.01-.619 1.654-1.078 1.899-.116.062-.231.085-.42.085-.688 0-1.177-.667-1.516-2.069a11.478 11.478 0 0 1-.144-.668 2.58 2.58 0 0 0-.048-.256c-.02-.07-.005-.074.193-.05.118.014.593.037 1.055.051" fill="currentColor" fill-rule="evenodd"/>
20
-
</svg>
21
-
</span>
22
-
<span class="lang-code">{currentLabel}</span>
14
+
<div class="lang-switcher" role="group" aria-label="Language">
15
+
<span class="lang-flag" aria-hidden="true">{LOCALE_FLAGS[currentLocale]}</span>
16
+
<span class="lang-code">{LOCALE_CODES[currentLocale]}</span>
23
17
<select
24
18
id="lang-select"
25
19
class="lang-select"
···
54
48
</script>
55
49
56
50
<style>
57
-
.lang-label-sr {
58
-
position: absolute;
59
-
width: 1px;
60
-
height: 1px;
61
-
padding: 0;
62
-
margin: -1px;
63
-
overflow: hidden;
64
-
clip: rect(0, 0, 0, 0);
65
-
white-space: nowrap;
66
-
border: 0;
67
-
}
68
-
69
51
.lang-switcher {
70
52
position: relative;
71
53
display: inline-flex;
72
54
align-items: center;
73
-
gap: 7px;
55
+
gap: 6px;
74
56
cursor: pointer;
75
-
color: var(--orbyt-neutral-300);
76
-
transition: color 0.15s ease;
77
-
text-decoration: none;
78
57
line-height: 1;
79
58
}
80
59
81
-
.lang-switcher:hover {
82
-
color: var(--orbyt-white);
83
-
}
84
-
85
-
.lang-icon {
86
-
display: flex;
87
-
align-items: center;
88
-
justify-content: center;
89
-
flex-shrink: 0;
90
-
width: 15px;
91
-
height: 15px;
60
+
.lang-flag {
61
+
display: block;
62
+
font-size: 18px;
63
+
line-height: 1;
92
64
}
93
65
94
66
.lang-code {
95
-
font-size: 13px;
96
-
font-weight: bold;
97
-
letter-spacing: 0.04em;
98
-
line-height: 1;
67
+
font-size: 11px;
68
+
font-weight: 500;
69
+
letter-spacing: 0.08em;
70
+
text-transform: uppercase;
71
+
color: var(--orbyt-neutral-500);
99
72
}
100
73
101
74
.lang-select {
···
106
79
opacity: 0;
107
80
cursor: pointer;
108
81
font-size: 16px;
82
+
appearance: none;
83
+
-webkit-appearance: none;
84
+
border: none;
85
+
background: none;
86
+
padding: 0;
87
+
margin: 0;
109
88
}
110
89
111
90
.lang-select option {
112
91
background: #111;
113
92
color: #f3f5fe;
114
-
}
115
-
116
-
@media (max-width: 640px) {
117
-
.lang-code {
118
-
font-size: 12px;
119
-
}
120
93
}
121
94
</style>
+22
src/i18n/utils.ts
+22
src/i18n/utils.ts
···
23
23
'es-419': 'Español (LA)',
24
24
}
25
25
26
+
export const LOCALE_CODES: Record<string, string> = {
27
+
en: 'EN',
28
+
de: 'DE',
29
+
'es-MX': 'ES',
30
+
fr: 'FR',
31
+
ja: 'JA',
32
+
ko: 'KO',
33
+
'pt-BR': 'PT',
34
+
'es-419': 'ES',
35
+
}
36
+
37
+
export const LOCALE_FLAGS: Record<string, string> = {
38
+
en: '🇺🇸',
39
+
de: '🇩🇪',
40
+
'es-MX': '🇲🇽',
41
+
fr: '🇫🇷',
42
+
ja: '🇯🇵',
43
+
ko: '🇰🇷',
44
+
'pt-BR': '🇧🇷',
45
+
'es-419': '🇦🇷',
46
+
}
47
+
26
48
const FALLBACKS: Partial<Record<string, string>> = {
27
49
'es-419': 'es-MX',
28
50
}
+4
-3
src/pages/app.astro
+4
-3
src/pages/app.astro
···
157
157
background: #551DEF;
158
158
border: 2px solid #000000;
159
159
border-radius: 30px;
160
-
height: 60px;
160
+
min-height: 60px;
161
+
padding: 0.75rem 1.5rem;
161
162
font-weight: bold;
162
163
font-size: 20px;
163
-
line-height: 28px;
164
+
line-height: 1.2;
164
165
display: flex;
165
166
align-items: center;
166
167
justify-content: center;
···
210
211
height: 180px;
211
212
}
212
213
.download-button {
213
-
height: 50px;
214
+
min-height: 50px;
214
215
font-size: 18px;
215
216
}
216
217
}
+4
-3
src/pages/index.astro
+4
-3
src/pages/index.astro
···
122
122
background: #551DEF;
123
123
border: 2px solid #000000;
124
124
border-radius: 30px;
125
-
height: 60px;
125
+
min-height: 60px;
126
+
padding: 0.75rem 1.5rem;
126
127
font-weight: bold;
127
128
font-size: 23px;
128
-
line-height: 28px;
129
+
line-height: 1.2;
129
130
display: flex;
130
131
align-items: center;
131
132
justify-content: center;
···
236
237
}
237
238
238
239
.download-button {
239
-
height: 50px;
240
+
min-height: 50px;
240
241
font-size: 20px;
241
242
margin-bottom: 15px;
242
243
}