Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove blank.gif usage for RSS icons #1167

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Remove blank.gif usage for RSS icons #1167

wants to merge 1 commit into from

Conversation

salty-horse
Copy link
Collaborator

Also removed the unused image rss30.gif

@dfabulich
Copy link
Collaborator

I think this had a weird effect on the vertical alignment of the RSS icon. I think I like the old vertical alignment better, but you could talk me into changing it. WDYT? 🤔

Before

image

After

image

@salty-horse
Copy link
Collaborator Author

I know - I think it's because images elements are aligned differently than background images.

It looks better with bottom instead of center, but only in one font size, and there are several in use. For example, commentlog currently looks bad in production, as the icon starts beneath the tops of the letters, and extends beneath the text.
commentlog

It can be tweaked individually for each font size, or maybe a separate inline element (not an img) will work better.

@dfabulich
Copy link
Collaborator

Maybe we should stick with <img> with content:? https://stackoverflow.com/a/11484688/54829

That will let us set width and height attributes, avoiding content layout shift.

<!doctype html>

<style>
.MyClass123{
    content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="MyClass123"/>

@salty-horse
Copy link
Collaborator Author

salty-horse commented Nov 23, 2024 •
edited
Loading

What about the commentlog case where it isn't quite aligned correctly?

Another option is to use an SVG image that scales with the font size. (This one is GPL, but there might be others with a more permissive license)

EDIT: Actually, this icon comes from http://www.feedicons.com/ which has a more permissive license.

@salty-horse
Copy link
Collaborator Author

salty-horse commented Nov 26, 2024 •
edited
Loading

@dfabulich I switched to the SVG icon from the linked page (the guidelines say it's free to use in this context.)

I changed the CSS to use em units and a vertical position of 80%. I like how it's positioned, and I played around with the font size in the inspector to verify it will look consistent in all situations. You might prefer it at 85% or 90%.
rss

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dfabulich dfabulich Awaiting requested review from dfabulich

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@salty-horse @dfabulich