From bb3e5f712a3b1b79d85a6f15ad32bafcf6c77f66 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 1 Apr 2020 14:35:25 -0700
Subject: [PATCH] Move table of contents to new sidebar, restyle it to be
simpler
---
site/assets/scss/_toc.scss | 34 ++++++++++++++++++++++++-------
site/layouts/_default/docs.html | 36 +++++++++++++++++++++------------
2 files changed, 50 insertions(+), 20 deletions(-)
diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
index 9e7de3c2b9..cc9a6d6ddf 100644
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -1,17 +1,37 @@
// stylelint-disable selector-max-type, selector-max-compound-selectors
+.bd-toc-wrap {
+ @include media-breakpoint-up(lg) {
+ @supports (position: sticky) {
+ position: sticky;
+ top: 5rem;
+ right: 0;
+ z-index: 2;
+ height: subtract(100vh, 7rem);
+ overflow-y: auto;
+ }
+ }
+}
+
.bd-toc nav {
- padding-top: .125em;
- padding-bottom: .125em;
- border-left: .25em solid $gray-200;
+ @include font-size(.875rem);
- > ul {
- margin-bottom: 0;
+ ul {
+ padding-left: 0;
+ list-style: none;
+
+ ul {
+ padding-left: 1rem;
+ margin-top: .25rem;
+ }
}
- li ul li {
+ li {
margin-bottom: .25rem;
- list-style-type: disc;
+ }
+
+ a {
+ color: inherit;
}
a:not(:hover) {
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index 383ff0f0c1..c3eff6ec82 100644
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -9,16 +9,18 @@
{{ partial "docs-navbar" . }}
{{ partial "docs-subnav" . }}
- <div class="container-xl my-4">
+ <div class="container-xxl my-4">
<div class="row flex-xl-nowrap">
- <div class="col-md-3">
+ <div class="col-md-3 col-xl-2 bd-sidebar">
{{ partial "docs-sidebar" . }}
</div>
- <main class="col-md-9 py-md-3 pl-md-5 bd-content">
- <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
- <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
- {{ partial "ads" . }}
+ <main class="col-md-9 col-xl-10 py-md-3 pl-md-5 bd-content">
+ <div class="col-xl-10 px-0">
+ <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
+ <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
+ {{ partial "ads" . }}
+ </div>
{{ if .Page.Params.sections }}
<div class="row my-5">
@@ -33,14 +35,22 @@
</div>
{{ end }}
- {{ if (eq .Page.Params.toc true) }}
- <strong class="d-block h3 mt-5 mb-3">On this page</strong>
- <nav class="bd-toc mb-5 text-muted" aria-label="Secondary navigation">
- {{ .TableOfContents }}
- </nav>
- {{ end }}
+ <div class="row position-relative flex-xl-row-reverse">
+ <div class="col-xl-3">
+ {{ if (eq .Page.Params.toc true) }}
+ <div class="bd-toc-wrap pl-xl-3 text-muted">
+ <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
+ <div class="bd-toc mb-5 mb-xl-0">
+ {{ .TableOfContents }}
+ </div>
+ </div>
+ {{ end }}
+ </div>
+ <div class="col-xl-9">
+ {{ .Content }}
+ </div>
+ </div>
- {{ .Content }}
</main>
</div>
</div>
--
GitLab