.site-nav {

  .site-nav__title {
    color: $clouds;
  }

  .site-nav__title--first {
    margin-top: 0;
  }

  .btn {
    width: 100%;
  }

  .site-nav__tray {
    transition: .2s;
    overflow: hidden;
    height: 300px;
    background-color: $wetAsphalt;
  }

  .site-nav__tray-inner {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  &.collapsed .site-nav__tray {
    height: 0;
  }

  .site-nav__band {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: $wetAsphalt;
    }
  }

}

.site-footer {
  margin-top: 2em;
  padding: 1em 0;
  background-color: $wetAsphalt;
}

.has-code-block .code-block pre {
  margin-bottom: 0;
}

.has-code-block + .site-footer {
  margin-top: 0;
}

.site-footer__credit {
  margin: 0;
  text-align: right;
}

@include breakpoint(sm, true) {

  .site-nav .btn {
    margin-bottom: 5px;
  }
}