.sidebar {
  flex: 0 0 auto;
  max-width: 12em;
  overflow-y: auto;
  padding: 0 $base-spacing;

  &__link {
    color: $base-font-color;
    display: block;
    padding-top: $base-spacing;
    transition: color 0.05s linear;

    &:last-child {
      padding-bottom: $base-spacing;
    }

    &--active {
      color: $blue;
      font-weight: $bold-font-weight;
    }

    &:hover {
      color: $blue;
    }
  }
}

.sidebar {
  flex: 0 0 auto;
  max-width: 12em;
  overflow-y: auto;
  padding: 0 $base-spacing $base-spacing;

  &__link {
    color: $base-font-color;
    display: block;
    padding-top: $base-spacing;
    transition: color 0.05s linear;

    &--active {
      color: $blue;
      font-weight: $bold-font-weight;
    }

    &:hover {
      color: $blue;
    }
  }
}

Fix visual regression for links in sidebar
Fix visual regression for links in sidebar

Problem:

When merging in #198,
the Percy.io visual regression tests weren't run
because our quota for the month had been used up.

Because we did not have the assurance of visual regression tests,
we didn't realize that the `:last-child` selector
that we applied to sidebar links
actually applied to all of the sidebar links, because each was wrapped
in their own `<li>` parent.

This increased the spacing between the links above what we wanted.

Solution:

Move the padding from the last link onto its parent element,
the sidebar `<ul>` element.
