Skip to content

Commit 2099be2

Browse files
jwilderjwilder
committed
Fix left nav: hide on homepage, center layout with max-width
1. Only render the left nav + docs-layout wrapper on non-homepage pages. The landing page renders without the sidebar. 2. Add max-width: 84rem and margin: 0 auto to .docs-layout so the entire three-column layout (left-nav + content + toc) is centered on the page rather than pinned to the screen edge.
1 parent 0a574e8 commit 2099be2

2 files changed

Lines changed: 17 additions & 8 deletions

File tree

‎docs/layouts/_default/baseof.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,18 @@
55
</head>
66
<body>
77
{{- partial "header.html" . -}}
8+
{{- if .IsHome }}
9+
<main>
10+
{{- block "main" . }}{{- end }}
11+
</main>
12+
{{- else }}
813
<div class="docs-layout">
914
{{- partial "left-nav.html" . -}}
1015
<main>
1116
{{- block "main" . }}{{- end }}
1217
</main>
1318
</div>
19+
{{- end }}
1420
{{- partial "footer.html" . -}}
1521
<script>
1622
document.addEventListener("DOMContentLoaded", function () {

‎docs/static/css/style.css‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -762,6 +762,9 @@ a:hover {
762762
/* ── Docs layout (left nav + main) ────────────────────────── */
763763
.docs-layout {
764764
display: flex;
765+
max-width: 84rem;
766+
margin: 0 auto;
767+
padding: 0 1.5rem;
765768
min-height: calc(100vh - var(--nav-height));
766769
}
767770

@@ -775,27 +778,25 @@ a:hover {
775778
width: 16rem;
776779
flex-shrink: 0;
777780
border-right: 1px solid var(--color-border);
778-
background: var(--color-surface);
781+
}
782+
783+
.left-nav-inner {
779784
position: sticky;
780785
top: var(--nav-height);
781786
height: calc(100vh - var(--nav-height));
782787
overflow-y: auto;
783-
z-index: 5;
788+
padding: 1.25rem 0;
784789
}
785790

786-
.left-nav::-webkit-scrollbar {
791+
.left-nav-inner::-webkit-scrollbar {
787792
width: 3px;
788793
}
789794

790-
.left-nav::-webkit-scrollbar-thumb {
795+
.left-nav-inner::-webkit-scrollbar-thumb {
791796
background: var(--color-border);
792797
border-radius: 3px;
793798
}
794799

795-
.left-nav-inner {
796-
padding: 1.25rem 0;
797-
}
798-
799800
.left-nav-section {
800801
margin-bottom: 0.25rem;
801802
}
@@ -914,8 +915,10 @@ a:hover {
914915
position: fixed;
915916
top: var(--nav-height);
916917
left: 0;
918+
width: 16rem;
917919
height: calc(100vh - var(--nav-height));
918920
z-index: 20;
921+
background: var(--color-surface);
919922
box-shadow: 4px 0 12px rgba(0, 0, 0, 0.3);
920923
}
921924

0 commit comments

Comments
 (0)