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

diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss
index 114b16243a112bba4a9b52af20605a2868ea2d69..da0d9e72025c64297e001f6aee012c141be1ea29 100644 (file)
--- a/docs/assets/scss/_component-examples.scss
+++ b/docs/assets/scss/_component-examples.scss
@@ -149,16 +149,6 @@
     margin-left: .5rem;
   }
 }
-// .bd-example > .img-circle,
-// .bd-example > .img-rounded,
-// .bd-example > .img-thumbnail {
-//   margin: .25rem;
-// }
-
-// Tables
-// .bd-example > .table-responsive > .table {
-//   background-color: #fff;
-// }
 
 // Buttons
 .bd-example > .btn-group {

diff --git a/docs/assets/scss/_layout.scss b/docs/assets/scss/_content.scss
similarity index 58%
rename from docs/assets/scss/_layout.scss
rename to docs/assets/scss/_content.scss
index 1c4ad62224fa2de7ac673a1fb254338101cc47d2..017dad413faea1bd7afcf38275ada723883642e0 100644 (file)
--- a/docs/assets/scss/_layout.scss
+++ b/docs/assets/scss/_content.scss
@@ -1,3 +1,7 @@
+//
+// Automatically style Markdown-based tables like a Bootstrap `.table`.
+//
+
 .bd-content {
   > table {
     display: block;
@@ -32,61 +36,6 @@
   }
 }
 
-
-.bd-pageheader {
-  padding: 2rem .75rem;
-  margin-bottom: 1.5rem;
-  color: $bd-purple-light;
-  text-align: center;
-  background-color: $bd-purple;
-
-  .container {
-    position: relative;
-  }
-
-  h1 {
-    font-size: 3rem;
-    font-weight: normal;
-    color: #fff;
-  }
-
-  p {
-    margin-bottom: 0;
-    font-size: 1.5rem;
-  }
-
-  @include media-breakpoint-up(sm) {
-    padding-top: 4rem;
-    padding-bottom: 4rem;
-    margin-bottom: 3rem;
-    text-align: left;
-
-    .carbonad {
-      margin: 2rem 0 0 !important;
-    }
-  }
-
-  @include media-breakpoint-up(md) {
-    h1 {
-      font-size: 4rem;
-    }
-  }
-
-  @include media-breakpoint-up(lg) {
-    h1,
-    p {
-      margin-right: 380px;
-    }
-
-    .carbonad {
-      position: absolute;
-      top: 0;
-      right: .75rem; // offset from the .container's padding
-      margin: 0 !important;
-    }
-  }
-}
-
 //
 // Docs sections
 //

diff --git a/docs/assets/scss/_featured-sites.scss b/docs/assets/scss/_featured-sites.scss
new file mode 100644 (file)
index 0000000..b1671c3
--- /dev/null
+++ b/docs/assets/scss/_featured-sites.scss
@@ -0,0 +1,21 @@
+.bd-featured-sites {
+  margin-right: -1px;
+  margin-left: -1px;
+}
+.bd-featured-sites .col-xs-6 {
+  padding: 1px;
+}
+.bd-featured-sites .img-responsive {
+  margin-top: 0;
+}
+
+@media (min-width: 768px) {
+  .bd-featured-sites .col-sm-3:first-child img {
+    border-top-left-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+  .bd-featured-sites .col-sm-3:last-child img {
+    border-top-right-radius: .25rem;
+    border-bottom-right-radius: .25rem;
+  }
+}

diff --git a/docs/assets/scss/_featurettes.scss b/docs/assets/scss/_featurettes.scss
new file mode 100644 (file)
index 0000000..ba0c734
--- /dev/null
+++ b/docs/assets/scss/_featurettes.scss
@@ -0,0 +1,81 @@
+.bd-featurette {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #555;
+  // text-align: center;
+  background-color: #fff;
+  border-top: 1px solid #eee;
+
+  .highlight {
+    text-align: left;
+  }
+
+  @include media-breakpoint-up(md) {
+    .col-sm-6:first-child {
+      padding-right: ($grid-gutter-width * 1.5);
+    };
+    .col-sm-6:last-child {
+      padding-left: ($grid-gutter-width * 1.5);
+    }
+  }
+}
+
+.bd-featurette-title {
+  margin-bottom: .5rem;
+  font-size: 2rem;
+  font-weight: normal;
+  color: #333;
+
+  + .lead {
+    font-size: 1.5rem;
+    margin-bottom: 2rem;
+  }
+}
+.half-rule {
+  width: 6rem;
+  margin: 2.5rem 0;
+}
+.bd-featurette h4 {
+  margin-top: 1rem;
+  margin-bottom: .5rem;
+  font-weight: normal;
+  color: #333;
+}
+.bd-featurette-img {
+  display: block;
+  margin-bottom: 1.25rem;
+  color: #333;
+}
+.bd-featurette-img:hover {
+  color: $brand-primary;
+  text-decoration: none;
+}
+.bd-featurette-img img {
+  display: block;
+  margin-bottom: 1rem;
+}
+
+@media (min-width: 480px) {
+  .bd-featurette .img-responsive {
+    margin-top: 2rem;
+  }
+}
+@media (min-width: 768px) {
+  .bd-featurette {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+  }
+  .bd-featurette-title {
+    font-size: 2.5rem;
+  }
+  .bd-featurette .lead {
+    max-width: 80%;
+    // margin-right: auto;
+    // margin-left: auto;
+  }
+  .bd-featurette .img-responsive {
+    margin-top: 0;
+  }
+}

diff --git a/docs/assets/scss/_homepage.scss b/docs/assets/scss/_homepage.scss
deleted file mode 100644 (file)
index fddae50..0000000
--- a/docs/assets/scss/_homepage.scss
+++ /dev/null
@@ -1,236 +0,0 @@
-//
-// Main navbar
-//
-
-.bd-navbar {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  margin-bottom: 0;
-  // background-color: $bd-graphite;
-
-  .nav-link {
-    color: $bd-graphite-light;
-
-    &.active,
-    &:hover,
-    &:focus {
-      color: $gray-dark;
-      background-color: transparent;
-    }
-
-    &.active {
-      font-weight: 500;
-    }
-  }
-}
-
-
-//
-// Masthead (headings and download button)
-//
-
-.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;
-    }
-  }
-}
-
-
-//
-// Homepage featurettes
-//
-
-.bd-featurette {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  color: #555;
-  // text-align: center;
-  background-color: #fff;
-  border-top: 1px solid #eee;
-
-  .highlight {
-    text-align: left;
-  }
-
-  @include media-breakpoint-up(md) {
-    .col-sm-6:first-child {
-      padding-right: ($grid-gutter-width * 1.5);
-    };
-    .col-sm-6:last-child {
-      padding-left: ($grid-gutter-width * 1.5);
-    }
-  }
-}
-
-.bd-featurette-title {
-  margin-bottom: .5rem;
-  font-size: 2rem;
-  font-weight: normal;
-  color: #333;
-
-  + .lead {
-    font-size: 1.5rem;
-    margin-bottom: 2rem;
-  }
-}
-.half-rule {
-  width: 6rem;
-  margin: 2.5rem 0;
-}
-.bd-featurette h4 {
-  margin-top: 1rem;
-  margin-bottom: .5rem;
-  font-weight: normal;
-  color: #333;
-}
-.bd-featurette-img {
-  display: block;
-  margin-bottom: 1.25rem;
-  color: #333;
-}
-.bd-featurette-img:hover {
-  color: $brand-primary;
-  text-decoration: none;
-}
-.bd-featurette-img img {
-  display: block;
-  margin-bottom: 1rem;
-}
-
-@media (min-width: 480px) {
-  .bd-featurette .img-responsive {
-    margin-top: 2rem;
-  }
-}
-@media (min-width: 768px) {
-  .bd-featurette {
-    padding-top: 6rem;
-    padding-bottom: 6rem;
-  }
-  .bd-featurette-title {
-    font-size: 2.5rem;
-  }
-  .bd-featurette .lead {
-    max-width: 80%;
-    // margin-right: auto;
-    // margin-left: auto;
-  }
-  .bd-featurette .img-responsive {
-    margin-top: 0;
-  }
-}
-
-
-//
-// Featured Expo sites
-//
-
-.bd-featured-sites {
-  margin-right: -1px;
-  margin-left: -1px;
-}
-.bd-featured-sites .col-xs-6 {
-  padding: 1px;
-}
-.bd-featured-sites .img-responsive {
-  margin-top: 0;
-}
-
-@media (min-width: 768px) {
-  .bd-featured-sites .col-sm-3:first-child img {
-    border-top-left-radius: .25rem;
-    border-bottom-left-radius: .25rem;
-  }
-  .bd-featured-sites .col-sm-3:last-child img {
-    border-top-right-radius: .25rem;
-    border-bottom-right-radius: .25rem;
-  }
-}

