Repository navigation
README: drop img heights so GitHub skips its gray placeholder - #19
Merged
Merged
Conversation
GitHub styles a raw.githubusercontent.com <img> that has both width and height with a placeholder (background-color: var(--bgColor-muted); border-radius: 6px). The logo is transparent, so the gray showed through behind it. With only width set, GitHub leaves the image unstyled, and the SVGs keep their aspect ratio, so the rendered sizes are unchanged. The wordmark is inside <picture>, which GitHub does not style this way, but drop its height too so both images follow the same rule. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UPUkrGnMDAicigzqmP8keN
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
After #18, the README logo showed on a light gray rounded rectangle.
Cause: when an
<img>loads from an absoluteraw.githubusercontent.comURL and has bothwidthandheight, GitHub's server-side renderer adds this inline style:It's meant as a loading placeholder, but
logo.svgis transparent with semi-transparent shapes, so the gray stays visible behind it.Fix: keep only
widthon the logo (152) and on the wordmark (177). The wordmark is inside<picture>, which GitHub doesn't style this way, but I dropped itsheighttoo so both images follow the same rule. The SVGs keep their own proportions, so the rendered sizes stay 152×133 and 177×43.Verification
python-pillow/Pillow's raw.githubusercontent.com logo, which has width and height, gets it too.numpy/numpy's width-only raw.githubusercontent.com logo doesn't.pallets/flask's height-only one doesn't either.🤖 Generated with Claude Code
https://claude.ai/code/session_01UPUkrGnMDAicigzqmP8keN
Generated by Claude Code