Replies

Jun 28, 2025 8 months ago
Frenchi
is hopelessly romantic
User Avatar
Vivisect

when the new winner display system was implemented, i immediately noticed that HAs became stretched as the image width was overriden by the styling for the .w-32 class, which sets the width to calc(var(--spacing)*40). i figured maybe this was just an issue on my end but it was easily fixed by hard-coding all instances of the HA image to display at 125px wide, so i didn't bother bringing it up. but then i realized there are places on-site where the HA is displayed at different scales, such as on the new masquerade dance page—so now my HA was being squished instead of stretched!

sooo now i can't figure out how to fix the contest winner HA display (i've tried ".avatar-user .w-32" and vice versa but neither way works) without overriding ALL images in a w-32 sized elements, or without overriding ALL instances of the HA. since i don't have any way to manually select just this one instance of that class, is there a way this can be corrected on the official end?

[edit] wait, nope, turns out the squished ballroom HAs are caused by a DIFFERENT styling conflict. the ones that are flipped have their --tw-scale-x set to -1, which overrides the styling that's supposed to scale their width by 125%. and THAT can't be fixed without skewing the OTHER scaled HAs on that page. so it looks like the solution is actually to remove the -1 entirely (or swap it for a 1) and use transform: rotateY(180deg) to achieve the horizontal flip instead, THEN add an !important to the .scale-125's x-scaling. ugh. ok. i THINK that's it...

Aug 9, 2025 7 months ago
Reya
has ALL of the beanbags!
User Avatar

I moved this into site functionality, just fyi

Please log in to reply to this topic.