infima/styles/components/avatar.css

A UI framework for content-centric websites.

:root {
  --ifm-avatar-intro-margin: 1rem;
  --ifm-avatar-intro-alignment: inherit;
  --ifm-avatar-photo-size-sm: 2rem;
  --ifm-avatar-photo-size-md: 3rem;
  --ifm-avatar-photo-size-lg: 4rem;
  --ifm-avatar-photo-size-xl: 6rem;
}

.avatar {
  display: flex;

  & .avatar__photo-link {
    display: block;
  }

  & .avatar__photo {
    overflow: hidden;
    border-radius: 50%;
    height: var(--ifm-avatar-photo-size-md);
    width: var(--ifm-avatar-photo-size-md);

    &.avatar__photo--sm {
      height: var(--ifm-avatar-photo-size-sm);
      width: var(--ifm-avatar-photo-size-sm);
    }

    &.avatar__photo--lg {
      height: var(--ifm-avatar-photo-size-lg);
      width: var(--ifm-avatar-photo-size-lg);
    }

    &.avatar__photo--xl {
      height: var(--ifm-avatar-photo-size-xl);
      width: var(--ifm-avatar-photo-size-xl);
    }

    & + .avatar__intro {
      margin-left: var(--ifm-avatar-intro-margin);
    }
  }

  & .avatar__intro {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    justify-content: center;
    text-align: var(--ifm-avatar-intro-alignment);
  }

  & .avatar__name {
    margin: 0;
  }

  & .avatar__subtitle {
    margin-top: 0.25rem;
  }

  &.avatar--vertical {
    --ifm-avatar-intro-alignment: center;
    --ifm-avatar-intro-margin: 0.5rem;

    align-items: center;
    flex-direction: column;

    // @compat
    & .avatar__intro {
      margin-left: 0; /* Reset the margin added in the horizontal layout. */
      margin-top: var(--ifm-avatar-intro-margin); // @compat
      text-align: var(--ifm-avatar-intro-alignment); // @compat
    }
  }
}