Merge pull request #14 from layer5io:leecalcote/styless

Styles, colors, and css, oh my!

assets/scss/_navbar.scss

@@ -0,0 +1,6 @@
+$navbar-light: #fff;
+$td-navbar__background: #fff;
+$navbar-dark: red;
+$navbar-bg-dark: #fff;
+$navbar-dark: pink;
+$bg-dark: yellow;

assets/scss/_pageinfo.scss

@@ -0,0 +1,16 @@
+.pageinfo {
+    font-weight: $font-weight-medium;
+    background: $gray-900;
+    color: inherit;
+    border-radius: 0;
+    margin: 2rem;
+    padding: 1.5rem;
+    padding-bottom: 0.5rem;
+
+    @each $color, $value in $theme-colors {
+      &-#{$color} {
+        border-style: solid;
+        border-color: $value;
+      }
+    }
+  }

assets/scss/_sidebar-toc.scss

@@ -0,0 +1,68 @@
+//
+// Right side toc
+//
+.td-sidebar-toc {
+    border-left: 1px solid $border-color;
+    background-color: $td-sidebar-toc-bg-color;
+    @supports (position: sticky) {
+      position: sticky;
+      top: 4rem;
+      height: calc(100vh - 4rem);
+      overflow-y: auto;
+    }
+
+    order: 2;
+    padding-top: 0.75rem;
+    padding-bottom: 1.5rem;
+    vertical-align: top;
+  }
+
+  .td-page-meta {
+    a {
+      display: block;
+      color: $gray-400;
+      line-height: 1.65rem;
+      font-weight: $font-weight-medium;
+
+      &:hover {
+        color: $white;
+        text-decoration: none;
+      }
+    }
+  }
+
+  .td-toc {
+    a {
+      display: block;
+      font-weight: $font-weight-light;
+      padding-bottom: 0.25rem;
+    }
+
+    li {
+      list-style: none;
+      display: block;
+    }
+
+    li li {
+      margin-left: 0.5rem;
+    }
+
+    #TableOfContents {
+      // Hugo's ToC is a mouthful, this can be used to style the top level h2 entries.
+      > ul > li > ul > li > a {
+      }
+
+      a {
+
+
+        &:hover {
+          color: $white;
+          text-decoration: none;
+        }
+      }
+    }
+
+    ul {
+      padding-left: 0;
+    }
+  }

assets/scss/_sidebar-tree.scss

@@ -0,0 +1,178 @@
+//
+// Left side navigation
+//
+.td-sidebar-nav {
+    $_max-height: calc(100vh - 8.5rem);
+
+    padding-right: 0.5rem;
+    margin-right: -15px;
+    margin-left: -15px;
+
+    @include media-breakpoint-up(md) {
+      @supports (position: sticky) {
+        max-height: $_max-height;
+        overflow-y: auto;
+      }
+    }
+
+    // Adjust height and padding when sidebar_search_disable is true, but only for
+    // >= `lg` views, because on tablet (`md`) and mobile (<= `sm`), the search
+    // box is displayed regardless of the value of sidebar_search_disable:
+    &.td-sidebar-nav--search-disabled {
+      @include media-breakpoint-up(lg) {
+        // There's no search box so add top padding
+        // and adjust max-height:
+        padding-top: 1rem;
+
+        @supports (position: sticky) {
+          max-height: calc(#{$_max-height} + 4.5rem);
+        }
+      }
+    }
+
+    @include media-breakpoint-up(md) {
+      display: block !important;
+    }
+
+    &__section {
+      li {
+        list-style: none;
+      }
+
+      &.ul-0, ul {
+        padding: 0;
+        margin: 0;
+      }
+
+      @include media-breakpoint-up(md) {
+        & .ul-1 ul {
+          padding-left: 1.5em;
+        }
+      }
+
+      padding-left: 0;
+    }
+
+    &__section-title {
+      display: block;
+      font-weight: $font-weight-medium;
+
+      .active {
+        font-weight: $font-weight-bold;
+      }
+
+      a {
+        color: $primary;
+      }
+    }
+
+    .td-sidebar-link {
+      display: block;
+      padding-bottom: 0.375rem;
+
+      &__page {
+        color: $gray-400;
+        font-weight: $font-weight-light;
+      }
+    }
+
+    a {
+      &:hover {
+        color: $white;
+        text-decoration: none;
+      }
+
+      &.active {
+        font-weight: $font-weight-bold;
+      }
+    }
+
+    .dropdown {
+      a {
+        color: $gray-700;
+      }
+
+      .nav-link {
+        padding: 0 0 1rem;
+      }
+    }
+
+    & > .td-sidebar-nav__section {
+      padding-left: 1.5rem;
+    }
+
+    li i {
+      // Layout of icons
+      padding-right: 0.5em;
+      &:before {
+        display: inline-block;
+        text-align: center;
+        min-width: 1em;
+      }
+    }
+
+    .td-sidebar-link.tree-root {
+      font-weight: $font-weight-bold;
+      color: $td-sidebar-tree-root-color;
+      border-bottom: 1px $td-sidebar-tree-root-color solid;
+      margin-bottom: 1rem;
+    }
+  }
+
+  .td-sidebar {
+    @include media-breakpoint-up(md) {
+      padding-top: 4rem;
+      background-color: $td-sidebar-bg-color;
+      padding-right: 1rem;
+      border-right: 1px solid $td-sidebar-border-color;
+    }
+
+    padding-bottom: 1rem;
+
+    &__toggle {
+      line-height: 1;
+      color: $gray-900;
+      margin: 1rem;
+    }
+
+    &__search {
+      padding: 1rem 0;
+    }
+
+    &__inner {
+      order: 0;
+
+      @include media-breakpoint-up(md) {
+        @supports (position: sticky) {
+          position: sticky;
+          top: 4rem;
+          z-index: 10;
+          height: calc(100vh - 5rem);
+        }
+      }
+
+      @include media-breakpoint-up(xl) {
+        flex: 0 1 320px;
+      }
+
+      .td-search-box {
+        width: 100%;
+      }
+    }
+
+    #content-desktop {
+      display: block;
+    }
+    #content-mobile {
+      display: none;
+    }
+
+    @include media-breakpoint-down(lg) {
+      #content-desktop {
+        display: none;
+      }
+      #content-mobile {
+        display: block;
+      }
+    }
+  }