Add figma link in hero, tweak a few things

5 files changed, 41 insertions, 8 deletions

diff --git a/config.yml b/config.yml
index 290712397..19a3b3bd9 100644
--- a/config.yml
+++ b/config.yml
@@ -70,3 +70,4 @@ params:
   expo:                 "https://expo.getbootstrap.com"
   themes:               "https://themes.getbootstrap.com"
   opencollective:       "https://opencollective.com/bootstrap"
+  icons_figma:          "https://www.figma.com/community/file/1042482994486402696/Bootstrap-Icons"
diff --git a/docs/assets/scss/_syntax.scss b/docs/assets/scss/_syntax.scss
index 5c272c3d0..43cb79199 100644
--- a/docs/assets/scss/_syntax.scss
+++ b/docs/assets/scss/_syntax.scss
@@ -88,7 +88,7 @@
   .language-bash,
   .language-sh {
     &::before {
-      color: var(--bs-gray-100);
+      color: var(--bs-gray-600);
       content: "$ ";
       user-select: none;
     }
diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 7d93dc92d..4a7bd6fbe 100644
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -24,12 +24,14 @@
   padding: 1.25rem;
   margin-bottom: 1.5rem;
   background-color: var(--bs-gray-100);
-  border-radius: .25rem;
+  border-radius: .5rem;
 
   pre {
     margin-bottom: 0;
     scrollbar-width: none;
 
+    &:focus { outline: 0; }
+
     &::-webkit-scrollbar {
       display: none;
     }
@@ -71,15 +73,31 @@
 }
 
 .hero {
-  border-bottom: 1px solid rgba(0, 0, 0, .05);
+  border-bottom: 1px solid rgba(0, 0, 0, .075);
 
-  .highlight pre {
-    padding-right: 4em;
+  .highlight {
     margin-bottom: 0;
-    border-radius: .5rem;
+    color: var(--bs-gray-200);
+    background-color: var(--bs-gray-800);
+
+    pre {
+      margin-bottom: 0;
+
+      @media (min-width: 768px) {
+        padding-right: 4em;
+      }
+    }
   }
+
   .btn-clipboard {
     top: .625em;
+    color: var(--bs-gray-200);
+    background-color: var(--bs-gray-800);
+  }
+
+  .btn {
+    padding: 1rem 1.25rem;
+    border-radius: .5rem;
   }
 
   hr {
diff --git a/docs/layouts/partials/home/hero.html b/docs/layouts/partials/home/hero.html
index ea6a99d8a..22b118998 100644
--- a/docs/layouts/partials/home/hero.html
+++ b/docs/layouts/partials/home/hero.html
@@ -14,8 +14,14 @@
         <h1 class="f0">Bootstrap Icons</h1>
         <p class="mb-4 f3 font-weight-normal">Free, high quality, open source icon library with over 1,600 icons. Include them anyway you like—SVGs, SVG sprite, or web fonts. Use them with or without <a href="{{ .Site.Params.main }}/">Bootstrap</a> in any project.</p>
 
-        <div class="fs-5 d-inline-block mb-3">
-          {{ highlight "npm i bootstrap-icons" "sh" "" }}
+        <div class="d-flex flex-column flex-md-row align-items-stretch justify-content-center justify-content-md-start mb-5 fs-5">
+          <div class="fs-5 d-inline-block mb-3 me-md-3 mb-md-0">
+            {{ highlight "npm i bootstrap-icons" "sh" "" }}
+          </div>
+          <a class="btn btn-lg btn-outline-dark d-flex align-items-center justify-content-center" href="{{ .Site.Params.icons_figma }}" target="_blank" rel="noopener">
+            {{ partial "icons/figma.svg" (dict "class" "me-2" "width" "18" "height" "24") }}
+            Open in Figma
+          </a>
         </div>
 
         {{ partialCached "ads" . }}
diff --git a/docs/layouts/partials/icons/figma.svg b/docs/layouts/partials/icons/figma.svg
new file mode 100644
index 000000000..2d22b215d
--- /dev/null
+++ b/docs/layouts/partials/icons/figma.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 288 432" role="img">
+  <rect width="95.0226" height="142.534" fill="black" fill-opacity="0" transform="translate(1.46603 2.19946) scale(3)"/>
+  <path d="M144 216C144 176.641 175.907 144.733 215.267 144.733V144.733C254.626 144.733 286.534 176.641 286.534 216V216C286.534 255.36 254.626 287.267 215.267 287.267V287.267C175.907 287.267 144 255.36 144 216V216Z" fill="#1ABCFE"/>
+  <path d="M1.46603 358.534C1.46603 319.175 33.3733 287.267 72.733 287.267H144V358.534C144 397.894 112.093 429.801 72.733 429.801V429.801C33.3733 429.801 1.46603 397.894 1.46603 358.534V358.534Z" fill="#0ACF83"/>
+  <path d="M144 2.19946V144.733H215.267C254.627 144.733 286.534 112.826 286.534 73.4664V73.4664C286.534 34.1068 254.627 2.19946 215.267 2.19946L144 2.19946Z" fill="#FF7262"/>
+  <path d="M1.46603 73.4664C1.46603 112.826 33.3733 144.733 72.733 144.733L144 144.733L144 2.19941L72.733 2.19941C33.3733 2.19941 1.46603 34.1067 1.46603 73.4664V73.4664Z" fill="#F24E1E"/>
+  <path d="M1.46603 216C1.46603 255.36 33.3733 287.267 72.733 287.267H144L144 144.733L72.733 144.733C33.3733 144.733 1.46603 176.641 1.46603 216V216Z" fill="#A259FF"/>
+</svg>