aside {
  @include rhythm-padding;
  background: white;
  @include card(4);

  menu {
    list-style: none;
  }
  li:hover {
    background: rgba(black, .05);
  }
  a {
    display: block;
    @include adjust-leading-to(2);
    text-indent: 1em;
    font-weight: bold;
    color: $base-font-color;
  }
}

@include breakpoint($break-large) {
  aside {
    @include card;
  }
}

aside {
  @include rhythm-padding;
  background: white;
  @include card(4);

  menu {
    list-style: none;
  }
  li:hover {
    background: rgba(black, .05);
  }
  a {
    display: block;
    @include adjust-leading-to(2);
    text-indent: 1em;
    font-weight: bold;
    color: $base-font-color;
    position: relative; // ripple
    overflow: hidden; // ripple
    &:after {
      content: '';
      position: absolute;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      top: calc(50% - 1px);
      left: calc(50% - 1px);
      pointer-events: none;
      width: 2px;
      height: 2px;
      background: rgba(black, .3);
      /*background: rgba(white, .3);*/
      opacity: 0;
    }
    &:active::after, &:focus::after {
      animation: {
        name: ripple;
        duration: 4s;
        timing-function: ease;
        fill-mode: none;
      }
    }
  }
}

@keyframes ripple {
  0% { transform: scale(1); opacity: 1; }
  25% { transform: scale(100); opacity: 0; }
  100% { transform: scale(100); opacity: 0; }
}

@include breakpoint($break-large) {
  aside {
    @include card;
  }
}

Add ripple effect (CSS only)
Add ripple effect (CSS only)
