Redesign homepage docs

- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils

site/assets/scss/_ads.scss

@@ -14,7 +14,7 @@
   @include font-size(.8125rem);
   line-height: 1.4;
   text-align: left;
-  background-color: rgba(0, 0, 0, .05);
+  background-color: $gray-100;
 
   a {
     color: $gray-800;
@@ -22,8 +22,7 @@
   }
 
   @include media-breakpoint-up(sm) {
-    max-width: 330px;
-    @include border-radius(4px);
+    @include border-radius(.5rem);
   }
 }
 

site/assets/scss/_buttons.scss

@@ -12,6 +12,7 @@
   --bs-btn-hover-bg: #{shade-color($bd-violet, 20%)};
   --bs-btn-hover-border-color: #{shade-color($bd-violet, 20%)};
   --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+  --bs-btn-border-radius: .5rem;
 }
 // scss-docs-end btn-css-vars-example
 

site/assets/scss/_clipboard-js.scss

@@ -18,20 +18,18 @@
 
 .btn-clipboard {
   position: absolute;
-  top: .65rem;
-  right: .65rem;
+  top: .75em;
+  right: .5em;
   z-index: 10;
   display: block;
-  padding: .25rem .5rem;
-  @include font-size(.65em);
-  color: $primary;
-  background-color: $white;
-  border: 1px solid;
-  @include border-radius();
+  padding: .5em .75em .625em;
+  line-height: 1;
+  color: $gray-900;
+  background-color: $gray-100;
+  border: 0;
+  @include border-radius(.25rem);
 
-  &:hover,
-  &:focus {
-    color: $white;
-    background-color: $primary;
+  &:hover {
+    color: $primary;
   }
 }

site/assets/scss/_component-examples.scss

@@ -315,12 +315,12 @@
 //
 
 .highlight {
-  padding: var(--bs-gutter-x) $bd-gutter-x;
+  padding: .75rem $bd-gutter-x;
   margin-bottom: 1rem;
   background-color: $gray-100;
 
   @include media-breakpoint-up(sm) {
-    padding: 1rem 1.5rem;
+    padding: .75rem 1.5rem;
   }
 
   pre {
@@ -330,6 +330,11 @@
     white-space: pre;
     background-color: transparent;
     border: 0;
+
+    // Undo tabindex that's automatically added by Hugo
+    &:focus {
+      outline: 0;
+    }
   }
 
   pre code {

site/assets/scss/_content.scss

@@ -79,3 +79,35 @@
 .bd-bg-purple-bright {
   background-color: $bd-violet;
 }
+
+.bi {
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+}
+
+.icon-link {
+  display: flex;
+  align-items: center;
+  text-decoration-color: rgba($primary, .5);
+  text-underline-offset: .5rem;
+  backface-visibility: hidden;
+
+  .bi {
+    width: 1.5em;
+    height: 1.5em;
+    transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
+  }
+
+  &:hover {
+    .bi {
+      transform: translate3d(5px, 0, 0);
+    }
+  }
+}
+
+.border-lg-start {
+  @include media-breakpoint-up(lg) {
+    border-left: $border-width solid $border-color;
+  }
+}

site/assets/scss/_layout.scss

@@ -1,6 +1,5 @@
 .bd-layout {
-  padding-right: $bd-gutter-x;
-  padding-left: $bd-gutter-x;
+  --bs-gutter-x: #{$bd-gutter-x};
 
   @include media-breakpoint-up(md) {
     display: grid;

site/assets/scss/_masthead.scss

@@ -7,32 +7,69 @@
     line-height: 1;
   }
 
-  p:not(.lead) {
-    color: $gray-700;
-  }
-
-  .btn {
-    padding: .8rem 2rem;
-    font-weight: 600;
-  }
   .lead {
-    @include font-size(1.5rem);
+    @include font-size(1rem);
     font-weight: 400;
     color: $gray-700;
   }
+
+  .highlight {
+    padding: .5rem 4rem .5rem 1rem;
+    margin-bottom: 0;
+    line-height: 1.25;
+    @include border-radius(.5rem);
+  }
+  .btn-clipboard {
+    top: .5rem;
+  }
+
+  #carbonads { // stylelint-disable-line selector-max-id
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  @include media-breakpoint-up(md) {
+    .lead {
+      @include font-size(1.5rem);
+    }
+  }
 }
 
-@include media-breakpoint-up(md) {
-  .mw-md-75 { max-width: 75%; }
+.masthead-followup {
+  .lead {
+    @include font-size(1rem);
+  }
+
+  .highlight {
+    @include border-radius(.5rem);
+  }
+
+  @include media-breakpoint-up(md) {
+    .lead {
+      @include font-size(1.25rem);
+    }
+  }
+}
+
+.bd-btn-lg {
+  padding: .8rem 2rem;
 }
 
 .masthead-followup-icon {
-  padding: .75rem;
-  background-image: linear-gradient(to bottom right, rgba(255, 255, 255, .2), rgba(255, 255, 255, .01));
-  @include border-radius(.75rem);
-  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .1);
+  padding: 1rem;
+  background-color: currentColor;
+  background-image: linear-gradient(to bottom right, rgba(255, 255, 255, .01), currentColor);
+  background-blend-mode: multiply;
+  @include border-radius(1rem);
+  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15);
+
+  svg { color: #fff; }
 }
 
 .masthead-followup-svg {
   filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .125));
 }
+
+.masthead-notice {
+  background-color: #d2f4ea;
+}

site/assets/scss/_sidebar.scss

@@ -1,6 +1,6 @@
 .bd-sidebar {
   @include media-breakpoint-down(md) {
-    margin: 0 ($bd-gutter-x * -1) 1rem;
+    margin: 0 calc(var(--bs-gutter-x) * -.5) 1rem; // stylelint-disable-line function-disallowed-list
   }
 }
 

site/assets/scss/_syntax.scss

@@ -88,7 +88,7 @@
   .language-bash,
   .language-sh {
     &::before {
-      color: #009;
+      color: #777;
       content: "$ ";
       user-select: none;
     }

site/assets/scss/_variables.scss

@@ -1,7 +1,7 @@
 // stylelint-disable scss/dollar-variable-default
 
 // Local docs variables
-$bd-purple:        #563d7c;
+$bd-purple:        #4c0bce;
 $bd-violet:        lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
 $bd-purple-light:  lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
 $bd-accent:       #ffe484;