diff options
| author |  tobi <31960611+tsmethurst@users.noreply.github.com> | 2024-07-08 15:47:03 +0200 |
|---|---|---|
| committer |  GitHub <noreply@github.com> | 2024-07-08 15:47:03 +0200 |
| commit | d70f4e166dd9ce2f11a6ac2d7a2e500515657041 (patch) | |
| tree | 256f2a4423742a41adceb00dbec0cd56c568e908 /web/source/css | |
| parent | [chore]: Bump github.com/minio/minio-go/v7 from 7.0.72 to 7.0.73 (#3083) (diff) | |
| download | gotosocial-d70f4e166dd9ce2f11a6ac2d7a2e500515657041.tar.xz | |
[feature/frontend] Allow setting alt-text for avatar + header (#3086)
Diffstat (limited to 'web/source/css')
| -rw-r--r-- | web/source/css/profile.css | 29 |
1 files changed, 24 insertions, 5 deletions
diff --git a/web/source/css/profile.css b/web/source/css/profile.css index a966d768a..3f7f43d0d 100644 --- a/web/source/css/profile.css +++ b/web/source/css/profile.css @@ -82,18 +82,37 @@ margin-top: calc(-1 * $overlap); gap: 0 1rem; - .avatar { + .avatar-image-wrapper { grid-area: avatar; - height: $avatar-size; - width: $avatar-size; + border: 0.2rem solid $avatar-border; border-radius: $br; - overflow: hidden; /* prevents image extending beyond rounded borders */ + + /* + Wrapper always same + size + proportions no + matter image inside. + */ + height: $avatar-size; + width: $avatar-size; - img { + .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; } } |