webseite/assets/sass/parts/_header.scss

/* Header */
#navPanel,
#titleBar {
  display: none;
}

@include breakpoint(phablet) {
  #titleBar {
    @include vendor('backface-visibility', 'hidden');
    @include vendor('transition', 'transform #{_duration(navPanel)} ease');

    display: block;
    height: 44px;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: _misc(z-index-base) + 1;
    background: _palette(accent2);
    box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);

    .title {
      color: _palette(fg-bold);
      display: block;
      font-weight: _font(weight-bold);
      height: 44px;
      line-height: 44px;
      text-align: center;

      a {
        color: inherit;
        border: 0;
      }
    }

    .toggle {
      @include icon;

      height: 60px;
      left: 0;
      position: absolute;
      top: 0;
      width: 90px;
      outline: 0;
      border: 0;

      &::before {
        background: _palette(accent3);
        color: _palette(fg-light);
        display: block;
        font-size: 18px;
        height: 44px;
        left: 0;
        line-height: 44px;
        position: absolute;
        text-align: center;
        top: 0;
        width: 54px;
      }
    }
  }
}

@include breakpoint(phablet) {
  #navPanel {
    @include vendor('backface-visibility', 'hidden');
    @include vendor('transform', 'translateX(#{_size(navPanel) * -1})');
    @include vendor('transition', ('transform #{_duration(navPanel)} ease'));
    display: block;
    height: 100%;
    left: 0;
    overflow-y: auto;
    position: fixed;
    top: 0;
    width: _size(navPanel);
    z-index: _misc(z-index-base) + 2;
    background: darken(_palette(bg), 2);
    padding: 0.75em 1.25em;

    .link {
      border: 0;
      border-top: solid 1px transparentize(_palette(border), 0.25);
      color: _palette(fg);
      display: block;
      height: 3em;
      line-height: 3em;
      text-decoration: none;

      &:hover {
        color: inherit !important;
      }

      &:first-child {
        border-top: 0;
      }

      &.depth-0 {
        color: _palette(fg-bold);
        font-weight: _font(weight-bold);
      }

      .indent-1 {
        display: inline-block;
        width: 1.25em;
      }

      .indent-2 {
        display: inline-block;
        width: 2.5em;
      }

      .indent-3 {
        display: inline-block;
        width: 3.75em;
      }

      .indent-4 {
        display: inline-block;
        width: 5em;
      }

      .indent-5 {
        display: inline-block;
        width: 6.25em;
      }
    }
  }
}

#page-wrapper {
  padding-top: 3.5em;

  @include breakpoint(phablet) {
    @include vendor('backface-visibility', 'hidden');
    @include vendor('transition', 'transform #{_duration(navPanel)} ease');

    padding-bottom: 1px;
    padding-top: 44px !important;
  }
}

#header {
  background: _palette(accent2-transparent);
  box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);
  cursor: default;
  height: 3.5em;
  left: 0;
  line-height: 3.5em;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 5000;

  @include breakpoint(phablet) {
    display: none;
  }

  h1 {
    height: inherit;
    left: 1.25em;
    line-height: inherit;
    margin: 0;
    position: absolute;
    top: 0;
  }

  nav {
    ul {
      list-style: none;
      position: relative;
      float: right;
      margin: 0;
      padding: 0;
    
      li {
        position: relative;
        float: left;
        margin: 0;
        padding: 0;
        color: inherit;
        height: inherit;
        line-height: inherit;

        a,
        span {
          display: block;
          color: inherit;
          text-decoration: none;
          line-height: inherit;
          padding: 0 1em;
        }

        &.active {
          > a,
          > span {
            color: _palette(accent1);
          }
        }

        &.last {
          padding-right: 1.8em;
        }
      }

      ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        border-bottom: 2px solid rgba(255, 255, 255, 0.075);
        background: _palette(accent2-transparent);
        padding: 0;

        li {
          float: none;
          width: 11em;
          overflow: hidden;
        }

        &.last {
          li {
            width: 8em;
          }
        }

        a {
          line-height: 100%;
          padding: 10px 15px;
          border-top: 2px solid rgba(255, 255, 255, 0.075);
        }

        ul {
          top: 0;
          left: 100%;
        }
      }

      li:hover > ul {
        display: block;
      }
    }
  }
}

body.landing {
  #page-wrapper {
    padding-top: 0;
  }
}