source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
style: integrate SiteClientRouterHeadStyles component across multiple pages for improved styling consistency and maintainability; remove redundant CSS links
+108
-64
+53
public/css/site-download-cta.css
+53
public/css/site-download-cta.css
···
1
+
/* Download CTAs + home-actions; pulled in from `SiteClientRouterHeadStyles.astro` on ClientRouter routes. */
2
+
.home-actions {
3
+
--landing-fluid-step: clamp(0px, 1.25vw, 10px);
4
+
--landing-hero-actions-gap: calc(28px + var(--landing-fluid-step) * 1.7);
5
+
text-align: center;
6
+
margin-top: var(--landing-hero-actions-gap);
7
+
display: grid;
8
+
gap: calc(8px + var(--landing-fluid-step) * 0.4);
9
+
}
10
+
11
+
.download-button-wrap {
12
+
position: relative;
13
+
margin: 0 0 calc(8px + var(--landing-fluid-step) * 0.4) 0;
14
+
overflow: visible;
15
+
}
16
+
17
+
.download-button-wrap .download-button {
18
+
position: relative;
19
+
z-index: 1;
20
+
margin: 0;
21
+
max-width: none;
22
+
width: 100%;
23
+
}
24
+
25
+
.download-button {
26
+
background: #551def;
27
+
border: 2px solid #000000;
28
+
border-radius: 9999px;
29
+
padding-block: calc(0.82em + var(--landing-fluid-step) * 0.025);
30
+
padding-inline: calc(1.4em + var(--landing-fluid-step) * 0.05);
31
+
font-weight: bold;
32
+
font-size: calc(17px + var(--landing-fluid-step) * 0.3);
33
+
line-height: 1.2;
34
+
display: flex;
35
+
align-items: center;
36
+
justify-content: center;
37
+
text-align: center;
38
+
text-decoration: none;
39
+
color: #d2ddff;
40
+
width: 100%;
41
+
margin: 0;
42
+
}
43
+
44
+
.download-button:hover,
45
+
.download-button:focus-visible {
46
+
color: #f3f5fe;
47
+
}
48
+
49
+
@media (max-width: 360px) {
50
+
.home-actions {
51
+
--landing-fluid-step: 0px;
52
+
}
53
+
}
-40
public/css/site-landing-hero.css
-40
public/css/site-landing-hero.css
···
25
25
max-width: calc(340px + var(--landing-fluid-step) * 16);
26
26
}
27
27
28
-
.download-button-wrap {
29
-
position: relative;
30
-
margin: 0 0 calc(8px + var(--landing-fluid-step) * 0.4) 0;
31
-
overflow: visible;
32
-
}
33
-
34
-
.download-button-wrap .download-button {
35
-
position: relative;
36
-
z-index: 1;
37
-
margin: 0;
38
-
max-width: none;
39
-
width: 100%;
40
-
}
41
-
42
-
.download-button {
43
-
background: #551def;
44
-
border: 2px solid #000000;
45
-
border-radius: 9999px;
46
-
padding-block: calc(0.82em + var(--landing-fluid-step) * 0.025);
47
-
padding-inline: calc(1.4em + var(--landing-fluid-step) * 0.05);
48
-
font-weight: bold;
49
-
font-size: calc(17px + var(--landing-fluid-step) * 0.3);
50
-
line-height: 1.2;
51
-
display: flex;
52
-
align-items: center;
53
-
justify-content: center;
54
-
text-align: center;
55
-
text-decoration: none;
56
-
color: #d2ddff;
57
-
width: 100%;
58
-
margin: 0;
59
-
}
60
-
61
28
.home-hero {
62
29
margin-top: 0;
63
30
margin-bottom: 0;
64
-
}
65
-
66
-
.home-actions {
67
-
text-align: center;
68
-
margin-top: var(--landing-hero-actions-gap);
69
-
display: grid;
70
-
gap: calc(8px + var(--landing-fluid-step) * 0.4);
71
31
}
72
32
73
33
.logo {
+36
src/components/SiteClientRouterHeadStyles.astro
+36
src/components/SiteClientRouterHeadStyles.astro
···
1
+
---
2
+
/** Public CSS links for `ClientRouter` pages; keeps `site-download-cta.css` in one place. */
3
+
interface Props {
4
+
documentShell?: boolean
5
+
omitSiteDocument?: boolean
6
+
landingHero?: boolean
7
+
landingAccentFonts?: boolean
8
+
}
9
+
10
+
const {
11
+
documentShell = false,
12
+
omitSiteDocument = false,
13
+
landingHero = false,
14
+
landingAccentFonts = false,
15
+
} = Astro.props
16
+
---
17
+
18
+
{
19
+
documentShell && (
20
+
<>
21
+
<link rel="stylesheet" href="/css/tokens.css" />
22
+
<link rel="stylesheet" href="/css/site-footer.css" />
23
+
{!omitSiteDocument && <link rel="stylesheet" href="/css/site-document.css" />}
24
+
</>
25
+
)
26
+
}
27
+
<link rel="stylesheet" href="/css/site-download-cta.css" />
28
+
{landingHero && <link rel="stylesheet" href="/css/site-landing-hero.css" />}
29
+
{
30
+
landingAccentFonts && (
31
+
<>
32
+
<link rel="stylesheet" href="/css/caveat.css" />
33
+
<link rel="stylesheet" href="/css/klee-one.css" />
34
+
</>
35
+
)
36
+
}
+2
-2
src/pages/404.astro
+2
-2
src/pages/404.astro
···
2
2
export const prerender = false;
3
3
4
4
import DocumentColorScheme from '../components/DocumentColorScheme.astro';
5
+
import SiteClientRouterHeadStyles from '../components/SiteClientRouterHeadStyles.astro';
5
6
import SiteFooter from '../components/SiteFooter.astro';
6
7
import SkipToContent from '../components/SkipToContent.astro';
7
8
import { SITE_DOCUMENT } from '../utils/site-document-theme';
···
37
38
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
38
39
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
39
40
<link rel="manifest" href="/favicon/site.webmanifest">
40
-
<link rel="stylesheet" href="/css/tokens.css" />
41
-
<link rel="stylesheet" href="/css/site-footer.css" />
41
+
<SiteClientRouterHeadStyles documentShell omitSiteDocument />
42
42
<style>
43
43
* {
44
44
margin: 0;
+2
src/pages/@[handle].astro
+2
src/pages/@[handle].astro
···
8
8
import { getChromeBackgroundColor, getUiColorScheme } from '../utils/profile-colors';
9
9
import { getVideoAmbientBackdropInlineStyle } from '../utils/video-ambient-backdrop';
10
10
import DocumentColorScheme from '../components/DocumentColorScheme.astro';
11
+
import SiteClientRouterHeadStyles from '../components/SiteClientRouterHeadStyles.astro';
11
12
import { ClientRouter } from 'astro:transitions';
12
13
import { useTranslations, localeToHtmlLang } from '../i18n/utils';
13
14
···
92
93
<link rel="stylesheet" href="/css/skeleton.css">
93
94
<link rel="stylesheet" href="/css/shared.css">
94
95
<link rel="stylesheet" href="/css/profile.css">
96
+
<SiteClientRouterHeadStyles />
95
97
96
98
<title>{ogTitle}</title>
97
99
<meta name="description" content={ogDescription} />
+3
-1
src/pages/@[handle]/[postId].astro
+3
-1
src/pages/@[handle]/[postId].astro
···
4
4
import { fetchPost, toAbsoluteUrl, getImageMimeType } from '../../utils/bluesky-api';
5
5
import { parseRichText } from '../../utils/richtext';
6
6
import DocumentColorScheme from '../../components/DocumentColorScheme.astro';
7
+
import SiteClientRouterHeadStyles from '../../components/SiteClientRouterHeadStyles.astro';
7
8
import { SITE_DOCUMENT } from '../../utils/site-document-theme';
8
9
import { getVideoAmbientBackdropInlineStyle } from '../../utils/video-ambient-backdrop';
9
10
import { ClientRouter } from 'astro:transitions';
···
123
124
<link rel="stylesheet" href="/css/skeleton.css">
124
125
<link rel="stylesheet" href="/css/shared.css">
125
126
<link rel="stylesheet" href="/css/embed.css">
126
-
<link rel="stylesheet" href="/css/post.css">
127
+
<link rel="stylesheet" href="/css/post.css">
128
+
<SiteClientRouterHeadStyles />
127
129
128
130
<style>
129
131
@media screen and (max-width: 699px) {
+2
src/pages/android.astro
+2
src/pages/android.astro
···
1
1
---
2
2
export const prerender = true;
3
+
import SiteClientRouterHeadStyles from '../components/SiteClientRouterHeadStyles.astro';
3
4
import { ClientRouter } from 'astro:transitions';
4
5
---
5
6
···
8
9
<head>
9
10
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
10
11
<title>Android Beta sign up</title>
12
+
<SiteClientRouterHeadStyles />
11
13
<ClientRouter />
12
14
<script is:inline async src="https://tally.so/widgets/embed.js"></script>
13
15
<style is:global>
+2
-6
src/pages/app.astro
+2
-6
src/pages/app.astro
···
2
2
// QR helps desktop users open this URL on iPhone; hidden on touch (same page on device).
3
3
import AltstorePalPeek from '../components/AltstorePalPeek.astro';
4
4
import DocumentColorScheme from '../components/DocumentColorScheme.astro';
5
+
import SiteClientRouterHeadStyles from '../components/SiteClientRouterHeadStyles.astro';
5
6
import SiteFooter from '../components/SiteFooter.astro';
6
7
import SkipToContent from '../components/SkipToContent.astro';
7
8
import { ClientRouter } from 'astro:transitions';
···
32
33
themeColor={SITE_DOCUMENT.orbytBlack}
33
34
tileColor={SITE_DOCUMENT.orbytBlack}
34
35
/>
35
-
<link rel="stylesheet" href="/css/tokens.css" />
36
-
<link rel="stylesheet" href="/css/site-footer.css" />
37
-
<link rel="stylesheet" href="/css/site-document.css" />
38
-
<link rel="stylesheet" href="/css/site-landing-hero.css" />
39
-
<link rel="stylesheet" href="/css/caveat.css" />
40
-
<link rel="stylesheet" href="/css/klee-one.css" />
36
+
<SiteClientRouterHeadStyles documentShell landingHero landingAccentFonts />
41
37
<meta name="viewport" content="width=device-width, initial-scale=1">
42
38
<title>{t('app.title')}</title>
43
39
<ClientRouter />
+2
-3
src/pages/contact.astro
+2
-3
src/pages/contact.astro
···
2
2
export const prerender = false;
3
3
4
4
import DocumentColorScheme from '../components/DocumentColorScheme.astro';
5
+
import SiteClientRouterHeadStyles from '../components/SiteClientRouterHeadStyles.astro';
5
6
import SiteFooter from '../components/SiteFooter.astro';
6
7
import SkipToContent from '../components/SkipToContent.astro';
7
8
import { SITE_DOCUMENT } from '../utils/site-document-theme';
···
32
33
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
33
34
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
34
35
<link rel="manifest" href="/favicon/site.webmanifest">
35
-
<link rel="stylesheet" href="/css/tokens.css" />
36
-
<link rel="stylesheet" href="/css/site-footer.css" />
37
-
<link rel="stylesheet" href="/css/site-document.css" />
36
+
<SiteClientRouterHeadStyles documentShell />
38
37
</head>
39
38
<body>
40
39
<SkipToContent />
+2
-6
src/pages/index.astro
+2
-6
src/pages/index.astro
···
3
3
4
4
import AltstorePalPeek from '../components/AltstorePalPeek.astro';
5
5
import DocumentColorScheme from '../components/DocumentColorScheme.astro';
6
+
import SiteClientRouterHeadStyles from '../components/SiteClientRouterHeadStyles.astro';
6
7
import SiteFooter from '../components/SiteFooter.astro';
7
8
import SkipToContent from '../components/SkipToContent.astro';
8
9
import { ClientRouter } from 'astro:transitions';
···
30
31
themeColor={SITE_DOCUMENT.orbytBlack}
31
32
tileColor={SITE_DOCUMENT.orbytBlack}
32
33
/>
33
-
<link rel="stylesheet" href="/css/tokens.css" />
34
-
<link rel="stylesheet" href="/css/site-footer.css" />
35
-
<link rel="stylesheet" href="/css/site-document.css" />
36
-
<link rel="stylesheet" href="/css/site-landing-hero.css" />
37
-
<link rel="stylesheet" href="/css/caveat.css" />
38
-
<link rel="stylesheet" href="/css/klee-one.css" />
34
+
<SiteClientRouterHeadStyles documentShell landingHero landingAccentFonts />
39
35
<meta name="google-site-verification" content="4xaimUg28uLCqKwsPNIz6QeG_tfnLlAdHgS5bC_90JU"/>
40
36
{hreflangLinks('/').map(({ hreflang, href }) => (
41
37
<link rel="alternate" hreflang={hreflang} href={href} />
+2
-3
src/pages/privacy.astro
+2
-3
src/pages/privacy.astro
···
2
2
export const prerender = false;
3
3
4
4
import DocumentColorScheme from '../components/DocumentColorScheme.astro';
5
+
import SiteClientRouterHeadStyles from '../components/SiteClientRouterHeadStyles.astro';
5
6
import SiteFooter from '../components/SiteFooter.astro';
6
7
import SkipToContent from '../components/SkipToContent.astro';
7
8
import { SITE_DOCUMENT } from '../utils/site-document-theme';
···
34
35
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
35
36
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
36
37
<link rel="manifest" href="/favicon/site.webmanifest">
37
-
<link rel="stylesheet" href="/css/tokens.css" />
38
-
<link rel="stylesheet" href="/css/site-footer.css" />
39
-
<link rel="stylesheet" href="/css/site-document.css" />
38
+
<SiteClientRouterHeadStyles documentShell />
40
39
</head>
41
40
<body>
42
41
<SkipToContent />
+2
-3
src/pages/terms.astro
+2
-3
src/pages/terms.astro
···
2
2
export const prerender = false;
3
3
4
4
import DocumentColorScheme from '../components/DocumentColorScheme.astro';
5
+
import SiteClientRouterHeadStyles from '../components/SiteClientRouterHeadStyles.astro';
5
6
import SiteFooter from '../components/SiteFooter.astro';
6
7
import SkipToContent from '../components/SkipToContent.astro';
7
8
import { SITE_DOCUMENT } from '../utils/site-document-theme';
···
34
35
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
35
36
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
36
37
<link rel="manifest" href="/favicon/site.webmanifest">
37
-
<link rel="stylesheet" href="/css/tokens.css" />
38
-
<link rel="stylesheet" href="/css/site-footer.css" />
39
-
<link rel="stylesheet" href="/css/site-document.css" />
38
+
<SiteClientRouterHeadStyles documentShell />
40
39
</head>
41
40
<body>
42
41
<SkipToContent />