diff options
Diffstat (limited to 'site/layouts/_default')
| -rw-r--r-- | site/layouts/_default/_markup/render-heading.html | 7 | ||||
| -rw-r--r-- | site/layouts/_default/_markup/render-image.html | 8 | ||||
| -rw-r--r-- | site/layouts/_default/baseof.html | 3 | ||||
| -rw-r--r-- | site/layouts/_default/docs.html | 48 | ||||
| -rw-r--r-- | site/layouts/_default/examples.html | 99 | ||||
| -rw-r--r-- | site/layouts/_default/home.html | 10 | ||||
| -rw-r--r-- | site/layouts/_default/single.html | 42 |
7 files changed, 165 insertions, 52 deletions
diff --git a/site/layouts/_default/_markup/render-heading.html b/site/layouts/_default/_markup/render-heading.html new file mode 100644 index 000000000..d115f85dc --- /dev/null +++ b/site/layouts/_default/_markup/render-heading.html @@ -0,0 +1,7 @@ +{{- $id := .Anchor | safeURL -}} +{{- $text := .Text | safeHTML -}} +<h{{ .Level }} id="{{ $id }}">{{ $text }} +{{- if and (ge .Level .Page.Site.Params.anchors.min) (le .Level .Page.Site.Params.anchors.max) }}{{" " -}} +<a class="anchor-link" href="#{{ $id }}" aria-label="Link to this section: {{ $text }}"></a> +{{- end -}} +</h{{ .Level }}> diff --git a/site/layouts/_default/_markup/render-image.html b/site/layouts/_default/_markup/render-image.html new file mode 100644 index 000000000..fd089f7be --- /dev/null +++ b/site/layouts/_default/_markup/render-image.html @@ -0,0 +1,8 @@ +{{- $originalSrc := .Destination | safeURL -}} +{{- $localImgPath := path.Join "/site/static/docs" site.Params.docs_version $originalSrc -}} +{{- /* This shouldn't be needed but we have a weird folder structure with version included... */ -}} +{{- $src := urls.JoinPath "/docs" site.Params.docs_version $originalSrc -}} +{{- $config := imageConfig $localImgPath -}} +{{- $classes := "d-block img-fluid" -}} + +<img src="{{ $src }}" class="{{ $classes }}" alt="{{ .Text }}" width="{{ $config.Width }}" height="{{ $config.Height }}" loading="lazy"> diff --git a/site/layouts/_default/baseof.html b/site/layouts/_default/baseof.html index 713ab2864..0714faf3a 100644 --- a/site/layouts/_default/baseof.html +++ b/site/layouts/_default/baseof.html @@ -1,10 +1,11 @@ <!doctype html> -<html lang="en"> +<html lang="en" data-bs-theme="auto"> <head> {{ partial "header" . }} </head> {{ block "body_override" . }}<body>{{ end }} {{ partial "skippy" . }} + {{ partial "icons" . }} {{ partial "docs-navbar" . }} diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index dd063c5dc..3f9463bdd 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -1,29 +1,52 @@ +{{ define "body_override" }}<body{{ if (eq .Page.Params.toc true) }} data-bs-spy="scroll" data-bs-target="#TableOfContents"{{ end }}>{{ end }} {{ define "main" }} - {{ partial "docs-subnav" . }} - - <div class="container-xxl my-md-4 bd-layout"> + <div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout"> <aside class="bd-sidebar"> - {{ partial "docs-sidebar" . }} + <div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel"> + <div class="offcanvas-header border-bottom"> + <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5> + <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button> + </div> + + <div class="offcanvas-body"> + {{ partial "docs-sidebar" . }} + </div> + </div> </aside> <main class="bd-main order-1"> - <div class="bd-intro ps-lg-4"> + <div class="bd-intro pt-2 ps-lg-2"> <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between"> - <a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="{{ .Site.Params.repo }}/blob/main/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a> - <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1> + <div class="mb-3 mb-md-0 d-flex text-nowrap"> + {{- /* This is needed because we want to show the badge if show_badge isn't present or is set to false */ -}} + {{- if (or (and (.Page.Params.added) (not (isset .Page.Params.added "show_badge"))) (and (.Page.Params.added) (isset .Page.Params.added "show_badge") (not (eq .Page.Params.added.show_badge false)))) -}} + <small class="d-inline-flex px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 me-2">Added in v{{ .Page.Params.added.version }}</small> + {{- end -}} + <a class="btn btn-sm btn-bd-light rounded-2" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener"> + View on GitHub + </a> + </div> + <h1 class="bd-title mb-0" id="content">{{ .Title | markdownify }}</h1> </div> <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p> {{ partial "ads" . }} </div> {{ if (eq .Page.Params.toc true) }} - <div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted"> - <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong> - {{ .TableOfContents }} + <div class="bd-toc mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary"> + <button class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents"> + On this page + <svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg> + </button> + <strong class="d-none d-md-block h6 my-2 ms-3">On this page</strong> + <hr class="d-none d-md-block my-2 ms-3"> + <div class="collapse bd-toc-collapse" id="tocContents"> + {{ .TableOfContents }} + </div> </div> {{ end }} - <div class="bd-content ps-lg-4"> + <div class="bd-content ps-lg-2"> {{ if .Page.Params.sections }} <div class="row g-3"> {{ range .Page.Params.sections }} @@ -44,6 +67,7 @@ {{ end }} {{ define "footer" }} {{ range .Page.Params.extra_js -}} - <script{{ with .async }} async{{ end }} src="{{ .src }}"></script> + <script{{ with .async }} async{{ end }}{{ with .defer }} defer{{ end }} src="{{ .src }}"></script> {{- end -}} + <div class="position-fixed" aria-hidden="true"><input type="text" tabindex="-1"></div> {{ end }} diff --git a/site/layouts/_default/examples.html b/site/layouts/_default/examples.html index 948c3756f..1c31c5aea 100644 --- a/site/layouts/_default/examples.html +++ b/site/layouts/_default/examples.html @@ -1,5 +1,5 @@ <!doctype html> -<html {{ if eq .Page.Params.direction "rtl" }}lang="ar" dir="rtl"{{ else }}lang="en"{{ end }}{{ with .Page.Params.html_class }} class="{{ . }}"{{ end }}> +<html {{ if eq .Page.Params.direction "rtl" }}lang="ar" dir="rtl"{{ else }}lang="en"{{ end }}{{ with .Page.Params.html_class }} class="{{ . }}"{{ end }} data-bs-theme="auto"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> @@ -14,6 +14,9 @@ <meta name="robots" content="{{ . }}"> {{- end }} + {{- $colorModeJS := urls.JoinPath "/docs" $.Site.Params.docs_version "assets/js/color-modes.js" -}} + <script src="{{ $colorModeJS }}"></script> + {{ partial "stylesheet" . }} {{ partial "favicons" . }} @@ -31,26 +34,98 @@ font-size: 3.5rem; } } + + .b-example-divider { + width: 100%; + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); + } + + .b-example-vr { + flex-shrink: 0; + width: 1.5rem; + height: 100vh; + } + + .bi { + vertical-align: -.125em; + fill: currentColor; + } + + .nav-scroller { + position: relative; + z-index: 2; + height: 2.75rem; + overflow-y: hidden; + } + + .nav-scroller .nav { + display: flex; + flex-wrap: nowrap; + padding-bottom: 1rem; + margin-top: -1px; + overflow-x: auto; + text-align: center; + white-space: nowrap; + -webkit-overflow-scrolling: touch; + } + + .btn-bd-primary { + --bd-violet-bg: #712cf9; + --bd-violet-rgb: 112.520718, 44.062154, 249.437846; + + --bs-btn-font-weight: 600; + --bs-btn-color: var(--bs-white); + --bs-btn-bg: var(--bd-violet-bg); + --bs-btn-border-color: var(--bd-violet-bg); + --bs-btn-hover-color: var(--bs-white); + --bs-btn-hover-bg: #6528e0; + --bs-btn-hover-border-color: #6528e0; + --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); + --bs-btn-active-color: var(--bs-btn-hover-color); + --bs-btn-active-bg: #5a23c8; + --bs-btn-active-border-color: #5a23c8; + } + + .bd-mode-toggle { + z-index: 1500; + } + + .bd-mode-toggle .bi { + width: 1em; + height: 1em; + } + + .bd-mode-toggle .dropdown-menu .active .bi { + display: block !important; + } </style> - {{ range .Page.Params.extra_css }} + {{ range .Page.Params.extra_css -}} {{ "<!-- Custom styles for this template -->" | safeHTML }} <link href="{{ . }}" rel="stylesheet"> {{- end }} </head> <body{{ with .Page.Params.body_class }} class="{{ . }}"{{ end }}> - {{ .Content }} + {{ partial "examples/icons" . }} - {{ if ne .Page.Params.include_js false -}} - {{- if eq hugo.Environment "production" -}} - <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }} crossorigin="anonymous"></script> - {{- else -}} - <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script> - {{- end }} + <div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"> + {{ partial "theme-toggler" . }} + </div> - {{ range .Page.Params.extra_js -}} - <script{{ with .async }} async{{ end }} src="{{ .src }}"{{ with .integrity }} {{ printf "integrity=%q" . | safeHTMLAttr }} crossorigin="anonymous"{{ end }}></script> - {{- end -}} + {{ .Content }} + + {{- if hugo.IsProduction -}} + <script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }}></script> + {{- else -}} + <script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script> {{- end }} + + {{ range .Page.Params.extra_js -}} + <script{{ with .async }} async{{ end }}{{ with .defer }} defer{{ end }} src="{{ .src }}"{{ with .integrity }} {{ printf "integrity=%q" . | safeHTMLAttr }} crossorigin="anonymous"{{ end }}></script> + {{- end -}} </body> </html> diff --git a/site/layouts/_default/home.html b/site/layouts/_default/home.html index 28bcf0c64..878e77474 100644 --- a/site/layouts/_default/home.html +++ b/site/layouts/_default/home.html @@ -1,7 +1,15 @@ {{ define "main" }} <main> {{ partial "home/masthead" . }} - {{ partial "home/masthead-followup" . }} + <div class="container-xxl bd-gutter masthead-followup"> + {{ partial "home/get-started" . }} + {{ partial "home/customize" . }} + {{ partial "home/css-variables" . }} + {{ partial "home/components-utilities" . }} + {{ partial "home/plugins" . }} + {{ partial "home/icons" . }} + {{ partial "home/themes" . }} + </div> </main> {{ .Content }} diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html index 8ba99c718..d0d5e6b5d 100644 --- a/site/layouts/_default/single.html +++ b/site/layouts/_default/single.html @@ -1,16 +1,21 @@ {{ define "main" }} <header class="py-5 border-bottom"> - <div class="container pt-md-1 pb-md-4"> + <div class="container-xxl bd-gutter pt-md-1 pb-md-4"> <div class="row"> <div class="col-xl-8"> <h1 class="bd-title mt-0">{{ .Title | markdownify }}</h1> <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p> - {{ if eq .Title "Examples" }} - <div class="d-flex flex-column flex-sm-row"> - <a href="{{ .Site.Params.download.dist_examples }}" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">Download examples</a> - <a href="{{ .Site.Params.download.source }}" class="btn btn-lg btn-outline-secondary mt-3 mt-sm-0 ms-sm-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a> + {{ if eq .Title "Examples" -}} + <div class="d-flex flex-column flex-md-row gap-3"> + <a href="{{ .Site.Params.download.dist_examples }}" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold"> + <svg class="bi me-2" aria-hidden="true"><use xlink:href="#box-seam"></use></svg> + Download examples + </a> + <a href="{{ .Site.Params.download.source }}" class="btn btn-lg bd-btn-lg btn-outline-secondary"> + Download source code + </a> </div> - {{ end }} + {{- end }} </div> <div class="col-xl-4 d-lg-flex justify-content-xl-end"> {{ partial "ads" . }} @@ -20,28 +25,13 @@ </header> <main class="bd-content order-1 py-5" id="content"> - <div class="container"> + <div class="container-xxl bd-gutter"> {{ .Content }} - {{ if eq .Title "Examples" }} - <hr class="my-5"> - <div class="container"> - <div class="text-center"> - <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger"> - {{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }} - </div> - <h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2> - <p class="col-md-10 col-lg-8 mx-auto lead"> - Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools. - </p> - <a href="{{ .Site.Params.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a> - </div> - <img class="d-block img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png, - /docs/{{ .Site.Params.docs_version }}/assets/img/[email protected] 2x" - src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png" - alt="Bootstrap Themes" width="1150" height="320" loading="lazy"> - </div> - {{ end }} + {{ if eq .Title "Examples" -}} + {{ partial "examples/main" . }} + {{ partial "examples/bs-themes" . }} + {{- end }} </div> </main> {{ end }} |