diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 770815a5aa..a8ea52c869 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -2,10 +2,6 @@ padding: 3rem 0; background: linear-gradient(165deg, lighten($bd-purple-light, 16%) 50%, $white 50%); - @include media-breakpoint-up(sm) { - padding: 5rem 0; - } - h1 { @include font-size(4rem); line-height: 1; diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 1ba779f937..954304c3fb 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -1,22 +1,21 @@ .bd-navbar { - padding: .625rem 0; + padding: .75rem 0; background-color: $bd-purple-bright; - @include media-breakpoint-down(lg) { - .navbar-nav-scroll { - width: 100%; + .navbar-toggler { + padding: 0; + border: 0; - .navbar-nav { - margin: -.5rem 0; - overflow-x: auto; - white-space: nowrap; - -webkit-overflow-scrolling: touch; - } + .bi { + width: 2rem; + fill: currentColor; } } .navbar-nav { .nav-link { + padding-right: $spacer / 4; + padding-left: $spacer / 4; color: rgba($white, .85); &:hover, diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss index 8f7db2e575..0575a465e5 100644 --- a/site/assets/scss/_sidebar.scss +++ b/site/assets/scss/_sidebar.scss @@ -1,4 +1,11 @@ +.bd-sidebar { + @include media-breakpoint-down(md) { + margin: 0 -.75rem 1rem; + } +} + .bd-links { + overflow: auto; font-weight: 600; @include media-breakpoint-up(md) { @@ -14,6 +21,14 @@ overflow-y: auto; } + > ul { + @include media-breakpoint-down(md) { + padding: 1.5rem .75rem; + background-color: $gray-100; + border-bottom: 1px solid $gray-200; + } + } + a { padding: .1875rem .5rem; margin-top: .125rem; diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss index c65b665db3..566bc17fdc 100644 --- a/site/assets/scss/_subnav.scss +++ b/site/assets/scss/_subnav.scss @@ -25,12 +25,32 @@ } .bd-search { - @include media-breakpoint-down(md) { - width: 100%; - } - .form-control:focus { border-color: $bd-purple-bright; box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); } } + +.bd-sidebar-toggle { + color: $text-muted; + + &:hover, + &:focus { + color: $bd-purple-bright; + } + + &:focus { + box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); + } + + .bi { + fill: currentColor; + } + + .bi-collapse { display: none; } + + &:not(.collapsed) { + .bi-expand { display: none; } + .bi-collapse { display: inline-block; } + } +} diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index d54e2a9fde..5a5b643661 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -9,13 +9,13 @@ {{ partial "docs-navbar" . }} {{ partial "docs-subnav" . }} -
+
-
+
View on GitHub

{{ .Title | markdownify }}

@@ -25,10 +25,10 @@
{{ if (eq .Page.Params.toc true) }} -
- On this page - {{ .TableOfContents }} -
+
+ On this page + {{ .TableOfContents }} +
{{ end }}
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html index ac0c384439..e62c050f50 100644 --- a/site/layouts/partials/docs-navbar.html +++ b/site/layouts/partials/docs-navbar.html @@ -1,58 +1,67 @@ -
+
diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html index 8fd77361f5..776da2db12 100644 --- a/site/layouts/partials/docs-sidebar.html +++ b/site/layouts/partials/docs-sidebar.html @@ -2,7 +2,7 @@ {{- $url := split .Permalink "/" -}} {{- $page_slug := index $url (sub (len $url) 2) -}} -
    +
      {{- range $group := .Site.Data.sidebar -}} {{- $link := $group.title -}} {{- $link_slug := $link | urlize -}} diff --git a/site/layouts/partials/docs-subnav.html b/site/layouts/partials/docs-subnav.html index 4929c83b10..31000ccfbe 100644 --- a/site/layouts/partials/docs-subnav.html +++ b/site/layouts/partials/docs-subnav.html @@ -1,13 +1,14 @@ -