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: add Skip to Content component for improved accessibility and update styles for various elements

+64 -15
+4 -3
public/css/profile.css
··· 263 263 } 264 264 #load-more { 265 265 background: var(--orbyt-profile-text); 266 + border: none; 266 267 color: var(--orbyt-profile-bg); 267 268 border-radius: 30px; 268 269 cursor: pointer; 270 + font-family: inherit; 271 + font-size: inherit; 269 272 padding: 5px 20px; 270 273 text-decoration: none; 271 274 } 272 275 #load-more:hover, 273 - #load-more:active, 274 - #load-more:visited { 276 + #load-more:active { 275 277 color: var(--orbyt-profile-bg); 276 - text-decoration: none; 277 278 } 278 279 279 280 .loading {
+4
public/css/site-footer.css
··· 45 45 color: var(--orbyt-white); 46 46 } 47 47 48 + .site-footer a:focus-visible { 49 + color: var(--orbyt-white); 50 + } 51 + 48 52 .site-footer__lang { 49 53 flex-basis: 100%; 50 54 width: 100%;
+6
public/css/tokens.css
··· 9 9 box-sizing: inherit; 10 10 } 11 11 12 + :focus-visible { 13 + outline: 2px solid var(--orbyt-teal); 14 + outline-offset: 3px; 15 + border-radius: 3px; 16 + } 17 + 12 18 html.orbyt-doc-dark { 13 19 color-scheme: dark; 14 20 }
+27
src/components/SkipToContent.astro
··· 1 + --- 2 + interface Props { 3 + targetId?: string 4 + } 5 + const { targetId = 'main-content' } = Astro.props 6 + --- 7 + <a href={`#${targetId}`} class="skip-to-content">Skip to main content</a> 8 + 9 + <style> 10 + .skip-to-content { 11 + position: absolute; 12 + top: -100%; 13 + left: 1rem; 14 + z-index: 9999; 15 + padding: 0.5rem 1rem; 16 + background: var(--orbyt-teal); 17 + color: var(--orbyt-black); 18 + font-weight: 700; 19 + font-size: 0.875rem; 20 + border-radius: 0 0 4px 4px; 21 + text-decoration: none; 22 + transition: top 0.1s; 23 + } 24 + .skip-to-content:focus { 25 + top: 0; 26 + } 27 + </style>
+9 -4
src/pages/404.astro
··· 3 3 4 4 import DocumentColorScheme from '../components/DocumentColorScheme.astro'; 5 5 import SiteFooter from '../components/SiteFooter.astro'; 6 + import SkipToContent from '../components/SkipToContent.astro'; 6 7 import { SITE_DOCUMENT } from '../utils/site-document-theme'; 7 8 import { useTranslations, localeToHtmlLang } from '../i18n/utils'; 8 9 ··· 139 140 .nav-button { 140 141 display: inline-flex; 141 142 background: #f3f5fe; 143 + border: none; 142 144 color: #000000; 145 + cursor: pointer; 146 + font-family: inherit; 147 + font-size: 0.875rem; 148 + font-weight: 700; 143 149 text-decoration: none; 144 150 padding: 0.625rem 1.25rem; 145 151 border-radius: 999px; 146 - font-size: 0.875rem; 147 - font-weight: 700; 148 152 transition: transform 0.2s ease, box-shadow 0.2s ease; 149 153 } 150 154 ··· 173 177 </style> 174 178 </head> 175 179 <body> 180 + <SkipToContent /> 176 181 <div class="container"> 177 - <main class="main-content"> 182 + <main id="main-content" class="main-content"> 178 183 <div class="tv-static" aria-hidden="true"></div> 179 184 <h1 class="error-title">{t('404.heading')}</h1> 180 185 <p class="error-message">{t('404.message')}</p> 181 186 <div class="error-actions"> 182 - <a href="#" onclick="window.history.back(); return false;" class="nav-button">{t('404.action.back')}</a> 187 + <button type="button" onclick="window.history.back()" class="nav-button">{t('404.action.back')}</button> 183 188 <a href="/" class="nav-button nav-button--secondary">{t('404.action.home')}</a> 184 189 </div> 185 190 </main>
+1 -1
src/pages/@[handle].astro
··· 290 290 )} 291 291 {nextCursor && ( 292 292 <footer> 293 - <a id="load-more" data-load-more-text={t('profile.load_more')} data-loading-text={t('profile.loading')}>{t('profile.load_more')}</a> 293 + <button id="load-more" type="button" data-load-more-text={t('profile.load_more')} data-loading-text={t('profile.loading')}>{t('profile.load_more')}</button> 294 294 </footer> 295 295 )} 296 296 </div>
+1 -1
src/pages/@[handle]/[postId].astro
··· 404 404 <div class="video-ambient-backdrop" aria-hidden="true"></div> 405 405 <video id="vinit" muted playsinline loop autoplay preload="auto" oncontextmenu="return false;"> 406 406 </video> 407 - <img id="video-thumbnail" class="video-thumbnail" src={thumbnail} alt="" style={`view-transition-name: video-${postId}`} /> 407 + <img id="video-thumbnail" class="video-thumbnail" src={thumbnail} alt="" aria-hidden="true" style={`view-transition-name: video-${postId}`} /> 408 408 </div> 409 409 410 410 <div id="post-overlay" class="post-overlay">
+3 -1
src/pages/contact.astro
··· 3 3 4 4 import DocumentColorScheme from '../components/DocumentColorScheme.astro'; 5 5 import SiteFooter from '../components/SiteFooter.astro'; 6 + import SkipToContent from '../components/SkipToContent.astro'; 6 7 import { SITE_DOCUMENT } from '../utils/site-document-theme'; 7 8 import { useTranslations, localeToHtmlLang } from '../i18n/utils'; 8 9 ··· 32 33 <link rel="stylesheet" href="/css/site-document.css" /> 33 34 </head> 34 35 <body> 36 + <SkipToContent /> 35 37 36 38 <div class="site-doc"> 37 39 <header class="site-doc__masthead"> ··· 41 43 <h1>{t('contact.heading')}</h1> 42 44 </header> 43 45 44 - <main class="site-doc__prose"> 46 + <main id="main-content" class="site-doc__prose"> 45 47 46 48 <h2>{t('contact.section.general')}</h2> 47 49 <p><a href="mailto:hello@getorbyt.com">hello@getorbyt.com</a></p>
+3 -1
src/pages/index.astro
··· 4 4 import AltstorePalPeek from '../components/AltstorePalPeek.astro'; 5 5 import DocumentColorScheme from '../components/DocumentColorScheme.astro'; 6 6 import SiteFooter from '../components/SiteFooter.astro'; 7 + import SkipToContent from '../components/SkipToContent.astro'; 7 8 import { 8 9 getIosDownloadOptionsFromRequest, 9 10 iosDownloadHrefFromOptions, ··· 245 246 </head> 246 247 247 248 <body> 249 + <SkipToContent /> 248 250 <div class="site-doc site-doc--landing"> 249 - <main class="main-content"> 251 + <main id="main-content" class="main-content"> 250 252 <div class="home-hero"> 251 253 <div class="logo"> 252 254 <svg class="logo-icon" xmlns="http://www.w3.org/2000/svg" viewBox="65 65 894 894">
+3 -2
src/pages/privacy.astro
··· 3 3 4 4 import DocumentColorScheme from '../components/DocumentColorScheme.astro'; 5 5 import SiteFooter from '../components/SiteFooter.astro'; 6 + import SkipToContent from '../components/SkipToContent.astro'; 6 7 import { SITE_DOCUMENT } from '../utils/site-document-theme'; 7 8 import { useTranslations, localeToHtmlLang } from '../i18n/utils'; 8 9 ··· 32 33 <link rel="stylesheet" href="/css/site-document.css" /> 33 34 </head> 34 35 <body> 35 - 36 + <SkipToContent /> 36 37 37 38 <div class="site-doc"> 38 39 <header class="site-doc__masthead"> ··· 43 44 <p class="site-doc__subtitle">{t('privacy.last_updated')}</p> 44 45 </header> 45 46 46 - <main class="site-doc__prose"> 47 + <main id="main-content" class="site-doc__prose"> 47 48 <p>This Privacy Policy describes how Orbyt ("we", "us", "our") collects, uses, and shares information when you use our mobile application ("Orbyt" or "the App").</p> 48 49 49 50 <p><strong>Important:</strong> Orbyt is a third-party client application that connects to the Bluesky network via the AT Protocol. When you use Orbyt, your data is shared with the decentralized AT Protocol network. You should also review <a href="https://bsky.social/about/support/privacy-policy" target="_blank" rel="noopener">Bluesky's Privacy Policy</a> to understand how your data is handled on their network.</p>
+3 -2
src/pages/terms.astro
··· 3 3 4 4 import DocumentColorScheme from '../components/DocumentColorScheme.astro'; 5 5 import SiteFooter from '../components/SiteFooter.astro'; 6 + import SkipToContent from '../components/SkipToContent.astro'; 6 7 import { SITE_DOCUMENT } from '../utils/site-document-theme'; 7 8 import { useTranslations, localeToHtmlLang } from '../i18n/utils'; 8 9 ··· 32 33 <link rel="stylesheet" href="/css/site-document.css" /> 33 34 </head> 34 35 <body> 35 - 36 + <SkipToContent /> 36 37 37 38 <div class="site-doc"> 38 39 <header class="site-doc__masthead"> ··· 43 44 <p class="site-doc__subtitle">{t('terms.last_updated')}</p> 44 45 </header> 45 46 46 - <main class="site-doc__prose"> 47 + <main id="main-content" class="site-doc__prose"> 47 48 <p>Welcome to Orbyt, a video social networking application! We're excited to have you on board as a user. Orbyt runs on the Authenticated Transfer Protocol ("AT Protocol"), a decentralized social networking protocol that supports many different kinds of services. These Terms of Service apply to the Orbyt service.</p> 48 49 49 50 <p>Before you dive into using Orbyt, please take a moment to carefully read these Terms. This document outlines our legal obligations to each other and they apply to your use of our services.</p>