source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
feat: refine layout and spacing in index page for improved visual hierarchy and responsiveness
+13
-4
+13
-4
src/pages/index.astro
+13
-4
src/pages/index.astro
···
101
101
.site-doc--landing {
102
102
--bg-color: var(--orbyt-page-bg);
103
103
--fg-color: var(--orbyt-white);
104
+
/* Tight stack: mark / wordmark / slogan */
105
+
--landing-logo-icon-wordmark-gap: clamp(4px, 1.2vw, 10px);
106
+
--landing-wordmark-slogan-gap: clamp(6px, 1.6vw, 14px);
107
+
/* Breathing room before CTAs */
108
+
--landing-hero-actions-gap: clamp(40px, 12vw, 96px);
104
109
}
105
110
106
111
/* Hero column — constrains content to a readable width on all screen sizes */
···
149
154
150
155
.home-actions {
151
156
text-align: center;
152
-
margin-top: 32px;
157
+
margin-top: var(--landing-hero-actions-gap);
153
158
}
154
159
155
160
.logo {
156
161
text-align: center;
162
+
display: flex;
163
+
flex-direction: column;
164
+
align-items: center;
165
+
gap: var(--landing-logo-icon-wordmark-gap);
157
166
}
158
167
159
168
.logo-icon {
160
169
width: 110px;
161
170
height: auto;
162
171
display: block;
163
-
margin: 0 auto;
172
+
margin: 0;
164
173
color: var(--fg-color);
165
174
}
166
175
···
190
199
}
191
200
192
201
.home-motto {
193
-
margin-top: 8px;
202
+
margin-top: var(--landing-wordmark-slogan-gap);
194
203
margin-bottom: 0;
195
204
text-align: center;
196
205
}
···
202
211
color: #01f5b3;
203
212
text-align: center;
204
213
display: block;
205
-
margin: 16px auto 0;
214
+
margin: 0 auto;
206
215
letter-spacing: -0.02em;
207
216
}
208
217