hero update and type tweaks

4 files changed, 60 insertions, 10 deletions

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>