blog/_sass/misc/article-menu.scss

/*
 * Post menu
 */

.post-menu {
  padding: 0 20px;
  max-width: 250px;

  .post-menu-title {
    font-size: $base-font-size * 1.5;
    margin-bottom: 14px;
    font-weight: 600;
    color: #222;
  }

  .post-menu-content {
    ul {
      border-left: 1px solid #e9ecef;
      $indent: $base-font-size / 4;
      $active-bgcolor: #ecebec;

      @for $i from 2 to 7 {
        .h-h#{$i} {
          padding-inline-start: $indent + ($i - 2) * $base-font-size * 1.3;
          font-size: $base-font-size * 1.2;
          line-height: 1.4;
        }
      }

      a {
        display: flex;
        padding: 2px 8px;
        color: darken($text-color, 10%);

        * {
          pointer-events: none;
        }

        &:hover {
          text-decoration: none;
          color: lighten($text-color, 20%)!important;
        }
      }

      .active {
        background-color: $active-bgcolor;
        transition: background 0.5s;
        border-left: 2px solid #202020;
        margin-left: -2px;

        &:hover {
          background-color: lighten($active-bgcolor, 2%);
        }

        a {
          color: #121416;
        }
      }
    }
  }
}