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 @@

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.

-
-
- {{ highlight (printf ("npm install bootstrap@%s") .Site.Params.current_version) "sh" "" }} +
+
+ {{ highlight (printf ("npm i bootstrap@%s") .Site.Params.current_version) "sh" "" }}