/* GoToSocial Copyright (C) GoToSocial Authors admin@gotosocial.org SPDX-License-Identifier: AGPL-3.0-or-later This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not, see . */ .profile .profile-header { background: $profile-bg; border-radius: $br; overflow: hidden; margin-bottom: 1rem; .moved-to { padding: 1rem; text-align: center; } .header-image-wrapper { position: relative; padding-top: 33.33%; /* aspect-ratio 1/3 */ img { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: cover; } } /* Basic info container has the user's avatar, display- and username, and role It's partially overlapped over the header image, by a negative margin-top. */ $avatar-size: 8.5rem; $name-size: 3rem; $username-size: 2rem; $overlap: calc($avatar-size - $name-size - $username-size); .basic-info { position: relative; display: grid; box-sizing: border-box; grid-template-columns: $avatar-size auto 1fr; grid-template-rows: $overlap $name-size auto; grid-template-areas: "avatar . ." "avatar namerole namerole" "avatar namerole namerole"; margin: 1rem; margin-top: calc(-1 * $overlap); gap: 0 1rem; .avatar-image-wrapper { grid-area: avatar; border: 0.2rem solid $avatar-border; border-radius: $br; /* Wrapper always same size + proportions no matter image inside. */ height: $avatar-size; width: $avatar-size; .avatar { /* Fit 100% of the wrapper. */ height: 100%; width: 100%; /* Normalize non-square images. */ object-fit: cover; /* Prevent image extending beyond rounded borders. */ border-radius: $br-inner; } } .namerole { grid-area: namerole; display: grid; gap: 0 1rem; box-sizing: border-box; grid-template-columns: 1fr auto; grid-template-rows: $name-size auto; grid-template-areas: "displayname displayname" "username role"; .displayname { grid-area: displayname; line-height: $name-size; font-size: 1.5rem; font-weight: bold; } .bot-username-wrapper { display: flex; gap: 0.5rem; grid-area: username; align-items: center; .bot-legend-wrapper { display: flex; gap: 0.25rem; align-items: center; background: $bg; color: $fg; border-radius: $br; padding: 0.1rem 0.4rem 0.2rem 0.4rem; font-variant: small-caps; font-weight: bold; cursor: default; .bot-icon { /* FA icon is weirdly aligned so tweak it */ margin-top: 0.25rem; } } .username { min-width: 0; line-height: $username-size; font-size: 1rem; font-weight: bold; color: $fg-accent; user-select: all; } } .role { background: $bg; color: $fg; border: 0.13rem solid $bg; grid-area: role; align-self: center; justify-self: start; border-radius: $br; padding: 0.3rem; line-height: 1.1rem; font-size: 0.9rem; font-variant: small-caps; font-weight: bold; &.admin { color: $role-admin; border-color: $role-admin; } &.moderator { color: $role-mod; border-color: $role-mod; } } } } } .profile .about-user { flex: 35 14rem; border-radius: $br; overflow: hidden; .col-header { margin-bottom: -0.25rem; } dt { font-weight: bold; } .fields { background: $profile-bg; display: flex; flex-direction: column; padding: 0 0.5rem; padding-top: 0.25rem; .field { padding: 0.25rem; display: flex; flex-direction: column; border-bottom: 0.1rem solid $gray2; > dt, > dd { word-break: break-word; } &:first-child { border-top: 0.1rem solid $gray2; } } } .bio { background: $profile-bg; padding: 1rem 0.75rem; padding-bottom: 1.25rem; } .accountstats { background: $bg-accent; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; .stats-item { display: flex; dt { width: 7rem; } } } } /* RSS icon isn't really part of the profile header exactly, but also it sort of is, and we want it styled the same for both microblog and gallery view anyway, so include it here. */ .rss-icon { display: block; margin: -0.25rem 0; .fa { font-size: 2rem; object-fit: contain; vertical-align: middle; color: $orange2; /* Can't size a single-color background, so we use a linear-gradient that's effectively white. */ background: linear-gradient(to right, $white1 100%, transparent 0) no-repeat center center; background-size: 1.2rem 1.4rem; /* light mode */ @media (prefers-color-scheme: light) { background: linear-gradient(to right, $white 100%, transparent 0) no-repeat center center; background-size: 1.2rem 1.4rem; } } } /* Tablet-ish-kinda size. */ @media screen and (max-width: 750px) { .profile .profile-header { .basic-info { grid-template-columns: auto 1fr; grid-template-rows: $avatar-size $name-size auto; grid-template-areas: "avatar avatar" "namerole namerole" "namerole namerole"; /* Make display name a bit smaller so there's more chance of being able to read everything. */ .namerole { .displayname { font-size: 1.2rem; line-height: 2rem; margin-top: 0.5rem; } } } } } /* Phone-ish-kinda size. */ @media screen and (max-width: 500px) { .profile .profile-header .basic-info .namerole { /* Line up in smallest possible horizontal space to avoid overflow. */ display: flex; flex-direction: column; gap: 0.5rem; /* Don't hug the right anymore (good life advice in general). */ .role { align-self: flex-start; } /* Allow this to wrap in case of a really skinny screen. */ .bot-username-wrapper { flex-wrap: wrap; } } }