link-grid.styl

.post-body .link-grid {
  display: grid;
  grid-gap: 1.5rem 1.5rem;
  grid-template-columns: 1fr 1fr;
  padding: 1.5rem;
  user-select: none;

  +mobile() {
    grid-template-columns: 1fr;
  }

  div {
    border: solid #ddd;
    box-shadow: 1rem 1rem 0.5rem gray;
    height: 5rem;
    transition: background 0.3s;
    padding: 0.5rem;
    position: relative;

    &:hover {
      animation: shake 0.5s;
      background: rgba(230,244,250,.5);
    }

    &:active {
      box-shadow: 0.5rem 0.5rem 0.25rem gray;
      transform: translate(0.2rem, 0.2rem);
    }

    img {
      border: 1px solid #ddd;
      border-radius: 50%;
      box-sizing: border-box;
      height: 5rem;
      left: 0.5rem;
      padding: 3px;
      position: absolute;
      top: 0.5rem;
      width: 5rem;
    }

    p {
      margin: 0 1rem 0 6rem;

      &:first-of-type {
        font-size: 1.2em;
      }

      &:last-of-type {
        font-size: 0.8em;
        line-height: 1.3rem;
        opacity: 0.7;
      }
    }

    a {
      border: none;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }
}

@keyframes shake {
  0% {
    transform: translate(1pt, 1pt) rotate(0deg);
  }
  10% {
    transform: translate(-1pt, -2pt) rotate(-1deg);
  }
  20% {
    transform: translate(-3pt, 0pt) rotate(1deg);
  }
  30% {
    transform: translate(3pt, 2pt) rotate(0deg);
  }
  40% {
    transform: translate(1pt, -1pt) rotate(1deg);
  }
  50% {
    transform: translate(-1pt, 2pt) rotate(-1deg);
  }
  60% {
    transform: translate(-3pt, 1pt) rotate(0deg);
  }
  70% {
    transform: translate(3pt, 1pt) rotate(-1deg);
  }
  80% {
    transform: translate(-1pt, -1pt) rotate(1deg);
  }
  90% {
    transform: translate(1pt, 2pt) rotate(0deg);
  }
  100% {
    transform: translate(1pt, -2pt) rotate(-1deg);
  }
}