aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--site/assets/scss/_component-examples.scss8
-rw-r--r--site/assets/scss/_layout.scss3
-rw-r--r--site/assets/scss/_navbar.scss12
-rw-r--r--site/assets/scss/_sidebar.scss2
-rw-r--r--site/assets/scss/_subnav.scss11
-rw-r--r--site/layouts/partials/docs-navbar.html110
6 files changed, 87 insertions, 59 deletions
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index f93f1ee98..2f627b932 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -85,7 +85,7 @@
.bd-example {
position: relative;
padding: 1rem;
- margin: 1rem (-$grid-gutter-width * .5) 0;
+ margin: 1rem -1.25rem 0;
border: solid $gray-300;
border-width: 1px 0 0;
@include clearfix();
@@ -313,7 +313,7 @@
//
.highlight {
- padding: 1rem;
+ padding: var(--bs-gutter-x);
margin-bottom: 1rem;
background-color: $gray-100;
@@ -338,8 +338,8 @@
}
.bd-content .highlight {
- margin-right: (-$grid-gutter-width * .5);
- margin-left: (-$grid-gutter-width * .5);
+ margin-right: -1.25rem;
+ margin-left: -1.25rem;
@include media-breakpoint-up(sm) {
margin-right: 0;
diff --git a/site/assets/scss/_layout.scss b/site/assets/scss/_layout.scss
index 707c4949d..26098fa25 100644
--- a/site/assets/scss/_layout.scss
+++ b/site/assets/scss/_layout.scss
@@ -1,4 +1,7 @@
.bd-layout {
+ padding-right: 1.25rem;
+ padding-left: 1.25rem;
+
@include media-breakpoint-up(md) {
display: grid;
gap: $grid-gutter-width;
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 053cadf2e..73d20cab0 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -1,4 +1,7 @@
.bd-navbar {
+ --bs-gutter-x: 1.25rem;
+ --bs-gutter-y: 1.25rem;
+
padding: .75rem 0;
background-color: $bd-purple-bright;
@@ -29,4 +32,13 @@
width: 1rem;
height: 1rem;
}
+
+ .offcanvas {
+ background-color: $bd-purple-bright;
+ border-left: 0;
+
+ @include media-breakpoint-down(md) {
+ box-shadow: $box-shadow-lg;
+ }
+ }
}
diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
index d893ba9dc..60a7ef884 100644
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -1,6 +1,6 @@
.bd-sidebar {
@include media-breakpoint-down(md) {
- margin: 0 -.75rem 1rem;
+ margin: 0 -1.25rem 1rem;
}
}
diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss
index 8377ff423..4e4fb96f5 100644
--- a/site/assets/scss/_subnav.scss
+++ b/site/assets/scss/_subnav.scss
@@ -1,4 +1,7 @@
.bd-subnavbar {
+ --bs-gutter-x: 1.25rem;
+ --bs-gutter-y: 1.25rem;
+
// The position and z-index are needed for the dropdown to stay on top of the content
position: relative;
z-index: $zindex-sticky;
@@ -31,16 +34,16 @@
position: absolute;
top: .4rem;
right: .4rem;
+ bottom: .4rem;
display: flex;
align-items: center;
justify-content: center;
- height: 1.5rem;
- padding-right: .25rem;
- padding-left: .25rem;
+ padding-right: .3125rem;
+ padding-left: .3125rem;
@include font-size(.75rem);
color: $gray-600;
content: "Ctrl + /";
- border: $border-width solid $border-color;
+ background-color: $gray-100;
@include border-radius(.125rem);
}
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index e120c9c74..6611596e6 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -4,62 +4,72 @@
{{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block my-1" "width" "40" "height" "32") }}
</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
+ <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
{{ partial "icons/hamburger.svg" (dict "class" "bi" "width" "32" "height" "32") }}
</button>
- <div class="collapse navbar-collapse" id="bdNavbar">
- <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2{{ if .IsHome }} active" aria-current="page{{ end }}" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
- </li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2{{ if eq .Page.Layout "docs" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
- </li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2{{ if eq .Page.Title "Examples" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
- </li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="{{ .Site.Params.icons }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
- </li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="{{ .Site.Params.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
- </li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="{{ .Site.Params.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
- </li>
- </ul>
+ <div class="offcanvas offcanvas-end" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel">
+ <div class="offcanvas-header pb-0">
+ <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+ </div>
- <hr class="d-md-none text-white-50">
+ <div class="offcanvas-body pt-0">
+ <hr class="d-md-none text-white-50">
+ <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
+ <li class="nav-item col-6 col-md-auto">
+ <a class="nav-link p-2{{ if .IsHome }} active" aria-current="page{{ end }}" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
+ </li>
+ <li class="nav-item col-6 col-md-auto">
+ <a class="nav-link p-2{{ if eq .Page.Layout "docs" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
+ </li>
+ <li class="nav-item col-6 col-md-auto">
+ <a class="nav-link p-2{{ if eq .Page.Title "Examples" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
+ </li>
+ <li class="nav-item col-6 col-md-auto">
+ <a class="nav-link p-2" href="{{ .Site.Params.icons }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
+ </li>
+ <li class="nav-item col-6 col-md-auto">
+ <a class="nav-link p-2" href="{{ .Site.Params.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
+ </li>
+ <li class="nav-item col-6 col-md-auto">
+ <a class="nav-link p-2" href="{{ .Site.Params.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
+ </li>
+ </ul>
- <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener">
- {{ partial "icons/github.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
- <small class="d-md-none ms-2">GitHub</small>
- </a>
- </li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank" rel="noopener">
- {{ partial "icons/twitter.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
- <small class="d-md-none ms-2">Twitter</small>
- </a>
- </li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="{{ .Site.Params.slack }}" target="_blank" rel="noopener">
- {{ partial "icons/slack.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
- <small class="d-md-none ms-2">Slack</small>
- </a>
- </li>
- <li class="nav-item col-6 col-md-auto">
- <a class="nav-link p-2" href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener">
- {{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
- <small class="d-md-none ms-2">Open Collective</small>
- </a>
- </li>
- </ul>
+ <hr class="d-md-none text-white-50">
- <a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Download</a>
+ <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
+ <li class="nav-item col-6 col-md-auto">
+ <a class="nav-link p-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener">
+ {{ partial "icons/github.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
+ <small class="d-md-none ms-2">GitHub</small>
+ </a>
+ </li>
+ <li class="nav-item col-6 col-md-auto">
+ <a class="nav-link p-2" href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank" rel="noopener">
+ {{ partial "icons/twitter.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
+ <small class="d-md-none ms-2">Twitter</small>
+ </a>
+ </li>
+ <li class="nav-item col-6 col-md-auto">
+ <a class="nav-link p-2" href="{{ .Site.Params.slack }}" target="_blank" rel="noopener">
+ {{ partial "icons/slack.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
+ <small class="d-md-none ms-2">Slack</small>
+ </a>
+ </li>
+ <li class="nav-item col-6 col-md-auto">
+ <a class="nav-link p-2" href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener">
+ {{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
+ <small class="d-md-none ms-2">Open Collective</small>
+ </a>
+ </li>
+ </ul>
+
+ <hr class="d-md-none text-white-50">
+
+ <a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Download</a>
+ </div>
</div>
</nav>
</header>
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 02:32:29 +0000