source for getorbyt.com getorbyt.com/
client bsky orbytapp app orbyt bluesky getorbyt orbytvideo atproto video
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: improve layout and responsiveness of hero section and download button styles

+45 -38
+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
··· 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
··· 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,