jack.orbyt.video / orbyt-site
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: enhance responsive design in site footer and index page with clamp-based styling adjustments

jack.orbyt.video c45c98ca 8fbc271e

+29 -93
+18 -39
public/css/site-footer.css
··· 2 2 3 3 .site-footer__separator { 4 4 height: 7px; 5 - margin-bottom: 20px; 5 + margin-bottom: clamp(0.75rem, 2vw, 1.25rem); 6 6 position: relative; 7 7 overflow: hidden; 8 8 display: flex; ··· 19 19 .site-footer { 20 20 display: flex; 21 21 flex-wrap: wrap; 22 - justify-content: flex-start; 23 - gap: 12px 32px; 22 + align-items: center; 23 + row-gap: clamp(0.35rem, 1.5vw, 0.65rem); 24 + column-gap: clamp(1rem, 3.5vw, 2rem); 24 25 margin-top: auto; 25 - padding-top: 2.5rem; 26 + padding-top: clamp(1.75rem, 5vw, 2.5rem); 26 27 margin-bottom: var(--site-footer-margin-bottom); 27 28 } 28 29 30 + @supports (padding-bottom: env(safe-area-inset-bottom)) { 31 + @media (max-width: 480px) { 32 + .site-footer { 33 + margin-bottom: max(1.75rem, env(safe-area-inset-bottom)); 34 + } 35 + } 36 + } 37 + 29 38 .site-footer nav { 30 39 display: contents; 31 40 } ··· 33 42 .site-footer a { 34 43 font-style: normal; 35 44 font-weight: bold; 36 - font-size: 13px; 45 + font-size: clamp(11px, 1vw + 0.4rem, 13px); 37 46 text-align: left; 38 - letter-spacing: 0.12em; 47 + letter-spacing: clamp(0.07em, 0.3vw, 0.12em); 39 48 text-transform: uppercase; 40 49 text-decoration: none; 41 50 color: var(--orbyt-neutral-300); 42 51 overflow-wrap: break-word; 52 + padding: 0.3rem 0; 53 + white-space: nowrap; 43 54 } 44 55 45 56 .site-footer a:hover { ··· 53 64 .site-footer__lang { 54 65 display: flex; 55 66 align-items: center; 56 - margin-left: auto; 57 - } 58 - 59 - @media (max-width: 640px) { 60 - .site-footer__lang { 61 - flex-basis: 100%; 62 - margin-left: 0; 63 - margin-top: 0.75rem; 64 - } 65 - } 66 - 67 - @media (max-width: 640px) { 68 - .site-footer { 69 - gap: 0; 70 - padding-top: 2rem; 71 - margin-bottom: max(1.75rem, env(safe-area-inset-bottom)); 72 - } 73 - 74 - .site-footer__separator { 75 - margin-bottom: 1rem; 76 - } 77 - 78 - .site-footer a { 79 - flex: 1 1 45%; 80 - min-width: min-content; 81 - max-width: 100%; 82 - display: inline-flex; 83 - align-items: center; 84 - padding: 0.5rem 0; 85 - font-size: 11px; 86 - letter-spacing: 0.08em; 87 - line-height: 1.35; 88 - } 67 + padding: 0.3rem 0 0.3rem 2px; 89 68 }
+11 -54
src/pages/index.astro
··· 106 106 .download-button-wrap { 107 107 position: relative; 108 108 max-width: 500px; 109 - margin: 0 auto 10px auto; 109 + margin: 0 auto clamp(8px, 1.5vw, 12px) auto; 110 110 overflow: visible; 111 111 } 112 112 ··· 122 122 background: #551DEF; 123 123 border: 2px solid #000000; 124 124 border-radius: 30px; 125 - min-height: 60px; 125 + min-height: clamp(50px, 4vw + 37px, 60px); 126 126 padding: 0.75rem 1.5rem; 127 127 font-weight: bold; 128 - font-size: 23px; 128 + font-size: clamp(19px, 0.8vw + 17px, 23px); 129 129 line-height: 1.2; 130 130 display: flex; 131 131 align-items: center; ··· 134 134 text-decoration: none; 135 135 color: #E0EBFF; 136 136 max-width: 500px; 137 - margin: 0 auto 10px auto; 137 + margin: 0 auto clamp(8px, 1.5vw, 12px) auto; 138 138 } 139 139 140 140 .home-hero { ··· 144 144 145 145 .home-actions { 146 146 text-align: center; 147 - margin-top: 40px; 147 + margin-top: clamp(28px, 2.5vw + 18px, 40px); 148 148 } 149 149 150 150 .logo { ··· 152 152 } 153 153 154 154 .logo-icon { 155 - width: 160px; 155 + width: clamp(108px, 12vw + 60px, 160px); 156 156 height: auto; 157 157 display: block; 158 - margin: 0 auto 0px auto; 158 + margin: 0 auto; 159 159 color: var(--fg-color); 160 160 } 161 161 ··· 175 175 .logo-text { 176 176 font-family: 'Figtree', sans-serif; 177 177 font-weight: 900; 178 - font-size: 48px; 178 + font-size: clamp(34px, 3vw + 22px, 48px); 179 179 color: var(--fg-color); 180 180 text-align: center; 181 181 text-box-trim: trim-start; ··· 185 185 } 186 186 187 187 .home-motto { 188 - margin-top: 10px; 188 + margin-top: clamp(6px, 1vw, 10px); 189 189 margin-bottom: 0; 190 190 text-align: center; 191 191 } ··· 193 193 .motto-text { 194 194 font-family: 'Figtree', sans-serif; 195 195 font-weight: 500; 196 - font-size: 28px; 196 + font-size: clamp(20px, 1.5vw + 15px, 28px); 197 197 color: #01f5b3; 198 198 text-align: center; 199 199 display: block; 200 - margin: 20px auto; 200 + margin: clamp(12px, 1.5vw, 20px) auto; 201 201 letter-spacing: -0.02em; 202 - } 203 - 204 - @media (max-width: 500px) { 205 - .home-hero { 206 - margin-top: 0; 207 - } 208 - 209 - .home-motto { 210 - margin-top: 10px; 211 - margin-bottom: 0; 212 - } 213 - 214 - .motto-text { 215 - font-size: 22px; 216 - } 217 - 218 - .home-actions { 219 - margin-top: 30px; 220 - } 221 - 222 - .logo-icon { 223 - width: 115px; 224 - height: auto; 225 - } 226 - 227 - .logo-text { 228 - font-size: 36px; 229 - } 230 - 231 - .download-button-wrap { 232 - margin-bottom: 15px; 233 - } 234 - 235 - .download-button-wrap .download-button { 236 - margin-bottom: 0; 237 - } 238 - 239 - .download-button { 240 - min-height: 50px; 241 - font-size: 20px; 242 - margin-bottom: 15px; 243 - } 244 - 245 202 } 246 203 </style> 247 204 </head>