diff options
| author | Mark Otto <markdotto@gmail.com> | 2022-05-13 20:11:09 +0300 |
|---|---|---|
| committer | XhmikosR <xhmikosr@gmail.com> | 2022-05-13 20:16:05 +0300 |
| commit | 46bb9e78d74e0c7f4fa6f6fa611f3d9f8f28860b (patch) | |
| tree | 0fc94a55ee39f4f28f5753aca373caf045feaf0f | |
| parent | ab37f63b3d7968d039b7961bca3fb29fe132a40e (diff) | |
Fix homepage npm install snippet
| -rw-r--r-- | site/assets/scss/_masthead.scss | 15 | ||||
| -rw-r--r-- | site/layouts/partials/home/masthead.html | 6 |
2 files changed, 15 insertions, 6 deletions
diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 4bb356e103..76d003c95e 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -26,13 +26,22 @@ } .highlight { - padding: .5rem 4rem .5rem 1rem; - line-height: 1.25; + width: 100%; + padding: .5rem 1rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; background-color: rgba(var(--bs-body-color-rgb), .075); @include border-radius(.5rem); + + @include media-breakpoint-up(lg) { + padding-right: 4rem; + } } .btn-clipboard { - margin-top: .4rem; + position: absolute; + top: -.125rem; + right: 0; background-color: transparent; } diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html index 4f91c2b07e..ac35d43a3d 100644 --- a/site/layouts/partials/home/masthead.html +++ b/site/layouts/partials/home/masthead.html @@ -10,9 +10,9 @@ <p class="lead mb-4"> Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. </p> - <div class="d-flex flex-column flex-md-row align-items-md-stretch justify-content-md-center gap-3 mb-4"> - <div class="d-inline-block v-align-middle fs-5" style="min-width: fit-content;"> - {{ highlight (printf ("npm install bootstrap@%s") .Site.Params.current_version) "sh" "" }} + <div class="d-flex flex-column flex-lg-row align-items-md-stretch justify-content-md-center gap-3 mb-4"> + <div class="d-inline-block v-align-middle fs-5"> + {{ highlight (printf ("npm i bootstrap@%s") .Site.Params.current_version) "sh" "" }} </div> <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');"> <svg class="bi me-2" aria-hidden="true"><use xlink:href="#book-half"></use></svg> |