pinafore/routes/_components/AccountProfile.html

<div class="account-profile {{headerIsMissing ? 'header-is-missing' : ''}}" style="background-image: url({{profile.header}});">
  <div class="account-profile-grid-wrapper">
    <div class="account-profile-backdrop"></div>
    <div class="account-profile-grid">
      <div class="account-profile-avatar">
        <img src="{{profile.avatar}}" aria-hidden="true">
      </div>
      <div class="account-profile-name">
        <a rel="noopener" target="_blank" href="{{profile.url}}">
          {{profile.display_name}}
        </a>
      </div>
      <div class="account-profile-username">
        {{'@' + profile.acct}}
      </div>
      <div class="account-profile-followed-by">
        {{#if relationship && relationship.followed_by}}
        <span>
          Follows you
        </span>
        {{/if}}
      </div>
      <div class="account-profile-follow">
        {{#if verifyCredentials && relationship && verifyCredentials.id !== relationship.id}}
          <IconButton
            label="{{relationship && relationship.following ? 'Unfollow' : 'Follow'}}"
            href="{{relationship && relationship.following ? '#fa-user-times' : '#fa-user-plus'}}"
            big="true"
          />
        {{/if}}
      </div>
      <div class="account-profile-note">
        {{{profile.note}}}
      </div>
    </div>
  </div>
</div>
<style>
  .account-profile {
    position: relative;
    background-size: cover;
    background-position: center;
    padding-top: 175px;
  }

  .account-profile.header-is-missing {
    padding-top: 0;
    background-color: #ccc;
  }

  .account-profile-backdrop {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 5;
  }

  .account-profile-grid {
    display: grid;
    grid-template-areas: "avatar     name        followed-by   follow"
                         "avatar     username    username      follow"
                         "avatar     note        note          follow";
    grid-template-columns: min-content auto 1fr min-content;
    grid-column-gap: 10px;
    grid-row-gap: 5px;
    padding: 20px;
    justify-content: center;
    z-index: 10;
    position: relative;
  }

  @supports (-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%)) {
    :global(.account-profile-grid-wrapper) {
      -webkit-backdrop-filter: blur(7px) saturate(110%);
      backdrop-filter: blur(7px) saturate(110%);
      background-color: rgba(255, 255, 255, 0.7);
    }
  }

  @supports not ((-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%))) {
    :global(.account-profile-grid-wrapper) {
      background-color: rgba(255, 255, 255, 0.9);
    }
  }

  .account-profile-followed-by {
    grid-area: followed-by;
    align-self: center;
    text-transform: uppercase;
    color: var(--deemphasized-text-color);
    font-size: 0.8em;
  }
  .account-profile-followed-by span {
    background: rgba(30, 30, 30, 0.2);
    border-radius: 4px;
    padding: 3px 5px;
    white-space: nowrap;
  }
  .account-profile-avatar {
    grid-area: avatar;
  }
  .account-profile-avatar img {
    border-radius: 4px;
    width: 100px;
    height: 100px;
  }

  .account-profile-username {
    grid-area: username;
    color: var(--deemphasized-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: center;
  }

  .account-profile-follow {
    grid-area: follow;
    align-self: flex-start;
  }
  .account-profile-name {
    grid-area: name;
    font-size: 1.5em;
    align-self: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .account-profile-name a {
    color: var(--body-text-color);
    text-decoration: none;
  }
  .account-profile-name a:hover {
    color: var(--body-text-color);
    text-decoration: underline;
  }
  .account-profile-note {
    grid-area: note;
    padding: 10px 0;
  }
  :global(.account-profile-note p) {
    font-size: 1em;
  }

  @media (max-width: 767px) {
    .account-profile-avatar img {
      width: 80px;
      height: 80px;
    }
    .account-profile-name {
      font-size: 1.2em;
    }
    .account-profile-grid {
      display: grid;
      grid-template-areas: "avatar     name          follow"
                           "avatar     username      follow"
                           "avatar     followed-by   follow"
                           "note       note          note";
      grid-template-columns: min-content minmax(auto, 1fr) min-content;
      grid-template-rows: min-content min-content 1fr min-content;
    }
    .account-profile-note {
      padding: 5px 0;
    }
    .account-profile-username {
      font-size: 0.9em;
    }
    .account-profile-name, .account-profile-username {
      align-self: flex-start;
    }
  }
</style>
<script>
  import IconButton from './IconButton.html'

  export default {
    computed: {
      headerIsMissing: (profile) => profile.header.endsWith('missing.png')
    },
    components: {
      IconButton
    }
  }
</script>