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/_page-header.scss

@@ -1,45 +1,53 @@
-//
-// Page headers
-//
+.bd-pageheader {
+  padding: 2rem .75rem;
+  margin-bottom: 1.5rem;
+  color: $bd-purple-light;
+  text-align: center;
+  background-color: $bd-purple;
 
-// .bd-header {
-//   padding-top: 2rem;
-//   padding-bottom: 2rem;
-//   margin-bottom: 2rem;
-//   text-align: center;
-//   background-color: $bd-purple;
+  .container {
+    position: relative;
+  }
 
-//   .container {
-//     position: relative;
-//   }
+  h1 {
+    font-size: 3rem;
+    font-weight: normal;
+    color: #fff;
+  }
 
-//   h1 {
-//     margin-top: 0;
-//     color: #fff;
-//   }
+  p {
+    margin-bottom: 0;
+    font-size: 1.5rem;
+  }
 
-//   p {
-//     margin-bottom: 0;
-//     font-weight: 300;
-//     color: rgba(255,255,255,.65);
-//   }
+  @include media-breakpoint-up(sm) {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+    margin-bottom: 3rem;
+    text-align: left;
 
-//   @media (min-width: 768px) {
-//     text-align: left;
+    .carbonad {
+      margin: 2rem 0 0 !important;
+    }
+  }
 
-//     h1 {
-//       font-size: 4rem;
-//       line-height: 1;
-//     }
-//   }
+  @include media-breakpoint-up(md) {
+    h1 {
+      font-size: 4rem;
+    }
+  }
 
-//   @media (min-width: 992px) {
-//     padding-top: 4rem;
-//     padding-bottom: 4rem;
+  @include media-breakpoint-up(lg) {
+    h1,
+    p {
+      margin-right: 380px;
+    }
 
-//     h1,
-//     p {
-//       margin-right: 380px;
-//     }
-//   }
-// }
+    .carbonad {
+      position: absolute;
+      top: 0;
+      right: .75rem; // offset from the .container's padding
+      margin: 0 !important;
+    }
+  }
+}