---
---

@import '{{ site.theme }}';

$header-height: 90px;
$sidebar-width: 200px;

#table-of-contents {
  margin-top: calc(2rem - 110px);
  padding-top: 110px;
}

.page-header {
  padding: 20px;
  height: $header-height;
  z-index: 10;

  .project-name {
    font-size: 1.8em;
    float: left;
    text-align: left;

    span {
      display: none;
    }

    img {
      position: relative;
      top: 6px;
    }

    a {
      color: #fff;
      text-decoration: none;
    }

    small {
      display: none;
      font-size: .5em;
      font-weight: 400;
      position: relative;
      top: -5px;
      left: 20px;
    }
  }

  .project-tagline {
    display: none;
  }

  .slack-button,
  .github-button {
    float: right;
    margin: 3px 20px 0 0;

    &.github-button {
      margin-right: 5px;
    }

    img, svg {
      width: 40px;
    }
  }
}

.site-footer {
  font-size: .8em;
}

aside#sidebar {
  display: none;
}

.inner {
  position: relative;
  width: auto;
  margin: 0 auto;
}

@media only screen and (max-width: 374px) {
  .page-header {
    .project-name {
      img {
        width: 150px;
      }
    }
  }
}

@media only screen and (min-width: 768px) {
  .page-header {
    position: fixed;
    left: 0;
    right: 0;

    .project-name {
      small {
        display: inline;

        span {
          display: none;
        }
      }
    }

    .project-tagline {
      display: none;
    }

    .slack-button,
    .github-button {
      float: right;
      margin: 3px 20px 0 0;

      &.github-button {
        margin-right: 5px;
      }

      img, svg {
        width: 40px;
      }
    }
  }

  #content-wrapper {
    padding-top: $header-height;
  }

  .sidebar {
    .inner {
      margin: 0 auto 2rem;
      position: relative;
    }

    .main-content.wide {
      display: inline-block;
      width: calc(100% - #{$sidebar-width});
      margin-left: $sidebar-width;
      padding: 2rem 0;
    }

    #sidebar {
      position: fixed;
      top: $header-height;
      bottom: 0;
      display: inline-block;
      width: $sidebar-width;
      margin-top: 30px;
      padding-right: 20px;
      font-size: 12px;
      line-height: 1.3;
    }

    #sidebar-wrapper {
      padding-left: 20px;
      overflow-y: auto;
      height: 100%;
      background: #fff;

      &.fixed {
        position: fixed;
        top: 0;
      }
    }

    .menu {
      ul {
        margin-left: 0;
        padding-left: 30px;
      }

      ul a {
        display: block;
        padding: 3px 0;
        font-size: 13px;
      }
    }
  }
}

@media only screen and (min-width: 1000px) {
  .inner {
    width: 960px;
  }

  .page-header .project-name small span {
    display: inline;
  }

  .sidebar {
    .main-content.wide {
      display: inline-block;
      width: calc(100% - 300px);
      margin-left: 300px;
      padding: 2rem 0;
    }

    #sidebar {
      width: 300px;
    }
  }
}

@media only screen and (min-width: 1300px) {
  .inner {
    min-width: 1260px;
  }
}