diff --git a/docs/assets/scss/_masthead.scss b/docs/assets/scss/_masthead.scss
new file mode 100644 (file)
index 0000000..a0dfe09
--- /dev/null
+++ b/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;
+    }
+  }
+}

diff --git a/docs/assets/scss/_nav.scss b/docs/assets/scss/_nav.scss
new file mode 100644 (file)
index 0000000..9563801
--- /dev/null
+++ b/docs/assets/scss/_nav.scss
@@ -0,0 +1,25 @@
+//
+// Main navbar
+//
+
+.bd-navbar {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  margin-bottom: 0;
+  // background-color: $bd-graphite;
+
+  .nav-link {
+    color: $bd-graphite-light;
+
+    &.active,
+    &:hover,
+    &:focus {
+      color: $gray-dark;
+      background-color: transparent;
+    }
+
+    &.active {
+      font-weight: 500;
+    }
+  }
+}

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

diff --git a/docs/assets/scss/_social-buttons.scss b/docs/assets/scss/_social-buttons.scss
deleted file mode 100644 (file)
index 36a678c..0000000
--- a/docs/assets/scss/_social-buttons.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-//
-// Social buttons
-//
-
-.bd-social {
-  margin-bottom: 1.5rem;
-  margin-left: -.5rem;
-}
-.bd-social-buttons {
-  display: inline-block;
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
-}
-.bd-social-buttons li {
-  display: inline-block;
-  padding: .25rem .5rem;
-  line-height: 1;
-}
-.bd-social-buttons .twitter-follow-button {
-  width: 225px !important;
-}
-.bd-social-buttons .twitter-share-button {
-  width: 98px !important;
-}
-
-// Style the GitHub buttons via CSS instead of inline attributes
-.github-btn {
-  overflow: hidden;
-  border: 0;
-}

