Skip to content

Commit 985de95

Browse files
phauptphaupt
committed
Unify navbar spacing across documentation pages
1 parent d64baa1 commit 985de95

3 files changed

Lines changed: 10 additions & 131 deletions

File tree

‎docs/.vitepress/theme/custom.css‎

Lines changed: 0 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -277,116 +277,6 @@ html.dark .VPSidebarItem.is-link > .item > .link:hover .text {
277277
}
278278
}
279279

280-
/* Release notes pages: align shell with doc pages.
281-
VitePress only adds `has-sidebar` when the sidebar config resolves to a
282-
non-empty array. Release notes use custom layouts with their own sidebar,
283-
so VitePress sees no sidebar and positions everything differently.
284-
We toggle `rn-page` on <html> via JS and replicate every has-sidebar rule
285-
here so the chrome stays fixed across all pages.
286-
*/
287-
288-
@media (min-width: 960px) {
289-
html.rn-page {
290-
--rn-shell-offset: var(--vp-sidebar-width);
291-
}
292-
}
293-
294-
@media (min-width: 1440px) {
295-
html.rn-page {
296-
--rn-shell-offset: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
297-
--rn-sidebar-overhang: calc(var(--vp-sidebar-width) - var(--rn-shell-offset));
298-
}
299-
}
300-
301-
/* — VPNavBar --------------------------------------------------------- */
302-
@media (min-width: 960px) {
303-
html.rn-page .VPNavBar .wrapper {
304-
padding: 0;
305-
}
306-
307-
html.rn-page .VPNavBar .container {
308-
max-width: 100%;
309-
}
310-
311-
html.rn-page .VPNavBar .container > .title {
312-
position: absolute;
313-
top: 0;
314-
left: 0;
315-
z-index: 2;
316-
padding: 0 32px;
317-
width: var(--vp-sidebar-width);
318-
height: var(--vp-nav-height);
319-
background-color: transparent;
320-
}
321-
322-
html.rn-page .VPNavBar .container > .content {
323-
position: relative;
324-
z-index: 1;
325-
padding-right: 32px;
326-
padding-left: var(--vp-sidebar-width);
327-
}
328-
329-
html.rn-page .VPNavBar .content-body {
330-
position: relative;
331-
background-color: var(--vp-nav-bg-color);
332-
}
333-
334-
html.rn-page .VPNavBar .divider {
335-
padding-left: var(--vp-sidebar-width);
336-
}
337-
}
338-
339-
@media (min-width: 1440px) {
340-
html.rn-page .VPNavBar .container > .title {
341-
width: var(--vp-sidebar-width) !important;
342-
padding-left: 32px !important;
343-
}
344-
345-
html.rn-page .VPNavBar .container > .content {
346-
padding-left: var(--vp-sidebar-width) !important;
347-
padding-right: 32px !important;
348-
}
349-
}
350-
351-
/* — VPNavBarTitle (border under logo area) --------------------------- */
352-
@media (min-width: 960px) {
353-
html.rn-page .VPNavBarTitle .title {
354-
border-bottom-color: var(--vp-c-divider);
355-
}
356-
}
357-
358-
/* — VPLocalNav (secondary mobile nav bar) ---------------------------- */
359-
@media (min-width: 960px) {
360-
html.rn-page .VPLocalNav {
361-
padding-left: var(--rn-shell-offset);
362-
}
363-
}
364-
365-
@media (min-width: 1440px) {
366-
html.rn-page .VPLocalNav {
367-
padding-left: var(--rn-shell-offset);
368-
}
369-
}
370-
371-
/* — VPContent (main content area offset) ----------------------------- */
372-
html.rn-page .VPContent {
373-
margin: 0;
374-
}
375-
376-
@media (min-width: 960px) {
377-
html.rn-page .VPContent {
378-
margin: var(--vp-layout-top-height, 0px) 0 0;
379-
padding-left: var(--rn-shell-offset);
380-
}
381-
}
382-
383-
@media (min-width: 1440px) {
384-
html.rn-page .VPContent {
385-
padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
386-
padding-left: var(--rn-shell-offset);
387-
}
388-
}
389-
390280
/* Medium-zoom: clickable image hint */
391281
.vp-doc img:not(.no-zoom) {
392282
cursor: zoom-in;

‎docs/.vitepress/theme/index.js‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -43,23 +43,14 @@ export default {
4343
})
4444
}
4545

46-
const updatePageClass = () => {
47-
document.documentElement.classList.toggle(
48-
'rn-page',
49-
route.path.startsWith('/release-notes/')
50-
)
51-
}
52-
5346
onMounted(() => {
5447
initZoom()
55-
updatePageClass()
5648
})
5749

5850
watch(
5951
() => route.path,
6052
() => nextTick(() => {
6153
initZoom()
62-
updatePageClass()
6354
})
6455
)
6556
}

‎docs/.vitepress/theme/release-notes.css‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
.rn-index {
1111
max-width: 860px;
12+
margin: 0 auto;
1213
padding: 48px 32px 32px;
1314
}
1415

@@ -227,30 +228,27 @@ html.dark .rn-sidebar-nav .rn-sidebar-link.is-active::before {
227228
occupies the same space as VitePress's VPSidebar and article content
228229
aligns with regular doc pages (VPDoc padding: 48px 32px 0). */
229230
@media (min-width: 960px) {
230-
.rn-index {
231-
padding-left: 64px;
232-
}
233-
234231
.rn-post-layout {
235-
margin-left: calc(-1 * var(--vp-sidebar-width));
236-
width: calc(100% + var(--vp-sidebar-width));
232+
max-width: 1152px;
233+
margin: 0 auto;
237234
display: grid;
238-
grid-template-columns: var(--vp-sidebar-width) minmax(0, 1fr);
239-
gap: 0;
235+
grid-template-columns: 240px minmax(0, 1fr);
236+
gap: 48px;
240237
align-items: start;
241-
padding: 0;
238+
padding: 48px 32px 0;
242239
}
243240

244241
.rn-sidebar {
245242
position: sticky;
246243
top: calc(var(--vp-nav-height) + 32px);
247244
margin: 0;
248-
width: calc(var(--vp-sidebar-width) + var(--rn-sidebar-overhang, 0px));
249-
padding: 32px 32px 32px calc(32px + var(--rn-sidebar-overhang, 0px));
245+
padding: 0;
250246
}
251247

252248
.rn-article {
253-
padding: 48px 32px 48px 64px;
249+
min-width: 0;
250+
max-width: 864px;
251+
padding: 0 0 48px;
254252
}
255253
}
256254

0 commit comments

Comments
 (0)