shields
shields copied to clipboard
badges
fix: keep logo & text alignments consistent
Some of our current badges have some inconsistent spacing. Especially the logo-only badge. I've fixed/changed them to be consistent.
I've attached the 5x zoom level preview image with measurements. As you can see, some badges don't have consistent left-right padding. But if the numbers differ by only 1, it can be ignored.
I didn't change the style of the social badge since its design is a bit special. I think the padding is fine. Please let me know if you want the social badge to be changed as well.
The measurement tool I use: PixelSnap 2.
img.shields.io
    \
    \
    \
    \
    
pr-11284-badges-shields.fly.dev
    \
    \
    \
    \
    
localhost:8080
GitHub cannot display localhost assets since they have Camo for caching resources. But these links might be helpful for you to review.
Markdown
    \
    \
    \
    \
    
HTML
<img src="http://localhost:8080/badge/M-M-000" />
<img src="http://localhost:8080/badge/-M-000" />
<img src="http://localhost:8080/badge/M-M-000?logo=npm" />
<img src="http://localhost:8080/badge/-M-000?logo=npm" />
<img src="http://localhost:8080/badge/--000?logo=npm" />
<br />
<img src="http://localhost:8080/badge/M-M-000?style=flat-square" />
<img src="http://localhost:8080/badge/-M-000?style=flat-square" />
<img src="http://localhost:8080/badge/M-M-000?logo=npm&style=flat-square" />
<img src="http://localhost:8080/badge/-M-000?logo=npm&style=flat-square" />
<img src="http://localhost:8080/badge/--000?logo=npm&style=flat-square" />
<br />
<img src="http://localhost:8080/badge/M-M-000?style=plastic" />
<img src="http://localhost:8080/badge/-M-000?style=plastic" />
<img src="http://localhost:8080/badge/M-M-000?logo=npm&style=plastic" />
<img src="http://localhost:8080/badge/-M-000?logo=npm&style=plastic" />
<img src="http://localhost:8080/badge/--000?logo=npm&style=plastic" />
<br />
<img src="http://localhost:8080/badge/M-M-000?style=for-the-badge" />
<img src="http://localhost:8080/badge/-M-000?style=for-the-badge" />
<img src="http://localhost:8080/badge/M-M-000?logo=npm&style=for-the-badge" />
<img src="http://localhost:8080/badge/-M-000?logo=npm&style=for-the-badge" />
<img src="http://localhost:8080/badge/--000?logo=npm&style=for-the-badge"/>
<br />
<img src="http://localhost:8080/badge/M-M-000?style=social" />
<img src="http://localhost:8080/badge/-M-000?style=social" />
<img src="http://localhost:8080/badge/M-M-000?logo=npm&style=social" />
<img src="http://localhost:8080/badge/-M-000?logo=npm&style=social" />
<img src="http://localhost:8080/badge/--000?logo=npm&style=social" />
| Messages | |
|---|---|
| :book: | :sparkles: Thanks for your contribution to Shields, @LitoMore! |
Generated by :no_entry_sign: dangerJS against 4940ae76fc10b34d7d289de89920ac0b8119dc18
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
I've attached two 5x zoom level images with measurements to the PR description. It appears that the logo-only in-for-the-badge style still has an alignment issue. I will look into it.
I've fixed the style of the for-the-badge. I also updated its 5x preview image. The 1x preview may require your deployment to update.