@use 'sprucecss/scss/spruce' as *;

.post-author {
  --avatar-size: 2.5rem;
  align-items: center;
  display: flex;
  gap: spacer('xs');
  text-decoration: none;

  &__avatar {
    block-size: var(--avatar-size);
    border-radius: calc(var(--avatar-size) / 2);
    inline-size: var(--avatar-size);
  }

  &__name {
    color: color('text');
  }
}

<a class="post-author" href="https://adamlaki.com">
    <img class="post-author__avatar" src="https://secure.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=96&d=mm&r=g" alt="" width="38" height="38"/>
    <span class="post-author__name">by Adam Laki</span>
</a>