From a809730484892d54469fc077f01e1c89fd2a5a48 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 31 Jul 2019 20:07:32 -0700
Subject: hero update and type tweaks

---
 _config.yml               |  1 +
 docs/_sass/_ads.scss      | 43 +++++++++++++++++++++++++++++++++++++++++++
 docs/assets/css/docs.scss |  9 ++++++---
 docs/index.html           | 17 ++++++++++-------
 4 files changed, 60 insertions(+), 10 deletions(-)
 create mode 100644 docs/_sass/_ads.scss

diff --git a/_config.yml b/_config.yml
index 2bcf9a531..301535dcd 100644
--- a/_config.yml
+++ b/_config.yml
@@ -11,6 +11,7 @@ package_repo: https://github.com/twbs/icons/
 current_version: "4.3.1"
 docs_version:    "4.3"
 
+main:            "https://getbootstrap.com/"
 repo:            "https://github.com/twbs/bootstrap"
 twitter:         "getbootstrap"
 slack:           "https://bootstrap-slack.herokuapp.com"
diff --git a/docs/_sass/_ads.scss b/docs/_sass/_ads.scss
new file mode 100644
index 000000000..e084e20d7
--- /dev/null
+++ b/docs/_sass/_ads.scss
@@ -0,0 +1,43 @@
+#carbonads {
+  overflow: auto;
+  padding: .75rem;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: .25rem;
+}
+
+.carbon-img {
+  float: left;
+  margin-right: .75rem;
+
+  @media (min-width: 768px) {
+    margin-bottom: .5rem;
+  }
+
+  @media (min-width: 992px) {
+    margin-bottom: 0;
+  }
+}
+
+.carbon-text,
+.carbon-poweredby {
+  display: block;
+  color: #6c757d;
+
+  &:hover,
+  &:focus {
+    color: #343a40;
+    text-decoration: none;
+  }
+}
+
+.carbon-text {
+  margin-bottom: .5rem;
+
+  @media (min-width: 768px) {
+    font-size: .875rem;
+  }
+}
+
+.carbon-poweredby {
+  font-size: .875rem;
+}
diff --git a/docs/assets/css/docs.scss b/docs/assets/css/docs.scss
index 16d84df6a..559510ca0 100644
--- a/docs/assets/css/docs.scss
+++ b/docs/assets/css/docs.scss
@@ -5,6 +5,7 @@
 @import "buttons";
 @import "navbar";
 @import "subnav";
+@import "ads";
 
 .f0 {
   font-size: 2rem;
@@ -14,21 +15,23 @@
   }
 }
 .f3 {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
 
   @media (min-width: 520px) {
-    font-size: 1.75rem;
+    font-size: 1.5rem;
   }
 }
 .f5 {
   font-size: 1rem;
 
   @media (min-width: 520px) {
-    font-size: 1.25rem;
+    // font-size: 1.15rem;
   }
 }
 
 .hero {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+
   .f3 {
     max-width: 760px;
   }
diff --git a/docs/index.html b/docs/index.html
index 28f123a68..984d582f1 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,21 +3,24 @@ layout: default
 ---
 
 <div id="icons">
-  <div class="hero py-5 bg-light border-bottom">
+  <div class="hero py-5">
     <div class="container">
       <h1 class="f0">Bootstrap Icons</h1>
       <p class="mb-4 f3 font-weight-normal">For the first time ever, Bootstrap has its own icon library, custom designed and built for our components and documentation.</p>
 
-      <div class="row f5 text-muted">
-        <div class="col-md-6 col-lg-5 pr-lg-4">
-          <p>Bootstrap Icons are designed first and foremost to work with Bootstrap's components, from form controls to navigation and more. Bootstrap Icons are SVGs, so they scale quickly and easily to any size and can be styled with CSS.</p>
+      <div class="row text-muted">
+        <div class="col">
+          <p>Bootstrap Icons are designed first and foremost to work with <a href="{{ site.main }}">Bootstrap</a> components, from form controls to navigation and more. Bootstrap Icons are SVGs, so they scale quickly and easily to any size and can be styled with CSS.</p>
         </div>
-        <div class="col-md-6 col-lg-5 pr-lg-4">
-          <p>Plus, while they're built for Bootstrap first, they're great for any project. They're open sourced (MIT), so you're free to download, include, fork, extend, and more.</p>
+        <div class="col">
+          <p>Plus, while they're built for Bootstrap first, they're great for any project. They're open sourced (MIT), so you're free to download, use, and extend.</p>
+        </div>
+        <div class="col-md-3 col-lg-4">
+          <script async src="https://cdn.carbonads.com/carbon.js?serve=CE7D4277&placement=iconsgetbootstrapcom" id="_carbonads_js"></script>
         </div>
       </div>
 
-      <hr class="mb-4">
+      <hr class="my-4">
 
       <p class="text-muted">
         Current version: <strong>v{{ site.package_version }}</strong>
-- 
cgit v1.2.3