diff --git a/docs/assets/scss/_team.scss b/docs/assets/scss/_team.scss
index d42bd0778f37be9aa2c32f72fe5720df933a6423..5b386d99fc27299638a0b2bc5c5e7296940d4538 100644 (file)
--- a/docs/assets/scss/_team.scss
+++ b/docs/assets/scss/_team.scss
@@ -1,7 +1,3 @@
-//
-// Team members
-//
-
 .bd-team {
   margin-bottom: 1.5rem;
 
@@ -21,7 +17,7 @@
     height: 1.25rem;
     margin-top: .25rem;
   }
-  
+
   img {
     float: left;
     width: 2rem;

diff --git a/docs/assets/scss/_zeroclipboard.scss b/docs/assets/scss/_zeroclipboard.scss
index a1c987d92d3d40d8e2455512a43ee4db238e0590..0b6b3e77ae0f9de0c3e1895d25954fb9b82eca99 100644 (file)
--- a/docs/assets/scss/_zeroclipboard.scss
+++ b/docs/assets/scss/_zeroclipboard.scss
@@ -1,6 +1,6 @@
+// ZeroClipboard
 //
-// ZeroClipboard styles
-//
+// Flash-based `Copy` buttons for code snippets.
 
 .zero-clipboard {
   position: relative;

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 47d7ebc9f29c62f4a145e59daa5e21684f5d7a1c..437207d4d582887cb6e684d8284eeeef9e0f042c 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -38,14 +38,16 @@ $bd-warning:        #f0ad4e;
 $bd-info:           #5bc0de;
 
 // Load docs components
-@import "layout";
-@import "sidebar";
 @import "booticon";
-@import "homepage";
+@import "nav";
+@import "masthead";
+@import "featurettes";
+@import "featured-sites";
 @import "ads";
-@import "footer";
-@import "social-buttons";
+@import "content";
 @import "page-header";
+@import "sidebar";
+@import "footer";
 @import "component-examples";
 @import "responsive-tests";
 @import "buttons";