<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"> {{profile.display_name}} </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: 10px; 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-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 5px; } .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>