website/assets/sass/style.scss

@import "variables";
@import "bootstrap";
@import "typography";

// Helpers
div[class^="landing-feature"] {
  margin-bottom: 50px;
  margin-left:20px;
  margin-right:20px;

  .panel {
    min-height: 150px;
    max-height: 200px;

    .panel-heading {
      font-size: 16px;
    }
  }
}

section.main-page-lower-section {
  width: 95%;
}

// Set global attributes
html, body {
  font-family: $font-family-sans-serif;
  font-size: 1rem;
}

pre, code {
  font-family: $font-family-monospaced;
}

// This set of parameters ensures a "sticky" footer at the bottom
// of the page using flexbox
body.body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;

  main.main {
    flex: 1;
  }
}

a:hover {
  text-decoration: none;
}

// Move down content because we have a fixed navbar
.hn-main {
  padding-top: $navbar-height;
}

// Top navbar
.hn-top-navbar {
  border: 0;
  background-color: $heron-blue-gray;

  .hn-navbar-container {
    padding: 0px 25px;
  }

  a.hn-navbar-logo {
    padding: 15px;
  }

  a.nav-icon {
    font-size: 18px;
  }

  ul li {
    font-size: 16px;
  }

  i.hn-toggle-button {
    color: $light-gray;
  }
}

// Jumbotron on the index page
.hn-jumbotron {
  border-radius: 0 !important;
  background-color: $heron-blue-gray;

  img.hn-jumbotron-logo {
    margin-bottom: 20px;
  }

  p.hn-tagline {
    font-size: 20px;
    color: $light-gray;
  }

  .hn-button-row .btn {
    margin: 5px;
  }
}

// Sidebar for navigating the docs
aside.hn-sidebar {
  .hn-sidebar-nav {
    a {
      text-decoration: none;
    }

    .panel {
      border: none;
      padding: 0;

      .panel-heading {
        background-color: #fff;
        border-bottom: none;
        margin: 0;

        h4.panel-title {
          i {
            color: $light-gray;
            margin-right: 7px;
          }
        }
      }

      .panel-collapse {
        border-top: none;
        padding: 0;

        .panel-body {
          padding: 0;

          ul {
            list-style-type: none;
            padding-left: 40px;
            padding-top: 5px;

            li {
              padding: 0;

              &:nth-last-of-type(n + 2) {
                margin-bottom: 10px;
              }
            }
          }
        }
      }
    }
  }
}

.hn-sidebar {
  position: fixed;
  top: $navbar-height;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  background-color: white;/*#f5f5f5;*/
  border-right: 1px solid #eee;
}

// Main content on docs pages
section.hn-docs-main {
  max-width: 100%;
  margin-bottom: $docs-main-bottom-margin;
}

// Footer on the index page
.hn-footer {
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: 40px;
  color: $light-gray;
  background-color: $heron-blue-gray;

  .hn-footer-links {
    padding-left: 0;
    margin-bottom: 20px;

    li {
      display: inline-block;

      & + li {
        margin-left: 15px;
      }

      a {
        color: #9d9d9d;

        &:hover {
          color: #fff;
          text-decoration: none;
        }
      }
    }
  }
}

// 404 not found page
.not-found {
  img {
    height: 100px;
    margin-bottom: 150px;
  }

  p {
    font-size: 18px;
  }

  ul li {
    font-size: 16px;
    list-style-type: none;
  }

  padding: 50px;
}