redo hella docs scss

- clean out commented out code
- break apart homepage.scss into sub files by component
- rename a few files to reflect their new component names

docs/assets/scss/_masthead.scss

@@ -0,0 +1,91 @@
+.bd-masthead {
+  position: relative;
+  padding: ($grid-gutter-width / 2);
+  color: $bd-purple-light;
+  text-align: center;
+  background: -webkit-linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
+  background:         linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
+
+  .bd-booticon {
+    margin: 0 auto 2rem;
+    color: $bd-purple-light;
+    border-color: $bd-purple-light;
+  }
+
+  h1 {
+    font-weight: 300;
+    line-height: 1;
+  }
+
+  .lead {
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 2rem;
+    font-size: 1rem;
+    color: #fff;
+  }
+
+  .version {
+    margin-top: -1rem;
+    margin-bottom: 2rem;
+  }
+
+  .btn {
+    width: 100%;
+    padding: 1rem 2rem;
+    font-size: 1.25rem;
+    font-weight: 500;
+    color: $bd-yellow;
+    border-color: $bd-yellow;
+
+    &:hover {
+      color: $bd-graphite;
+      background-color: $bd-yellow;
+      border-color: $bd-yellow;
+    }
+  }
+
+  .carbonad {
+    margin-bottom: -2rem !important;
+  }
+
+  @include media-breakpoint-up(sm) {
+    padding-top: 8rem;
+    padding-bottom: 2rem;
+
+    .btn {
+      width: auto;
+    }
+
+    .carbonad {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  @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: 85%;
+      font-size: 2rem;
+    }
+  }
+}