source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
Refactor logo and styling in contact and index pages
- Update logo image source in contact.astro to use SVG format for better scalability.
- Adjust header margins and paddings for improved layout consistency.
- Modify background color handling in index.astro to utilize CSS variables for better maintainability.
- Increase logo sizes and update color properties to enhance visual appeal and consistency across pages.
+74
-15
+11
public/images/orbyt-logo.svg
+11
public/images/orbyt-logo.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" width="894" height="894" viewBox="65 65 894 894">
2
+
<!-- White border/outline for sticker effect (drawn first, behind everything) -->
3
+
<path fill="none" stroke="#fff" stroke-width="65" stroke-linejoin="round" stroke-linecap="round" d="M349 129.3c-23.9 5.4-36.8 31.5-26.1 53.2 8 16.2 25.2 24.4 42.1 20.1 7.4-1.9 5.3-3.4 18.5 13.9 10.3 13.6 33.6 44.2 36.7 48.4 3.5 4.6 3.5 4.6-1.1 8.9-5.9 5.6-14.1 16.9-19 26-5 9.4-3.4 8.6-22.1 10.2-136.2 11.1-177 34.7-192.6 111.5-16.5 81.2-16.5 193.6.1 276.7 10.5 52.9 39.8 83.7 89.3 93.9 6 1.3 6 1.3 2.5 8.8-18.4 39.4-5.4 73.1 30 78.1 24.5 3.5 32.3-1.8 73.7-50 20.8-24.3 16.8-22.1 37-20.5 50.9 4.1 138.2 4.1 189 0 20.2-1.6 16.2-3.8 37 20.5 41.4 48.2 49.2 53.5 73.7 50 35.4-5 48.4-38.7 30-78.1-3.5-7.5-3.5-7.5 2.5-8.8 49.5-10.2 78.8-41 89.3-93.9 16.6-83.1 16.6-195.5.1-276.7C824 344.7 783.2 321.1 647 310c-18.7-1.6-17.1-.8-22.1-10.2-4.9-9.1-13.1-20.4-19-26-4.6-4.3-4.6-4.3-1.1-8.9 3.1-4.2 26.4-34.8 36.7-48.4 13.2-17.3 11.1-15.8 18.5-13.9 41.5 10.6 64.2-49.2 26.3-69.3-32-17.1-68 17.2-51.7 49.3 3.1 6.1 3.1 6.1-11.8 25.5-8.2 10.7-20 26-26.1 34.1-11.1 14.8-11.1 14.8-14.7 12.6-44.5-26.5-94.5-26.5-139 0-3.6 2.2-3.6 2.2-14.7-12.6-6.1-8.1-17.9-23.4-26.1-34.1-14.9-19.4-14.9-19.4-11.8-25.5 13.8-27.1-11.7-59.8-41.4-53.3m249.3 243.2C752 381.3 773.8 399.3 781.1 523c5.8 98.9-9.4 168.3-41.5 189.8-59.5 39.8-394.7 39.8-454.2 0-32.1-21.5-47.3-90.9-41.5-189.8 7.7-130.5 28.8-144.8 226.1-152.4 19.3-.8 104.3.5 128.3 1.9"/>
4
+
<!-- White screen fill -->
5
+
<rect fill="#fff" x="210" y="340" width="604" height="420" rx="80" ry="80"/>
6
+
<!-- Black TV body on top -->
7
+
<path fill="#000" d="M349 129.3c-23.9 5.4-36.8 31.5-26.1 53.2 8 16.2 25.2 24.4 42.1 20.1 7.4-1.9 5.3-3.4 18.5 13.9 10.3 13.6 33.6 44.2 36.7 48.4 3.5 4.6 3.5 4.6-1.1 8.9-5.9 5.6-14.1 16.9-19 26-5 9.4-3.4 8.6-22.1 10.2-136.2 11.1-177 34.7-192.6 111.5-16.5 81.2-16.5 193.6.1 276.7 10.5 52.9 39.8 83.7 89.3 93.9 6 1.3 6 1.3 2.5 8.8-18.4 39.4-5.4 73.1 30 78.1 24.5 3.5 32.3-1.8 73.7-50 20.8-24.3 16.8-22.1 37-20.5 50.9 4.1 138.2 4.1 189 0 20.2-1.6 16.2-3.8 37 20.5 41.4 48.2 49.2 53.5 73.7 50 35.4-5 48.4-38.7 30-78.1-3.5-7.5-3.5-7.5 2.5-8.8 49.5-10.2 78.8-41 89.3-93.9 16.6-83.1 16.6-195.5.1-276.7C824 344.7 783.2 321.1 647 310c-18.7-1.6-17.1-.8-22.1-10.2-4.9-9.1-13.1-20.4-19-26-4.6-4.3-4.6-4.3-1.1-8.9 3.1-4.2 26.4-34.8 36.7-48.4 13.2-17.3 11.1-15.8 18.5-13.9 41.5 10.6 64.2-49.2 26.3-69.3-32-17.1-68 17.2-51.7 49.3 3.1 6.1 3.1 6.1-11.8 25.5-8.2 10.7-20 26-26.1 34.1-11.1 14.8-11.1 14.8-14.7 12.6-44.5-26.5-94.5-26.5-139 0-3.6 2.2-3.6 2.2-14.7-12.6-6.1-8.1-17.9-23.4-26.1-34.1-14.9-19.4-14.9-19.4-11.8-25.5 13.8-27.1-11.7-59.8-41.4-53.3m249.3 243.2C752 381.3 773.8 399.3 781.1 523c5.8 98.9-9.4 168.3-41.5 189.8-59.5 39.8-394.7 39.8-454.2 0-32.1-21.5-47.3-90.9-41.5-189.8 7.7-130.5 28.8-144.8 226.1-152.4 19.3-.8 104.3.5 128.3 1.9"/>
8
+
<!-- Black eyes on white screen -->
9
+
<rect fill="#000" x="378" y="485" width="70" height="130" rx="35" ry="35"/>
10
+
<rect fill="#000" x="576" y="485" width="70" height="130" rx="35" ry="35"/>
11
+
</svg>
+3
src/pages/@[handle].astro
+3
src/pages/@[handle].astro
···
135
135
font-size: 42px;
136
136
letter-spacing: -0.02em;
137
137
line-height: 1;
138
+
text-box-trim: trim-start;
139
+
text-box-edge: cap alphabetic;
138
140
color: #ccd7e9;
139
141
}
140
142
.install-button {
···
147
149
transition: all 0.2s ease;
148
150
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
149
151
padding: 0 18px;
152
+
margin-top: 0;
150
153
}
151
154
.install-button:hover {
152
155
transform: translateY(-1px);
+18
-1
src/pages/@[handle]/[postId].astro
+18
-1
src/pages/@[handle]/[postId].astro
···
141
141
font-size: 42px;
142
142
letter-spacing: -0.02em;
143
143
line-height: 1;
144
+
text-box-trim: trim-start;
145
+
text-box-edge: cap alphabetic;
144
146
}
145
147
@media screen and (max-width: 699px) {
146
148
.logo-overlay.mobile-overlay .logo-text {
···
212
214
transition: all 0.2s ease !important;
213
215
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
214
216
padding: 0 18px !important;
217
+
margin-top: 0 !important;
215
218
}
216
219
.install-button:hover {
217
220
background-color: #e8eefc !important;
···
227
230
}
228
231
/* Desktop-specific logo text styling */
229
232
@media screen and (min-width: 700px) {
233
+
.desktop-title {
234
+
align-items: center;
235
+
}
236
+
.desktop-title .logo {
237
+
display: flex;
238
+
align-items: center;
239
+
line-height: 1;
240
+
}
241
+
.desktop-title .logo-wordmark {
242
+
display: flex;
243
+
align-items: center;
244
+
line-height: 1;
245
+
}
230
246
.desktop-title .logo-text {
231
247
font-size: 42px;
232
248
color: #f3f5fe;
233
249
margin: 0;
234
250
padding: 0;
251
+
text-box-trim: trim-both;
252
+
text-box-edge: cap alphabetic;
235
253
}
236
254
.desktop-title .install-button {
237
255
display: flex;
238
256
align-items: center;
239
-
height: 42px;
240
257
}
241
258
}
242
259
</style>
+7
-6
src/pages/contact.astro
+7
-6
src/pages/contact.astro
···
57
57
58
58
.header {
59
59
text-align: left;
60
-
margin-bottom: 1.5rem;
61
-
padding-bottom: 2rem;
60
+
margin-bottom: 0.5rem;
61
+
padding-bottom: 0.5rem;
62
62
}
63
63
64
64
.header a {
···
67
67
}
68
68
69
69
.logo-icon {
70
-
width: 65px;
70
+
width: 100px;
71
71
height: auto;
72
72
display: block;
73
-
margin: 0 auto 2px auto;
73
+
margin: 0;
74
74
}
75
75
76
76
.logo-text {
···
79
79
font-size: 32px;
80
80
color: #f3f5fe;
81
81
text-align: center;
82
+
text-box-trim: trim-start;
83
+
text-box-edge: cap alphabetic;
82
84
display: block;
83
85
}
84
86
···
197
199
<div class="container">
198
200
<div class="header">
199
201
<a href="/">
200
-
<img src="/TV-Raw.webp" alt="orbyt logo" class="logo-icon"/>
201
-
<div class="logo-text">orbyt</div>
202
+
<img src="/images/orbyt-logo.svg" alt="orbyt logo" class="logo-icon"/>
202
203
</a>
203
204
</div>
204
205
+2
src/pages/discord.astro
+2
src/pages/discord.astro
+33
-8
src/pages/index.astro
+33
-8
src/pages/index.astro
···
60
60
}
61
61
62
62
body {
63
-
background: #000;
63
+
--bg-color: #000;
64
+
--fg-color: #f3f5fe;
65
+
background: var(--bg-color);
64
66
font-family: 'Figtree', sans-serif;
65
67
position: relative;
66
68
display: flex;
···
118
120
}
119
121
120
122
.logo-icon {
121
-
width: 140px;
123
+
width: 160px;
122
124
height: auto;
123
125
display: block;
124
126
margin: 0 auto 0px auto;
127
+
color: var(--fg-color);
128
+
}
129
+
130
+
.logo-icon .logo-bg {
131
+
fill: var(--bg-color);
132
+
}
133
+
134
+
.logo-icon .logo-fg {
135
+
fill: var(--fg-color);
136
+
stroke: var(--fg-color);
137
+
}
138
+
139
+
.logo-icon .logo-outline {
140
+
fill: none;
125
141
}
126
142
127
143
.logo-text {
128
144
font-family: 'Figtree', sans-serif;
129
145
font-weight: 900;
130
146
font-size: 48px;
131
-
color: #f3f5fe;
147
+
color: var(--fg-color);
132
148
text-align: center;
149
+
text-box-trim: trim-start;
150
+
text-box-edge: cap alphabetic;
133
151
display: block;
134
152
margin: 0 auto;
135
153
}
···
218
236
}
219
237
220
238
.logo-icon {
221
-
width: 100px;
239
+
width: 115px;
222
240
height: auto;
223
241
}
224
242
···
268
286
<div class="main-content">
269
287
<div class="row first">
270
288
<div class="logo twelve columns">
271
-
<picture>
272
-
<source srcset="/TV-Raw.webp" type="image/webp">
273
-
<img src="/TV-Raw.png" alt="orbyt logo" class="logo-icon"/>
274
-
</picture>
289
+
<svg class="logo-icon" xmlns="http://www.w3.org/2000/svg" viewBox="65 65 894 894">
290
+
<!-- White border/outline for sticker effect (drawn first, behind everything) -->
291
+
<path class="logo-fg logo-outline" fill="none" stroke-width="65" stroke-linejoin="round" stroke-linecap="round" d="M349 129.3c-23.9 5.4-36.8 31.5-26.1 53.2 8 16.2 25.2 24.4 42.1 20.1 7.4-1.9 5.3-3.4 18.5 13.9 10.3 13.6 33.6 44.2 36.7 48.4 3.5 4.6 3.5 4.6-1.1 8.9-5.9 5.6-14.1 16.9-19 26-5 9.4-3.4 8.6-22.1 10.2-136.2 11.1-177 34.7-192.6 111.5-16.5 81.2-16.5 193.6.1 276.7 10.5 52.9 39.8 83.7 89.3 93.9 6 1.3 6 1.3 2.5 8.8-18.4 39.4-5.4 73.1 30 78.1 24.5 3.5 32.3-1.8 73.7-50 20.8-24.3 16.8-22.1 37-20.5 50.9 4.1 138.2 4.1 189 0 20.2-1.6 16.2-3.8 37 20.5 41.4 48.2 49.2 53.5 73.7 50 35.4-5 48.4-38.7 30-78.1-3.5-7.5-3.5-7.5 2.5-8.8 49.5-10.2 78.8-41 89.3-93.9 16.6-83.1 16.6-195.5.1-276.7C824 344.7 783.2 321.1 647 310c-18.7-1.6-17.1-.8-22.1-10.2-4.9-9.1-13.1-20.4-19-26-4.6-4.3-4.6-4.3-1.1-8.9 3.1-4.2 26.4-34.8 36.7-48.4 13.2-17.3 11.1-15.8 18.5-13.9 41.5 10.6 64.2-49.2 26.3-69.3-32-17.1-68 17.2-51.7 49.3 3.1 6.1 3.1 6.1-11.8 25.5-8.2 10.7-20 26-26.1 34.1-11.1 14.8-11.1 14.8-14.7 12.6-44.5-26.5-94.5-26.5-139 0-3.6 2.2-3.6 2.2-14.7-12.6-6.1-8.1-17.9-23.4-26.1-34.1-14.9-19.4-14.9-19.4-11.8-25.5 13.8-27.1-11.7-59.8-41.4-53.3m249.3 243.2C752 381.3 773.8 399.3 781.1 523c5.8 98.9-9.4 168.3-41.5 189.8-59.5 39.8-394.7 39.8-454.2 0-32.1-21.5-47.3-90.9-41.5-189.8 7.7-130.5 28.8-144.8 226.1-152.4 19.3-.8 104.3.5 128.3 1.9"/>
292
+
<!-- White screen fill -->
293
+
<rect class="logo-fg" x="210" y="340" width="604" height="420" rx="80" ry="80"/>
294
+
<!-- Black TV body on top -->
295
+
<path class="logo-bg" d="M349 129.3c-23.9 5.4-36.8 31.5-26.1 53.2 8 16.2 25.2 24.4 42.1 20.1 7.4-1.9 5.3-3.4 18.5 13.9 10.3 13.6 33.6 44.2 36.7 48.4 3.5 4.6 3.5 4.6-1.1 8.9-5.9 5.6-14.1 16.9-19 26-5 9.4-3.4 8.6-22.1 10.2-136.2 11.1-177 34.7-192.6 111.5-16.5 81.2-16.5 193.6.1 276.7 10.5 52.9 39.8 83.7 89.3 93.9 6 1.3 6 1.3 2.5 8.8-18.4 39.4-5.4 73.1 30 78.1 24.5 3.5 32.3-1.8 73.7-50 20.8-24.3 16.8-22.1 37-20.5 50.9 4.1 138.2 4.1 189 0 20.2-1.6 16.2-3.8 37 20.5 41.4 48.2 49.2 53.5 73.7 50 35.4-5 48.4-38.7 30-78.1-3.5-7.5-3.5-7.5 2.5-8.8 49.5-10.2 78.8-41 89.3-93.9 16.6-83.1 16.6-195.5.1-276.7C824 344.7 783.2 321.1 647 310c-18.7-1.6-17.1-.8-22.1-10.2-4.9-9.1-13.1-20.4-19-26-4.6-4.3-4.6-4.3-1.1-8.9 3.1-4.2 26.4-34.8 36.7-48.4 13.2-17.3 11.1-15.8 18.5-13.9 41.5 10.6 64.2-49.2 26.3-69.3-32-17.1-68 17.2-51.7 49.3 3.1 6.1 3.1 6.1-11.8 25.5-8.2 10.7-20 26-26.1 34.1-11.1 14.8-11.1 14.8-14.7 12.6-44.5-26.5-94.5-26.5-139 0-3.6 2.2-3.6 2.2-14.7-12.6-6.1-8.1-17.9-23.4-26.1-34.1-14.9-19.4-14.9-19.4-11.8-25.5 13.8-27.1-11.7-59.8-41.4-53.3m249.3 243.2C752 381.3 773.8 399.3 781.1 523c5.8 98.9-9.4 168.3-41.5 189.8-59.5 39.8-394.7 39.8-454.2 0-32.1-21.5-47.3-90.9-41.5-189.8 7.7-130.5 28.8-144.8 226.1-152.4 19.3-.8 104.3.5 128.3 1.9"/>
296
+
<!-- Black eyes on white screen -->
297
+
<rect class="logo-bg" x="378" y="485" width="70" height="130" rx="35" ry="35"/>
298
+
<rect class="logo-bg" x="576" y="485" width="70" height="130" rx="35" ry="35"/>
299
+
</svg>
275
300
<div class="logo-text">orbyt</div>
276
301
</div>
277
302
</div>