redo most of the css for the masthead, page headers, and ads

3 files changed, 102 insertions, 114 deletions

diff --git a/docs/assets/scss/_ads.scss b/docs/assets/scss/_ads.scss
index 80fd2f12c..62d796197 100644
--- a/docs/assets/scss/_ads.scss
+++ b/docs/assets/scss/_ads.scss
@@ -6,20 +6,20 @@
   width: auto !important;
   height: auto !important;
   padding: 1.25rem !important;
-  margin: 0 -1rem 2rem !important;
-  overflow: hidden; /* clearfix */
+  margin: 0 -1.5rem 2rem !important;
+  overflow: hidden; // clearfix
   font-size: .8rem !important;
   line-height: 1rem !important;
   color: $gray !important;
   text-align: left;
   background: #f5f5f5 !important;
   border: 0 !important;
-  // border: solid #e5e5e5 !important;
-  // border-width: 1px 0 !important;
 }
+
 .carbonad-img {
   margin: 0 !important;
 }
+
 .carbonad-text,
 .carbonad-tag {
   display: block !important;
@@ -29,13 +29,16 @@
   margin-left: 145px !important;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
 }
+
 .carbonad-text {
   padding-top: 0 !important;
 }
+
 .carbonad-tag {
   color: inherit !important;
   text-align: left !important;
 }
+
 .carbonad-text a,
 .carbonad-tag a {
   color: $gray !important;
@@ -44,58 +47,17 @@
     color: $brand-primary !important;
   }
 }
+
 .carbonad #azcarbon > img {
   display: none; // hide what I assume are tracking images
 }
 
-// In the lighter page headers
-// .bd-header .carbonad {
-//   color: #777;
-//   background-color: #fff !important;
-//   border-color: #eee !important;
-// }
-// .bd-header .carbonad-text a,
-// .bd-header .carbonad-tag a {
-//   color: $bd-purple !important;
-// }
-
 @include media-breakpoint-up(sm) {
   .carbonad {
     width: 330px !important;
-    margin: 1.5rem auto !important;
-    border-width: 1px !important;
-    border-radius: .25rem;
-  }
-  .bd-masthead .carbonad {
-    margin: 3rem auto 0 !important;
-  }
-}
-
-@include media-breakpoint-up(md) {
-  .carbonad {
-    margin-right: 0 !important;
-    margin-left: 0 !important;
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .carbonad {
-    float: right;
-    width: 330px !important;
     padding: 1rem !important;
-    margin: .5rem 0 1rem 2rem !important;
-  }
-  .bd-masthead {
-    .carbonad {
-      float: none;
-      margin: 0 auto !important;
-      // color: $bd-purple-light !important;
-      // background: transparent !important;
-      // border: 1px solid #866ab3 !important;
-    }
-    // .carbonad-text a,
-    // .carbonad-tag a {
-    //   color: #fff !important;
-    // }
+    margin-right: auto !important;
+    margin-left: auto !important;
+    border-radius: .25rem;
   }
 }
diff --git a/docs/assets/scss/_homepage.scss b/docs/assets/scss/_homepage.scss
index a16cb67d7..55c3bdb0f 100644
--- a/docs/assets/scss/_homepage.scss
+++ b/docs/assets/scss/_homepage.scss
@@ -50,23 +50,33 @@
 
   .bd-header-mark {
     float: left;
-    padding-top: .6em;
-    padding-bottom: .6em;
+    padding-top: .6rem;
+    padding-bottom: .6rem;
     font-size: 1.25rem;
     font-weight: 500;
   }
 }
 
 .bd-header-nav {
-  float: right;
+  padding-bottom: 1rem;
+  margin-bottom: 2rem;
+  border-bottom: .0625rem solid #eee;
 
   .nav-link {
-    float: left;
+    display: inline-block;
+    padding: 1.2rem .75rem;
 
     &:hover {
       background-color: transparent;
     }
   }
+
+  @include media-breakpoint-up(sm) {
+    float: right;
+    padding-bottom: 0;
+    margin-bottom: 0;
+    border-bottom: 0;
+  }
 }
 
 
