hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

scale avatar and user title with container width

Browse source
This commit is contained in:
Henry Jameson 2025-07-30 00:30:07 +03:00
commit 4ffd8499a7
2 changed files with 10 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/user_card/user_card.scss
View file

@ -149,6 +149,7 @@
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
margin-bottom: 1em; margin-bottom: 1em;
container: user-card / inline-size;
> * { > * {
min-width: 0; min-width: 0;
@ -165,7 +166,9 @@
--_avatarShadowInset: var(--avatarShadowInset); --_avatarShadowInset: var(--avatarShadowInset);
width: 7em; width: 7em;
width: calc(min(7em, 20cqw));
height: 7em; height: 7em;
height: calc(min(7em, 20cqw));
object-fit: cover; object-fit: cover;
} }
} }
@ -267,10 +270,14 @@
--link: var(--text) !important; --link: var(--text) !important;
} }
.top-line, { .top-line {
display: flex; display: flex;
// these two normalize position and height when custom emoji are used
line-height: 2; line-height: 2;
margin-bottom: -0.2em;
font-weight: 600; font-weight: 600;
font-size: 110%;
font-size: calc(max(110%, 4cqw));
} }
.bottom-line { .bottom-line {

2
src/components/user_panel/user_panel.vue
View file

@ -49,7 +49,9 @@
.Avatar { .Avatar {
width: 5em; width: 5em;
width: calc(min(5em, 20cqw));
height: 5em; height: 5em;
height: calc(min(5em, 20cqw));
} }
} }