website/assets/sass/style.scss

@import "bootstrap";

// Import Open Sans font
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

// 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;
    }
  }
}

// Set global attributes
html, body {
  font-family: "Open Sans", sans-serif;
}

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;
              }
            }
          }
        }
      }
    }
  }
}

// Hide sidebar for mobile, show later
@media (min-width: 768px) {
  .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 {
  padding-bottom: 20px;
  padding-left: 20px;
  padding-top: 0;

  header.hn-docs-header {
    .hn-docs-description {
      font-weight: bolder;
    }
  }

  article.hn-docs-content {
    code {
      padding: 2px;
      border-radius: 2px;
    }

    p {
      font-size: 1.2em;
    }

    ul li, ul li p, ol p {
      font-size: 1.1em;
    }

    h1 {
      font-size: 1.8em;
      padding-bottom: 5px;
    }

    h2 {
      font-size: 1.5em;
      padding-bottom: 5px;
    }

    h3 {
      font-size: 1.3em;
      padding-bottom: 5px;
    }

    h4 {
      font-size: 1.2em;
      padding-bottom: 3px;
    }

    .highlight {
      border-radius: 10px;

      pre {
        color: lighten($light-gray, 15%);
      }
    }

    img {
      max-width: 90%;
    }

    table {
      thead {
        font-size: 16px;
        border-bottom: 1px solid gray;
      }

      tr {
        margin-right: 5px;
      }

      tbody {
        font-size: 12px;
      }
    }
  }
}

@media (min-width: 768px) {
  .hn-docs-main {
    max-width: 70%;
    padding-right: 40px;
    padding-left: 40px;
  }
}

@media (max-width: 768px) {
  .hn-docs-main {
    padding: 40px;
    max-width: 100%;
    margin-left: 0;
  }
}

// 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;
}