@@ -76,77 +86,88 @@
 
 .bd-masthead {
   position: relative;
-  padding: 2rem 0;
-  // color: #cdbfe3;
+  padding: ($grid-gutter-width / 2);
   text-align: center;
-  // text-shadow: 0 1px 0 rgba(0,0,0,.1);
-  // background-color: #6f5499;
-  // @include gradient-vertical($bd-purple, #6f5499);
-  // background-image: linear-gradient(135deg, #a8b7be, #cdd1d4, #d4d5d7, #cecfd1);
-}
 
-.bd-masthead .bd-booticon {
-  margin: 0 auto 2rem;
-  color: $gray;
-  border-color: $gray;
-}
-.bd-masthead h1 {
-  font-weight: 300;
-  line-height: 1;
-  // color: #fff;
-}
-.bd-masthead .lead {
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 2rem;
-  font-size: 1.25rem;
-  // color: #fff;
-}
-.bd-masthead .version {
-  margin-top: -1rem;
-  margin-bottom: 2rem;
-  // color: #9783b9;
-}
-.bd-masthead .btn {
-  width: 100%;
-  padding: 1rem 2rem;
-  font-size: 1.25rem;
-  font-weight: 500;
-  color: $gray;
-  border-color: $gray;
+  .bd-booticon {
+    margin: 0 auto 2rem;
+    color: $bd-purple;
+    border-color: $bd-purple;
+  }
 
-  &:hover {
-    color: #fff;
-    background-color: $gray;
+  h1 {
+    font-weight: 300;
+    line-height: 1;
   }
-}
 
-@media (min-width: 480px) {
-  .bd-masthead .btn {
-    width: auto;
+  .lead {
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 2rem;
+    font-size: 1.25rem;
   }
-}
 
-@media (min-width: 768px) {
-  .bd-masthead {
-    padding: 2rem 0 4rem;
-    // padding: 5rem 0;
+  .version {
+    margin-top: -1rem;
+    margin-bottom: 2rem;
   }
-  .bd-header {
-    margin-bottom: 4rem;
+
+  .btn {
+    width: 100%;
+    padding: 1rem 2rem;
+    font-size: 1.25rem;
+    font-weight: 500;
+    color: $gray;
+    border-color: $gray;
+
+    &:hover {
+      color: #fff;
+      background-color: $gray;
+    }
   }
-  .bd-masthead h1 {
-    font-size: 4rem;
+
+  .carbonad {
+    margin-bottom: -2rem !important;
   }
-  .bd-masthead .lead {
-    font-size: 1.5rem;
+
+  @include media-breakpoint-up(sm) {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+
+    .btn {
+      width: auto;
+    }
+
+    .carbonad {
+      margin-bottom: 0 !important;
+    }
   }
-}
 
-@media (min-width: 992px) {
-  .bd-masthead .lead {
-    width: 80%;
-    font-size: 2rem;
+  @include media-breakpoint-up(md) {
+    padding-bottom: 4rem;
+
+    .bd-header {
+      margin-bottom: 4rem;
+    }
+
+    h1 {
+      font-size: 4rem;
+    }
+
+    .lead {
+      font-size: 1.5rem;
+    }
+
+    .carbonad {
+      margin-top: 3rem !important;
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    .lead {
+      width: 80%;
+      font-size: 2rem;
+    }
   }
 }
 
diff --git a/docs/assets/scss/_layout.scss b/docs/assets/scss/_layout.scss
index 0ec7f7e99..3733ef7d5 100644
--- a/docs/assets/scss/_layout.scss
+++ b/docs/assets/scss/_layout.scss
@@ -9,12 +9,17 @@
   margin-right: auto;
   margin-left: auto;
 
-  @media (min-width: 768px) {
+  @include media-breakpoint-up(md) {
     padding: 2rem;
   }
 
-  @media (min-width: 992px) {
+  @include media-breakpoint-up(lg) {
     padding: 4rem;
+
+    .carbonad {
+      float: right !important;
+      margin: .5rem 0 1rem 2rem !important;
+    }
   }
 
   > table {