Skip to content

Commit 3eaf092

Browse files
xeniapexeniape
committed
feat: Add universal navigation bar
1 parent 4731d86 commit 3eaf092

13 files changed

Lines changed: 459 additions & 7 deletions

‎src/css/header.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ html.is-clipped--navbar {
88
}
99

1010
body {
11-
padding-top: var(--navbar-height);
11+
padding-top: var(--body-top);
1212
}
1313

1414
.navbar {
@@ -17,7 +17,7 @@ body {
1717
font-size: calc(16 / var(--rem-base) * 1rem);
1818
height: var(--navbar-height);
1919
position: fixed;
20-
top: 0;
20+
top: var(--universal-nav-height);
2121
width: 100%;
2222
z-index: var(--z-index-navbar);
2323
display: flex;
@@ -233,7 +233,7 @@ body {
233233
position: fixed;
234234
display: none;
235235
z-index: 5;
236-
top: var(--navbar-height);
236+
top: var(--body-top);
237237
width: 100%;
238238
background: var(--navbar-menu-background);
239239
box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);

‎src/css/nav.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
.nav-container {
1212
position: fixed;
13-
top: var(--navbar-height);
13+
top: var(--body-top);
1414
left: 0;
1515
width: 100%;
1616
font-size: calc(17 / var(--rem-base) * 1rem);
@@ -54,7 +54,7 @@
5454

5555
@media screen and (min-width: 1024px) {
5656
.nav {
57-
top: calc(var(--navbar-height));
57+
top: var(--body-top);
5858
box-shadow: none;
5959
position: sticky;
6060
height: var(--nav-height--desktop);

‎src/css/site.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
@import "toc.css";
1111
@import "doc.css";
1212
@import "pagination.css";
13+
@import "universal-nav.css";
1314
@import "header.css";
1415
@import "footer.css";
1516
@import "highlight.css";

‎src/css/toolbar.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
@media screen and (min-width: 1024px) {
2020
.toolbar {
21-
top: calc(var(--navbar-height));
21+
top: var(--body-top);
2222
}
2323
}
2424

‎src/css/universal-nav.css‎

Lines changed: 312 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,312 @@
1+
/**
2+
* The Stackable universal navigation strip — links the three Stackable
3+
* properties (stackable.tech, docs, hub), mirroring the hub's meta strip.
4+
*/
5+
6+
.universal-nav {
7+
position: fixed;
8+
top: 0;
9+
left: 0;
10+
width: 100%;
11+
height: var(--universal-nav-height);
12+
z-index: var(--z-index-universal-nav);
13+
background: var(--universal-nav-background);
14+
color: var(--universal-nav-font-color);
15+
border-bottom: solid 1px transparent;
16+
}
17+
18+
.universal-nav__bar {
19+
display: flex;
20+
align-items: center;
21+
gap: 18px;
22+
height: 100%;
23+
padding: 0 28px;
24+
}
25+
26+
.universal-nav a {
27+
text-decoration: none;
28+
}
29+
30+
.universal-nav__brand {
31+
display: flex;
32+
align-items: center;
33+
border-radius: 6px;
34+
flex: none;
35+
}
36+
37+
.universal-nav__logo {
38+
display: block;
39+
height: 20px;
40+
width: auto;
41+
}
42+
43+
.universal-nav__sep {
44+
width: 1px;
45+
height: 18px;
46+
background: rgba(255, 255, 255, 0.16);
47+
flex: none;
48+
}
49+
50+
.universal-nav__tabs {
51+
display: flex;
52+
align-items: center;
53+
gap: 4px;
54+
flex: 1;
55+
}
56+
57+
.universal-nav__tab {
58+
display: inline-flex;
59+
align-items: center;
60+
gap: 7px;
61+
height: 30px;
62+
padding: 0 14px;
63+
border-radius: 7px;
64+
color: rgba(255, 255, 255, 0.62);
65+
font-size: 13.5px;
66+
font-weight: 500;
67+
line-height: 1;
68+
white-space: nowrap;
69+
transition:
70+
background var(--universal-nav-duration-fast) var(--universal-nav-ease),
71+
color var(--universal-nav-duration-fast) var(--universal-nav-ease);
72+
}
73+
74+
.universal-nav__tab:hover {
75+
background: var(--universal-nav-hover-background);
76+
color: rgba(255, 255, 255, 0.85);
77+
}
78+
79+
.universal-nav__tab.is-current {
80+
color: var(--universal-nav-font-color);
81+
font-weight: 700;
82+
background: rgba(255, 255, 255, 0.12);
83+
}
84+
85+
.universal-nav__host {
86+
color: rgba(255, 255, 255, 0.3);
87+
font-family: var(--monospace-font-family);
88+
font-size: 11px;
89+
}
90+
91+
.universal-nav__tab.is-current .universal-nav__host {
92+
color: rgba(255, 255, 255, 0.55);
93+
}
94+
95+
.universal-nav__dot {
96+
width: 6px;
97+
height: 6px;
98+
border-radius: 50%;
99+
flex: none;
100+
background: rgba(255, 255, 255, 0.3);
101+
}
102+
103+
.universal-nav__tab.is-current .universal-nav__dot {
104+
background: var(--universal-nav-accent-current);
105+
}
106+
107+
.universal-nav__dot--site {
108+
background: var(--universal-nav-accent-site);
109+
}
110+
111+
.universal-nav__dot--docs {
112+
background: var(--universal-nav-accent-docs);
113+
}
114+
115+
.universal-nav__dot--hub {
116+
background: var(--universal-nav-accent-hub);
117+
}
118+
119+
.universal-nav__icon {
120+
display: inline-flex;
121+
align-items: center;
122+
justify-content: center;
123+
border-radius: 6px;
124+
color: rgba(255, 255, 255, 0.7);
125+
transition: color var(--universal-nav-duration-fast) var(--universal-nav-ease);
126+
}
127+
128+
.universal-nav__icon:hover {
129+
color: var(--universal-nav-font-color);
130+
}
131+
132+
.universal-nav__cta {
133+
display: inline-flex;
134+
align-items: center;
135+
justify-content: center;
136+
height: 30px;
137+
padding: 0 16px;
138+
border-radius: 99px;
139+
background: var(--universal-nav-cta-background);
140+
color: var(--universal-nav-cta-font-color);
141+
font-size: 13px;
142+
font-weight: 500;
143+
line-height: 1;
144+
white-space: nowrap;
145+
flex: none;
146+
transition: background var(--universal-nav-duration-fast) var(--universal-nav-ease);
147+
}
148+
149+
.universal-nav__cta:hover {
150+
background: var(--universal-nav-cta-hover-background);
151+
}
152+
153+
.universal-nav__disclosure {
154+
display: none;
155+
align-items: center;
156+
gap: 7px;
157+
margin-left: auto;
158+
padding: 6px 8px;
159+
border: 0;
160+
background: none;
161+
color: var(--universal-nav-font-color);
162+
border-radius: 7px;
163+
font-size: 13.5px;
164+
font-weight: 600;
165+
line-height: 1;
166+
cursor: pointer;
167+
}
168+
169+
.universal-nav__disclosure:hover {
170+
background: var(--universal-nav-hover-background);
171+
}
172+
173+
.universal-nav__caret {
174+
display: inline-flex;
175+
color: rgba(255, 255, 255, 0.7);
176+
transition: transform var(--universal-nav-duration-med) var(--universal-nav-ease);
177+
}
178+
179+
.universal-nav__disclosure[aria-expanded="true"] .universal-nav__caret {
180+
transform: rotate(180deg);
181+
}
182+
183+
.universal-nav__sr {
184+
position: absolute;
185+
width: 1px;
186+
height: 1px;
187+
padding: 0;
188+
margin: -1px;
189+
overflow: hidden;
190+
clip: rect(0, 0, 0, 0);
191+
white-space: nowrap;
192+
border: 0;
193+
}
194+
195+
.universal-nav__sheet {
196+
position: absolute;
197+
top: var(--universal-nav-height);
198+
left: 0;
199+
width: 100%;
200+
background: var(--universal-nav-background);
201+
border-bottom: solid 1px rgba(255, 255, 255, 0.16);
202+
padding: 8px 12px 12px;
203+
line-height: 1.5;
204+
}
205+
206+
.universal-nav__sheet[hidden] {
207+
display: none;
208+
}
209+
210+
.universal-nav__sheet-row {
211+
display: flex;
212+
align-items: center;
213+
gap: 12px;
214+
padding: 12px;
215+
border-radius: 9px;
216+
margin-bottom: 4px;
217+
border: 1px solid transparent;
218+
}
219+
220+
.universal-nav__sheet-row:hover {
221+
background: var(--universal-nav-hover-background);
222+
}
223+
224+
.universal-nav__sheet-row.is-current {
225+
background: rgba(255, 255, 255, 0.06);
226+
border-color: rgba(255, 255, 255, 0.12);
227+
}
228+
229+
.universal-nav__sheet-dot {
230+
width: 9px;
231+
height: 9px;
232+
border-radius: 50%;
233+
flex: none;
234+
}
235+
236+
.universal-nav__sheet-text {
237+
flex: 1;
238+
min-width: 0;
239+
}
240+
241+
.universal-nav__sheet-name {
242+
display: block;
243+
font-size: 14.5px;
244+
font-weight: 700;
245+
color: var(--universal-nav-font-color);
246+
}
247+
248+
.universal-nav__sheet-host {
249+
display: block;
250+
color: rgba(255, 255, 255, 0.5);
251+
font-family: var(--monospace-font-family);
252+
font-size: 11px;
253+
margin-top: 1px;
254+
}
255+
256+
.universal-nav__here {
257+
color: var(--universal-nav-accent-current);
258+
font-size: 11px;
259+
font-weight: 600;
260+
white-space: nowrap;
261+
}
262+
263+
.universal-nav__ext {
264+
display: inline-flex;
265+
color: rgba(255, 255, 255, 0.5);
266+
}
267+
268+
.universal-nav__sheet-cta {
269+
width: 100%;
270+
height: 40px;
271+
margin-top: 6px;
272+
}
273+
274+
.universal-nav a:focus-visible,
275+
.universal-nav button:focus-visible {
276+
outline: 2px solid var(--universal-nav-font-color);
277+
outline-offset: 2px;
278+
}
279+
280+
@media (prefers-reduced-motion: reduce) {
281+
.universal-nav__tab,
282+
.universal-nav__icon,
283+
.universal-nav__caret,
284+
.universal-nav__disclosure,
285+
.universal-nav__cta {
286+
transition: none;
287+
}
288+
}
289+
290+
@media screen and (max-width: 720px) {
291+
.universal-nav__bar {
292+
padding: 0 14px;
293+
gap: 10px;
294+
}
295+
296+
.universal-nav__tabs,
297+
.universal-nav__icon,
298+
.universal-nav__bar > .universal-nav__cta,
299+
.universal-nav__sep {
300+
display: none;
301+
}
302+
303+
.universal-nav__disclosure {
304+
display: inline-flex;
305+
}
306+
}
307+
308+
@media screen and (min-width: 721px) {
309+
.universal-nav__sheet {
310+
display: none;
311+
}
312+
}

0 commit comments

Comments
 (0)