source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
feat: add Skip to Content component for improved accessibility and update styles for various elements
+64
-15
+4
-3
public/css/profile.css
+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 {
+6
public/css/tokens.css
+6
public/css/tokens.css
+27
src/components/SkipToContent.astro
+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
+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
+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
+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
-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
+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
-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
-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>