Miniscule margin & shadow adjustment for mana symbols

[spacemonaut]

The site updated its mana symbols a few days ago, and I see they got adjusted a little bit since to tighten up the sizing. They look pretty neat!

There's something I've been noticing about them that's slightly off though:

WUBRG, : Do the thing.

In the current view, the a symbol gets overlapped by the shadow of its following symbol:

Usually they get a little more spacing, and the shadows aren't fuzzy at all:

I suggest a minimal change to the CSS for .sym_mana:

Code: Select all

filter: drop-shadow(-0.04em 0.05em 0.02em black);
// becomes
filter: drop-shadow(-0.04em 0.05em 0 black);
margin-inline-start: 0.05em;
margin-inline-end: 0.05em;

[spacemonaut]

Here's a before/after at regular zoom, which I was for some reason prevented from adding to the regular post:

(On the original post there was a console error when I picked these files to add them, and it also broke the "Add files" button from responding to further presses, so that might be something to look at as well.)

[Feyd_Ruin]

we've updated from individual SVGs to our own custom icon font (which also replaces fontawesome, etc).
I'm still tweaking a bit, since I've basically had to remake each of them, the full front end, etc.

Margin added.

[spacemonaut]

Aw yiss. Thanks!

The new mana symbols really are looking pretty good.

[dyd]

They are quite broken from mobile, though

When?

Show

Hide

I'm using a Galaxy S8 android phone

Symbols are overflowing on the right side... ugly



(Not to mention that from mobile some symbols are not always loading... but that happened before the update, so it's unrelated)

[Feyd_Ruin]

They are quite broken from mobile, though

When?

Show

Hide

I'm using a Galaxy S8 android phone

Symbols are overflowing on the right side... ugly



(Not to mention that from mobile some symbols are not always loading... but that happened before the update, so it's unrelated)

What phone/browser are you using?
(It looks normal on my iPhone, etc, so I need to narrow it down)

edit: I did adjust some things, but none of my test browsers were showing the issue, so I have no idea if it helped

[dyd]

I'm on Chrome on an Android mobile - Samsung Galaxy S8.

I've tried resetting the accessibility settings and all seems fine.
If I set default text resizing to something >100%, the issue happens again.

I think the icons are resized with the font, while the background stays the same size

[Feyd_Ruin]

My S6 spare phone looked normal, and I found an S9 emulator which looked normal.
This is weird. Still looking, not going to leave you hanging.

(Double check your chrome is up to date, to be safe?)

[Feyd_Ruin]

I'm on Chrome on an Android mobile - Samsung Galaxy S8.

I've tried resetting the accessibility settings and all seems fine.
If I set default text resizing to something >100%, the issue happens again.

I think the icons are resized with the font, while the background stays the same size

How about now? Any better?

[dyd]

wbrgtqcex5{2/w}{u/r}{b/g/p} still the same:
- ok with text size = 100%
- weird with text size = 130%

I'm going to add a couple screenshots

130% vs 100%


Chrome > Settings > Accessibility

[dyd]

This looks like one of those nasty bugs related to weird settings, that a sane developer would throw into the "Can't reproduce" pile
...at least, that's what I* would do so @Feyd_Ruin thank you for the time you've spent on this small issue


* as a developer... still working on the "sane" part

[Feyd_Ruin]

Lol. Alright. Well go with 100% for now.
If I can figure out how to otherwise adjust, I will.