diff options
Diffstat (limited to 'web/source/css/_profile-header.css')
| -rw-r--r-- | web/source/css/_profile-header.css | 343 |
1 files changed, 343 insertions, 0 deletions
diff --git a/web/source/css/_profile-header.css b/web/source/css/_profile-header.css new file mode 100644 index 000000000..b4ebadf8d --- /dev/null +++ b/web/source/css/_profile-header.css @@ -0,0 +1,343 @@ +/* + 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 <http://www.gnu.org/licenses/>. +*/ + +.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; + } + } +} |