www: align copy icon

[geocine]

Summary

This has been bothering me everytime I visit the rustup.rs website

Why

It's misaligned

Validation

Check screenshot

[ChrisDenton]

If the issue is extract vertical spacing messing up the centering, would using div.copy-icon svg { display:bock } have the same effect without needing to manually specifying the offset?

[rami3l]

If the issue is extract vertical spacing messing up the centering, would using div.copy-icon svg { display:bock } have the same effect without needing to manually specifying the offset?

@ChrisDenton I think the thing with our icon is that IIRC its visual center is not the actual center so that's why manual adjustments have to be made 😓

I'd argue that in "proper" Web frontend an asset library is needed but probably not in this case: so far we are keeping a very minimal Vanilla JS setup.

[ChrisDenton]

For the horizontal center that's true (because there's a bit to one side) but for the vertical center it shouldn't be

[rami3l]

For the horizontal center that's true (because there's a bit to one side) but for the vertical center it shouldn't be

@ChrisDenton I get it, it's a typo XDD (block, not bock)

[ChrisDenton]

Oops, sorry!

[rami3l]

Suggested change

	fill: var(--body-color);
	display: block;

View changes since the review

[rami3l]

@ChrisDenton Is it more like this?

[ChrisDenton]

Yep! Does it make a difference in your browser?

[rami3l]

Suggested change

	transform: translateX(2px) translateY(2px);
	transform: translateX(2px);

View changes since the review