From baf0047f7e13d20acf71d0f5567ca13eceab4d1b Mon Sep 17 00:00:00 2001 From: Anderson Banihirwe Date: Tue, 16 Mar 2021 06:51:53 -0600 Subject: [PATCH 1/6] Fix sticky sidebar behavior on small screens --- doc/_static/style.css | 247 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 245 insertions(+), 2 deletions(-) diff --git a/doc/_static/style.css b/doc/_static/style.css index 66983bb1b38..cb4c4233482 100644 --- a/doc/_static/style.css +++ b/doc/_static/style.css @@ -13,8 +13,251 @@ table.docutils td { max-width: 1600px !important; } -/* Make sidebar sticky */ + +/* Copied from +https://github.com/bokeh/bokeh/blob/branch-2.4/sphinx/source/bokeh/static/custom.css +*/ + +:root { + /* Logo image height + all the paddings/margins make the navbar height. */ + --navbar-height: calc(30px + 0.3125rem * 2 + 0.5rem * 2); +} + +.bd-search { + position: relative; + padding-bottom: 20px; +} + +@media (min-width: 768px) { + .search-front-page { + width: 50%; + } +} + +/* minimal copy paste from bootstrap docs css to get sidebars working */ + +.bd-toc { + -ms-flex-order: 2; + order: 2; + padding-top: 1.5rem; + padding-bottom: 1.5rem; + /* font-size: 0.875rem; */ + /* add scrolling sidebar */ + height: calc(100vh - 2rem); + overflow-y: auto; +} + +@supports ((position: -webkit-sticky) or (position: sticky)) { + .bd-toc { + position: -webkit-sticky; + position: sticky; + top: 4rem; + height: calc(100vh - 4rem); + overflow-y: auto; + } +} + +.section-nav { + padding-left: 0; + border-left: 1px solid #eee; + border-bottom: none; +} + +.section-nav ul { + padding-left: 1rem; +} + +.toc-entry { + display: block; +} + +.toc-entry a { + display: block; + padding: 0.125rem 1.5rem; + color: #77757a; +} + +.toc-entry a:hover { + color: rgba(0, 0, 0, 0.85); + text-decoration: none; +} .bd-sidebar { - position: sticky !important; + -ms-flex-order: 0; + order: 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +@media (min-width: 768px) { + .bd-sidebar { + border-right: 1px solid rgba(0, 0, 0, 0.1); + } + @supports ((position: -webkit-sticky) or (position: sticky)) { + .bd-sidebar { + position: -webkit-sticky; + position: sticky; + top: var(--navbar-height); + z-index: 1000; + height: calc(100vh - var(--navbar-height)); + } + } +} + +@media (min-width: 1200px) { + .bd-sidebar { + -ms-flex: 0 1 320px; + flex: 0 1 320px; + } +} + +.bd-links { + padding-top: 1rem; + padding-bottom: 1rem; + margin-right: -15px; + margin-left: -15px; +} + +@media (min-width: 768px) { + @supports ((position: -webkit-sticky) or (position: sticky)) { + .bd-links { + max-height: calc(100vh - 9rem); + overflow-y: auto; + } + } +} + +@media (min-width: 768px) { + .bd-links { + display: block !important; + } +} + +.bd-sidenav { + display: none; +} + +.bd-toc-link { + display: block; + padding: 0.25rem 1.5rem; + font-weight: 400; + color: rgba(0, 0, 0, 0.65); +} + +.bd-toc-link:hover { + color: rgba(0, 0, 0, 0.85); + text-decoration: none; +} + +.bd-toc-item.active { + margin-bottom: 1rem; +} + +.bd-toc-item.active:not(:first-child) { + margin-top: 1rem; +} + +.bd-toc-item.active > .bd-toc-link { + color: rgba(0, 0, 0, 0.85); +} + +.bd-toc-item.active > .bd-toc-link:hover { + background-color: transparent; +} + +.bd-toc-item.active > .bd-sidenav { + display: block; +} + +.bd-sidebar .nav > li > a { + display: block; + padding: 0.25rem 1.5rem; + font-size: 90%; + color: rgba(0, 0, 0, 0.65); +} + +.bd-sidebar .nav > li > a:hover { + color: rgba(0, 0, 0, 0.85); + text-decoration: none; + background-color: transparent; +} + +.bd-sidebar .nav > .active > a, +.bd-sidebar .nav > .active:hover > a { + font-weight: 400; + color: #130654; + /* adjusted from original + color: rgba(0, 0, 0, 0.85); + background-color: transparent; */ +} + +.bd-sidebar .nav > li > ul { + list-style: none; + padding: 0.25rem 1.5rem; +} + +.bd-sidebar .nav > li > ul > li > a { + display: block; + padding: 0.25rem 1.5rem; + font-size: 90%; + color: rgba(0, 0, 0, 0.65); +} + +.bd-sidebar .nav > li > ul > .active > a, +.bd-sidebar .nav > li > ul > .active:hover > a { + font-weight: 400; + color: #542437; +} + +dt:target { + background-color: initial; +} + +/* Offsetting anchored elements within the main content to adjust for fixed header + https://github.com/pandas-dev/pandas-sphinx-theme/issues/6 */ +main *:target::before { + display: block; + content: ''; + height: var(--navbar-height); + margin-top: calc(-1 * var(--navbar-height)); +} + +body { + /* Add padding to body to avoid overlap with navbar. */ + padding-top: var(--navbar-height); + width: 100%; +} + +/* adjust toc font sizes to improve overview */ +.toc-h2 { + font-size: 0.85rem; +} + +.toc-h3 { + font-size: 0.75rem; +} + +.toc-h4 { + font-size: 0.65rem; +} + +.toc-entry > .nav-link.active { + font-weight: 400; + color: #542437; + background-color: transparent; + border-left: 2px solid #563d7c; +} + +.nav-link:hover { + border-style: none; +} + +/* Collapsing of the TOC sidebar while scrolling */ + +/* Nav: hide second level (shown on .active) */ +.bd-toc .nav .nav { + display: none; +} + +.bd-toc .nav > .active > ul { + display: block; } From ce3bbe4a51e7be625518f58f64190c92fb700e27 Mon Sep 17 00:00:00 2001 From: Anderson Banihirwe Date: Tue, 16 Mar 2021 06:54:28 -0600 Subject: [PATCH 2/6] [skip-ci] From d4bdba589e4c60a96a1c20f590beec763c383ef6 Mon Sep 17 00:00:00 2001 From: Anderson Banihirwe Date: Tue, 16 Mar 2021 08:16:50 -0600 Subject: [PATCH 3/6] [skip-ci] Reset left and right margins for the time being --- doc/_static/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/doc/_static/style.css b/doc/_static/style.css index cb4c4233482..82eb609aafc 100644 --- a/doc/_static/style.css +++ b/doc/_static/style.css @@ -8,10 +8,10 @@ table.docutils td { } /* Reduce left and right margins */ - +/* .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1600px !important; -} +} */ /* Copied from From 92c901bab836d4a53154bdb0efaec6c9503c7143 Mon Sep 17 00:00:00 2001 From: Anderson Banihirwe Date: Tue, 16 Mar 2021 09:42:47 -0600 Subject: [PATCH 4/6] [skip-ci] Reduce max-width to 1400px --- doc/_static/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/doc/_static/style.css b/doc/_static/style.css index 82eb609aafc..d948e8bf806 100644 --- a/doc/_static/style.css +++ b/doc/_static/style.css @@ -8,10 +8,10 @@ table.docutils td { } /* Reduce left and right margins */ -/* + .container, .container-lg, .container-md, .container-sm, .container-xl { - max-width: 1600px !important; -} */ + max-width: 1400px !important; +} /* Copied from From 437d4b874dfd79b3dd071b7495b907c059e9c225 Mon Sep 17 00:00:00 2001 From: Anderson Banihirwe Date: Tue, 16 Mar 2021 18:51:14 -0600 Subject: [PATCH 5/6] [skip-ci] Reduce max width --- doc/_static/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/_static/style.css b/doc/_static/style.css index d948e8bf806..35179432b3a 100644 --- a/doc/_static/style.css +++ b/doc/_static/style.css @@ -10,7 +10,7 @@ table.docutils td { /* Reduce left and right margins */ .container, .container-lg, .container-md, .container-sm, .container-xl { - max-width: 1400px !important; + max-width: 1300px !important; } From d443a48fec8051e5a3a57e6c6a5d76d23d9e49fe Mon Sep 17 00:00:00 2001 From: Anderson Banihirwe Date: Tue, 16 Mar 2021 19:18:12 -0600 Subject: [PATCH 6/6] [skip-ci] Increase width a little --- doc/_static/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/_static/style.css b/doc/_static/style.css index 35179432b3a..833b11a83ab 100644 --- a/doc/_static/style.css +++ b/doc/_static/style.css @@ -10,7 +10,7 @@ table.docutils td { /* Reduce left and right margins */ .container, .container-lg, .container-md, .container-sm, .container-xl { - max-width: 1300px !important; + max-width: 1350px !important; }