source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
feat: improve layout and responsiveness of hero section and download button styles
+45
-38
+19
public/css/site-document.css
+19
public/css/site-document.css
···
49
49
display: flex;
50
50
flex-direction: column;
51
51
justify-content: center;
52
+
align-items: center;
53
+
}
54
+
55
+
/* On taller viewports (desktop/tablet landscape) shift content up from dead-center */
56
+
@media (min-height: 600px) {
57
+
.site-doc--landing > .main-content {
58
+
justify-content: flex-start;
59
+
padding-top: clamp(4rem, 12vh, 8rem);
60
+
padding-bottom: 2rem;
61
+
}
62
+
}
63
+
64
+
/* On short viewports (phone landscape, small phones) keep centering */
65
+
@media (max-height: 599px) {
66
+
.site-doc--landing > .main-content {
67
+
justify-content: center;
68
+
padding-top: 1rem;
69
+
padding-bottom: 1rem;
70
+
}
52
71
}
53
72
54
73
.site-doc__masthead {
+26
-12
src/pages/index.astro
+26
-12
src/pages/index.astro
···
103
103
--fg-color: var(--orbyt-white);
104
104
}
105
105
106
+
/* Hero column — constrains content to a readable width on all screen sizes */
107
+
.hero-column {
108
+
width: 100%;
109
+
max-width: 420px;
110
+
}
111
+
106
112
.download-button-wrap {
107
113
position: relative;
108
-
max-width: 500px;
109
-
margin: 0 auto clamp(8px, 1.5vw, 12px) auto;
114
+
margin: 0 0 10px 0;
110
115
overflow: visible;
111
116
}
112
117
···
122
127
background: #551DEF;
123
128
border: 2px solid #000000;
124
129
border-radius: 30px;
125
-
min-height: clamp(50px, 4vw + 37px, 60px);
130
+
min-height: 56px;
126
131
padding: 0.75rem 1.5rem;
127
132
font-weight: bold;
128
-
font-size: clamp(19px, 0.8vw + 17px, 23px);
133
+
font-size: 19px;
129
134
line-height: 1.2;
130
135
display: flex;
131
136
align-items: center;
···
133
138
text-align: center;
134
139
text-decoration: none;
135
140
color: #E0EBFF;
136
-
max-width: 500px;
137
-
margin: 0 auto clamp(8px, 1.5vw, 12px) auto;
141
+
width: 100%;
142
+
margin: 0 0 10px 0;
138
143
}
139
144
140
145
.home-hero {
···
144
149
145
150
.home-actions {
146
151
text-align: center;
147
-
margin-top: clamp(28px, 2.5vw + 18px, 40px);
152
+
margin-top: 32px;
148
153
}
149
154
150
155
.logo {
···
152
157
}
153
158
154
159
.logo-icon {
155
-
width: clamp(108px, 12vw + 60px, 160px);
160
+
width: 110px;
156
161
height: auto;
157
162
display: block;
158
163
margin: 0 auto;
···
175
180
.logo-text {
176
181
font-family: 'Figtree', sans-serif;
177
182
font-weight: 900;
178
-
font-size: clamp(34px, 3vw + 22px, 48px);
183
+
font-size: 42px;
179
184
color: var(--fg-color);
180
185
text-align: center;
181
186
text-box-trim: trim-start;
···
185
190
}
186
191
187
192
.home-motto {
188
-
margin-top: clamp(6px, 1vw, 10px);
193
+
margin-top: 8px;
189
194
margin-bottom: 0;
190
195
text-align: center;
191
196
}
···
193
198
.motto-text {
194
199
font-family: 'Figtree', sans-serif;
195
200
font-weight: 500;
196
-
font-size: clamp(20px, 1.5vw + 15px, 28px);
201
+
font-size: 20px;
197
202
color: #01f5b3;
198
203
text-align: center;
199
204
display: block;
200
-
margin: clamp(12px, 1.5vw, 20px) auto;
205
+
margin: 16px auto 0;
201
206
letter-spacing: -0.02em;
202
207
}
208
+
209
+
@media (max-width: 360px) {
210
+
.logo-icon { width: 88px; }
211
+
.logo-text { font-size: 34px; }
212
+
.motto-text { font-size: 17px; }
213
+
.download-button { font-size: 17px; min-height: 50px; }
214
+
}
203
215
</style>
204
216
</head>
205
217
···
207
219
<SkipToContent />
208
220
<div class="site-doc site-doc--landing">
209
221
<main id="main-content" class="main-content">
222
+
<div class="hero-column">
210
223
<div class="home-hero">
211
224
<div class="logo">
212
225
<svg class="logo-icon" xmlns="http://www.w3.org/2000/svg" viewBox="65 65 894 894">
···
237
250
<a href="/ios" class="download-button">{t('index.button.ios')}</a>
238
251
</div>
239
252
<a href="/android" class="download-button">{t('index.button.android_waitlist')}</a>
253
+
</div>
240
254
</div>
241
255
</main>
242
256
-26
src/styles/altstore-pal-peek.css
-26
src/styles/altstore-pal-peek.css
···
343
343
}
344
344
}
345
345
346
-
@media (max-width: 500px) {
347
-
.download-button-wrap--pal .altstore-pal-peek {
348
-
width: 40px;
349
-
height: 40px;
350
-
right: 4px;
351
-
}
352
-
}
353
346
354
347
/* ---------------------------------------------------------------------------
355
348
Touch (no hover) — celebrate AltStore the same way desktop does, but
···
426
419
}
427
420
}
428
421
429
-
@media (hover: none) and (pointer: coarse) and (max-width: 500px) {
430
-
.download-button-wrap--pal {
431
-
padding-top: 14px;
432
-
}
433
-
434
-
.download-button-wrap--pal .altstore-pal-peek {
435
-
width: 46px;
436
-
height: 46px;
437
-
right: 6px;
438
-
}
439
-
440
-
.download-button-wrap--pal .altstore-pal-peek__tip-label {
441
-
font-size: 1.1rem;
442
-
}
443
-
444
-
.download-button-wrap--pal .altstore-pal-peek__tip-arrow {
445
-
width: 23px;
446
-
}
447
-
}
448
422
449
423
@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
450
424
.download-button-wrap--pal .altstore-pal-peek,