source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
style: update CSS for site-document, site-footer, and site-landing-hero; enhance responsiveness and visual consistency with fluid design adjustments
+33
-42
+2
-2
public/css/site-document.css
+2
-2
public/css/site-document.css
···
92
92
flex-direction: column;
93
93
justify-content: center;
94
94
align-items: center;
95
-
padding-top: clamp(0.2rem, 1vw + 0.8vmin, 1.75rem);
96
-
padding-bottom: clamp(0.75rem, 3vw + 1vmin, 2rem);
95
+
padding-top: clamp(0.5rem, 2vh, 1.4rem);
96
+
padding-bottom: clamp(1rem, 3.5vh, 2.2rem);
97
97
}
98
98
99
99
.site-doc__masthead {
+21
-30
public/css/site-landing-hero.css
+21
-30
public/css/site-landing-hero.css
···
10
10
.site-doc--landing {
11
11
--bg-color: var(--orbyt-page-bg);
12
12
--fg-color: var(--orbyt-white);
13
+
/* Shared fluid step keeps all hero elements scaling together */
14
+
--landing-fluid-step: clamp(0px, 1.25vw, 10px);
13
15
/* Tight stack: mark / wordmark / slogan */
14
-
--landing-logo-icon-wordmark-gap: clamp(4px, 1.2vw, 10px);
15
-
--landing-wordmark-slogan-gap: clamp(6px, 1.6vw, 14px);
16
+
--landing-logo-icon-wordmark-gap: calc(5px + var(--landing-fluid-step) * 0.35);
17
+
--landing-wordmark-slogan-gap: calc(7px + var(--landing-fluid-step) * 0.45);
16
18
/* Breathing room before CTAs */
17
-
--landing-hero-actions-gap: clamp(40px, 12vw, 96px);
19
+
--landing-hero-actions-gap: calc(28px + var(--landing-fluid-step) * 1.7);
18
20
}
19
21
20
22
/* Hero column — constrains content to a readable width on all screen sizes */
21
23
.hero-column {
22
24
width: 100%;
23
-
max-width: 420px;
25
+
max-width: calc(340px + var(--landing-fluid-step) * 16);
24
26
}
25
27
26
28
.download-button-wrap {
27
29
position: relative;
28
-
margin: 0 0 10px 0;
30
+
margin: 0 0 calc(8px + var(--landing-fluid-step) * 0.4) 0;
29
31
overflow: visible;
30
32
}
31
33
···
40
42
.download-button {
41
43
background: #551def;
42
44
border: 2px solid #000000;
43
-
border-radius: 30px;
44
-
min-height: 56px;
45
-
padding: 0.75rem 1.5rem;
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);
46
48
font-weight: bold;
47
-
font-size: 19px;
49
+
font-size: calc(17px + var(--landing-fluid-step) * 0.3);
48
50
line-height: 1.2;
49
51
display: flex;
50
52
align-items: center;
51
53
justify-content: center;
52
54
text-align: center;
53
55
text-decoration: none;
54
-
color: #e0ebff;
56
+
color: #d2ddff;
55
57
width: 100%;
56
-
margin: 0 0 10px 0;
58
+
margin: 0;
57
59
}
58
60
59
61
.home-hero {
···
64
66
.home-actions {
65
67
text-align: center;
66
68
margin-top: var(--landing-hero-actions-gap);
69
+
display: grid;
70
+
gap: calc(8px + var(--landing-fluid-step) * 0.4);
67
71
}
68
72
69
73
.logo {
···
75
79
}
76
80
77
81
.logo-icon {
78
-
width: 110px;
82
+
width: calc(100px + var(--landing-fluid-step) * 3.4);
79
83
height: auto;
80
84
display: block;
81
85
margin: 0;
···
98
102
.logo-text {
99
103
font-family: 'Figtree', sans-serif;
100
104
font-weight: 900;
101
-
font-size: 42px;
105
+
font-size: calc(38px + var(--landing-fluid-step) * 1.6);
102
106
color: var(--fg-color);
103
107
text-align: center;
104
108
text-box-trim: trim-start;
···
116
120
.motto-text {
117
121
font-family: 'Figtree', sans-serif;
118
122
font-weight: 500;
119
-
font-size: 20px;
123
+
font-size: calc(18px + var(--landing-fluid-step) * 0.6);
120
124
color: #01f5b3;
121
125
text-align: center;
122
126
display: block;
123
127
margin: 0 auto;
124
-
letter-spacing: -0.02em;
128
+
letter-spacing: -0.015em;
125
129
}
126
130
127
131
@media (max-width: 360px) {
128
-
.logo-icon {
129
-
width: 88px;
130
-
}
131
-
132
-
.logo-text {
133
-
font-size: 34px;
134
-
}
135
-
136
-
.motto-text {
137
-
font-size: 17px;
138
-
}
139
-
140
-
.download-button {
141
-
font-size: 17px;
142
-
min-height: 50px;
132
+
.site-doc--landing {
133
+
--landing-fluid-step: 0px;
143
134
}
144
135
}