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
+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>