semaphore/src/routes/_components/profile/AccountProfile.html

<h1 class="sr-only">{profileForAccount}</h1>
{#if moved}
  <AccountProfileMovedBanner {account} />
{/if}
<div class={className}
     style="background-image: url({headerImage});"
     ref:accountProfile>
  {#if !headerImageIsMissing}
    <div class="account-profile-banner">
      <img class="account-profile-banner-image" src={headerImage} alt=""/>
    </div>
  {/if}
  <div class="account-profile-grid-wrapper">
    <div class="account-profile-grid">
      <AccountProfileHeader {account} {relationship} {verifyCredentials} />
      <AccountProfileFollow {account} {relationship} {verifyCredentials} />
      <AccountProfileNote {account} />
      <AccountProfileMeta {account} />
      <AccountProfileDetails {account} {relationship} {verifyCredentials} />
    </div>
  </div>
  <AccountProfileFilters account={$currentAccountProfile} {filter} />
</div>
<style>
  .account-profile {
    position: relative;
    background-size: cover;
    background-position: center;
  }

  .account-profile.moved {
    filter: grayscale(0.8);
  }

  .account-profile.header-image-is-missing {
    background-color: #ccc;
  }

  .account-profile-grid {
    display: grid;
    grid-template-areas: "avatar     name        label     followed-by   follow"
                         "avatar     username    username  username      follow"
                         "avatar     note        note      note          follow"
                         "meta       meta        meta      meta          meta"
                         "details    details     details   details       details";
    grid-template-columns: min-content auto 1fr 1fr min-content;
    grid-column-gap: 15px;
    grid-row-gap: 5px;
    padding: 20px;
    padding-bottom: 0;
    justify-content: center;
    border-bottom: var(--main-border-size) solid var(--main-border);
  }

  @supports (-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%)) {
    :global(.account-profile-grid-wrapper) {
      -webkit-backdrop-filter: blur(20px) saturate(110%);
      backdrop-filter: blur(20px) saturate(110%);
      background-color: var(--account-profile-bg-backdrop-filter);
    }
  }

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

  @media (max-width: 767px) {
    .account-profile-grid {
      display: grid;
      grid-template-areas: "avatar     name          follow"
                           "avatar     label         follow"
                           "avatar     username      follow"
                           "avatar     followed-by   follow"
                           "note       note          note"
                           "meta       meta          meta"
                           "details    details       details";
      grid-template-columns: min-content minmax(auto, 1fr) min-content;
      grid-template-rows: min-content min-content 1fr min-content;
      padding: 10px;
    }
  }

  @media (max-width: 400px) {
    .account-profile-grid {
      grid-template-areas: "avatar      avatar"
                           "avatar      avatar"
                           "name    name"
                           "username    username"
                           "label       label"
                           "followed-by followed-by"
                           "follow      follow"
                           "note        note"
                           "meta        meta"
                           "details     details";
      grid-template-columns: min-content 1fr;
      grid-column-gap: 5px;
    }
  }

  .account-profile-banner {
    aspect-ratio: 3/1;
    background-color: var(--body-bg);
  }
  .account-profile-banner-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>
<script>
  import AccountProfileHeader from './AccountProfileHeader.html'
  import AccountProfileFollow from './AccountProfileFollow.html'
  import AccountProfileNote from './AccountProfileNote.html'
  import AccountProfileMeta from './AccountProfileMeta.html'
  import AccountProfileDetails from './AccountProfileDetails.html'
  import AccountProfileMovedBanner from './AccountProfileMovedBanner.html'
  import AccountProfileFilters from './AccountProfileFilters.html'
  import { store } from '../../_store/store.js'
  import { classname } from '../../_utils/classname.js'
  import { scheduleIdleTask } from '../../_utils/scheduleIdleTask.js'
  import { addEmojiTooltips } from '../../_utils/addEmojiTooltips.js'
  import { formatIntl } from '../../_utils/formatIntl.js'

  export default {
    oncreate () {
      scheduleIdleTask(() => addEmojiTooltips(this.refs.accountProfile))
    },
    store: () => store,
    computed: {
      headerImageIsMissing: ({ account }) => account.header.endsWith('missing.png'),
      headerImage: ({ $autoplayGifs, account }) => $autoplayGifs ? account.header : account.header_static,
      accountName: ({ account }) => (account && (account.display_name || account.username)) || '',
      moved: ({ account }) => account.moved,
      className: ({ headerImageIsMissing, $underlineLinks, moved }) => (classname(
        'account-profile',
        moved && 'moved',
        headerImageIsMissing && 'header-image-is-missing',
        $underlineLinks && 'underline-links'
      )),
      profileForAccount: ({ accountName }) => (
        formatIntl('intl.profileForAccount', { account: accountName })
      )
    },
    components: {
      AccountProfileHeader,
      AccountProfileFollow,
      AccountProfileNote,
      AccountProfileMeta,
      AccountProfileDetails,
      AccountProfileMovedBanner,
      AccountProfileFilters
    }
  }
</script>