feat: add a theme-aware banner and a wordless avatar - #49
Merged
Conversation
The profile opened with no visual at all — the only logo line was commented out, and pointed at logo-small.jpg, a real JPEG with no transparency that renders as a white box on any dark background. The banner carries the mark, the wordmark and the tagline on the left, and a passing check report on the right. A banner that only repeats the project name teaches the reader nothing; the report says what the tool is for before the tagline is read. Light and dark are paired in a <picture>, so it follows the reader's theme. The avatar drops the wordmark on purpose. GitHub shows org avatars at around 40px in most places, where "COMMIT" is an unreadable smudge — and the current one is cropped so that the check's upper-right arm is cut off by the frame. White on brand blue reads at 20px and matches the banner lockup, so the icon and the banner are visibly one brand. PNGs are what the README references, because GitHub proxies images through camo and camo handles SVG unreliably. The SVGs beside them are the source. The h1 and the repeated tagline are gone: the banner states both, and the org name already appears in GitHub's own page chrome above it. logo.jpg and logo-small.jpg are left in place in case something outside this repository links to them, and branding/README.md says why neither should be used again. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01U9zFxq8V4qxG4aMzJhGBFn
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (8)
📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe change documents branding specifications and legacy asset limitations. The profile README now uses responsive dark- and light-mode PNG banners with descriptive alt text. ChangesBranding documentation and profile integration
Estimated code review effort: 1 (Trivial) | ~3 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Commit-Check ✔️ |
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
2 participants
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.
The org profile opened with no visual at all. The only logo line was commented
out, and it pointed at
logo-small.jpg— a real JPEG, so no transparency, soa white box on any dark background.
Banner
Mark, wordmark and tagline on the left; a passing check report on the right.
The report is the point: a banner that only repeats the project name teaches
the reader nothing, while a passing report says what the tool is for before
the tagline is read.
Light and dark are paired in a
<picture>, so it follows the reader's theme.Brand colour
#2c9ccdthroughout; the dark variant sits on GitHub's own#0d1117with the ink and muted tones re-picked for contrast rather thanreused from the light one.
Avatar
branding/avatar.png— upload it in the org settings, I can't set that fromhere.
It drops the wordmark deliberately. GitHub shows org avatars at roughly
40px in most places, and at that size "COMMIT" is an unreadable smudge.
The current avatar also crops the check so its upper-right arm is cut off by
the frame, and sits off-centre with dead space in the top-left.
White on brand blue was chosen over blue-on-white and blue-on-ink because it
holds the most contrast at small sizes, and it uses the same lockup as the
banner — so the org icon and the banner read as one brand instead of two
treatments of a similar idea. I rendered all three at 280 / 80 / 40 / 20px
before picking.
Details worth knowing
and camo handles SVG unreliably — the same reason
commit-check-actionserves its comment logo as PNG. The
.svgfiles beside them are the source;edit those and re-render.
h1and the repeated tagline are gone. The banner states both, andthe org name already appears in GitHub's page chrome directly above it —
keeping all three meant saying "Commit Check" three times in a row. Say the
word if you would rather keep an
h1for the case where images are blocked;the alt text covers that today.
logo.jpgandlogo-small.jpgare left in place. Nothing in the repos Ican see references them, but something outside might, so removing them is
your call.
branding/README.mdrecords why neither should be used again —including that
logo.jpgis actually a PNG wearing a.jpgextension.Typeface
Liberation Sans (Arial-metric). It is clean but not distinctive — no Inter or
similar was available where these were rendered. If you want a stronger
wordmark, supply a font file and I will re-cut the banner; the SVG sources
make that a small change.
Generated by Claude Code
Summary by CodeRabbit
Documentation
Style