jack.orbyt.video
source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
Refactor app.astro to enhance mobile responsiveness and simplify layout
- Removed the footer and separator elements to streamline the design.
- Introduced mobile-specific styles for subtitles and adjusted visibility based on device type.
- Updated the layout to improve user experience on touch devices by hiding the QR section on mobile.
+21
-52
src/pages/app.astro
+21
-52
src/pages/app.astro
···
134
134
.download-button:hover {
135
135
opacity: 0.9;
136
136
}
137
-
.separator {
138
-
height: 7px;
139
-
margin-bottom: 20px;
140
-
position: relative;
141
-
overflow: hidden;
142
-
display: flex;
143
-
align-items: center;
144
-
justify-content: flex-start;
145
-
width: 100%;
137
+
138
+
/* Mobile-specific text */
139
+
.subtitle-mobile {
140
+
display: none;
146
141
}
147
-
.separator svg {
148
-
width: 100%;
149
-
height: 7px;
150
-
}
151
-
.footer {
152
-
display: flex;
153
-
flex-wrap: wrap;
154
-
justify-content: flex-start;
155
-
gap: 12px 32px;
156
-
margin-top: auto;
157
-
margin-bottom: 40px;
158
-
}
159
-
.footer a {
160
-
font-style: normal;
161
-
font-weight: bold;
162
-
font-size: 13px;
163
-
text-align: left;
164
-
letter-spacing: 0.2em;
165
-
text-transform: uppercase;
166
-
text-decoration: none;
167
-
color: #ccc;
168
-
}
169
-
.footer a:hover {
170
-
color: #f3f5fe;
142
+
143
+
/* Touch devices (mobile/tablet) */
144
+
@media (hover: none) and (pointer: coarse) {
145
+
.qr-section {
146
+
display: none;
147
+
}
148
+
.subtitle-desktop {
149
+
display: none;
150
+
}
151
+
.subtitle-mobile {
152
+
display: block;
153
+
}
154
+
.buttons {
155
+
margin-top: 40px;
156
+
}
171
157
}
172
158
173
159
@media (max-width: 500px) {
···
208
194
</svg>
209
195
</a>
210
196
211
-
<div class="subtitle">scan to get the app</div>
197
+
<div class="subtitle subtitle-desktop">scan to get the app</div>
198
+
<div class="subtitle subtitle-mobile">get the app</div>
212
199
213
200
<div class="qr-section">
214
201
<div class="qr-container">
···
222
209
<a href="/beta" class="download-button">Android Waitlist</a>
223
210
</div>
224
211
</div>
225
-
226
-
<footer class="footer">
227
-
<div class="separator">
228
-
<svg height="7" fill="none" xmlns="http://www.w3.org/2000/svg">
229
-
<defs>
230
-
<pattern id="squigglePattern" width="374" height="7" patternUnits="userSpaceOnUse">
231
-
<path d="M0 1C5.50021 1 5.50021 5.84456 11.0004 5.84456C16.5006 5.84456 16.5006 1 22.0008 1C27.501 1 27.501 5.84456 33.0013 5.84456C38.5015 5.84456 38.5015 1 44.0017 1C49.5019 1 49.5019 5.84456 55.0021 5.84456C60.5023 5.84456 60.5023 1 66.0025 1C71.5027 1 71.5027 5.84456 77.0029 5.84456C82.5031 5.84456 82.5031 1 87.9998 1C93.5 1 93.5 5.84456 98.9967 5.84456C104.497 5.84456 104.497 1 109.994 1C115.494 1 115.494 5.84456 120.99 5.84456C126.491 5.84456 126.491 1 131.991 1C137.491 1 137.491 5.84456 142.991 5.84456C148.491 5.84456 148.491 1 153.992 1C159.492 1 159.492 5.84456 164.988 5.84456C170.489 5.84456 170.489 1 175.985 1C181.486 1 181.486 5.84456 186.986 5.84456C192.486 5.84456 192.486 1 197.986 1C203.486 1 203.486 5.84456 208.987 5.84456C214.487 5.84456 214.487 1 219.987 1C225.487 1 225.487 5.84456 230.987 5.84456C236.488 5.84456 236.488 1 241.988 1C247.488 1 247.488 5.84456 252.988 5.84456C258.488 5.84456 258.488 1 263.989 1C269.489 1 269.489 5.84456 274.989 5.84456C280.489 5.84456 280.489 1 285.99 1C291.49 1 291.49 5.84456 296.99 5.84456C302.49 5.84456 302.49 1 307.99 1C313.491 1 313.491 5.84456 318.991 5.84456C324.491 5.84456 324.491 1 329.991 1C335.491 1 335.491 5.84456 340.992 5.84456C346.492 5.84456 346.492 1 351.992 1C357.492 1 357.492 5.84456 362.996 5.84456C368.5 5.84456 368.496 1 374 1" stroke="#551DEF" stroke-width="2" stroke-miterlimit="10"/>
232
-
</pattern>
233
-
</defs>
234
-
<rect fill="url(#squigglePattern)" width="100%" height="100%"/>
235
-
</svg>
236
-
</div>
237
-
<a href="https://bsky.app/profile/getorbyt.com">bluesky</a>
238
-
<a href="https://discord.gg/8gNQPFygnF">discord</a>
239
-
<a href="/terms">terms</a>
240
-
<a href="/privacy">privacy</a>
241
-
<a href="/contact">contact</a>
242
-
</footer>
243
212
</div>
244
213
</body>
245
214
</html>