notes/_sass/navigation.scss

//
// Main nav, breadcrumb, etc...
//

.site-title {
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;

  @include mq(md) {
    position: absolute;
    top: $gutter-spacing;
    right: 0;
    z-index: 101;
  }
}

.navigation-list {
  list-style: none;
  padding: 0;
  margin-top: $sp-4;

  @include mq(md) {
    margin-top: $sp-8;
  }
}

.navigation-list-child-list {
  list-style: none;
  padding-left: $sp-3;
  margin-top: $sp-2;
  margin-bottom: $sp-2;

  .navigation-list-link {
    color: $grey-dk-100;
  }

  .navigation-list-item {
    &::before {
      position: absolute;
      content: "- ";
      margin-left: -0.8em;
      color: $grey-dk-000;
    }

    &.active {
      &::before {
        color: $grey-dk-100;
      }
    }
  }
}

.navigation-list-item {
  @include fs-3;
}

.navigation-list-link {
  display: block;

  &.active {
    color: $grey-dk-200;
    text-decoration: none;
    font-weight: 600;
  }
}

// Small screen nav

.main-nav {
  display: none;

  &.nav-open {
    display: block;
  }
  @include mq(md) {
    display: block;
  }
}

.side-bar {
  display: flex;
  flex-wrap: wrap;

  @include mq(md) {
    display: block;
  }
}

.navigation-list-toggle {
  position: absolute;
  right: $sp-4;

  @include mq(md) {
    display: none !important;
  }
}

// Breadcrumb nav

.breadcrumb-nav-list {
  list-style: none;
  padding-left: 0;
  margin-top: $sp-3;
  margin-bottom: $sp-5;
}

.breadcrumb-nav-list-item {
  display: table-cell;
  @include fs-2;

  &::before {
    display: none;
  }

  &::after {
    display: inline-block;
    margin-left: $sp-2;
    margin-right: $sp-2;
    content: "/";
    color: $grey-dk-000;
  }

  &:last-child {
    &::after {
      content: "";
    }
  }
}

 // Table of contents

#markdown-toc {
  counter-reset: toc-counter;
  li {
    &::before {
      counter-increment: toc-counter;
      content: counter(toc-counter, upper-roman);
    }
    ol {
      counter-reset: toc-sub-counter;
    }

    li {
      &::before {
        counter-increment: toc-sub-counter;
        content: counter(toc-sub-counter, lower-roman);
      }
    }
  }
}