diff options
Diffstat (limited to 'site/layouts/_default/examples.html')
| -rw-r--r-- | site/layouts/_default/examples.html | 99 |
1 files changed, 87 insertions, 12 deletions
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> |