Skip to content

fix(readme): crop logo to actual content#83

Merged
naorsabag merged 2 commits into
masterfrom
fix/logo-crop-tight
May 7, 2026
Merged

fix(readme): crop logo to actual content#83
naorsabag merged 2 commits into
masterfrom
fix/logo-crop-tight

Conversation

@naorsabag
Copy link
Copy Markdown
Owner

@naorsabag naorsabag commented May 7, 2026

Summary

`docs/logo.png` ships at 1280×640 but the visible artwork (bunny + OPENHOP wordmark) only fills 237 px of the height — about 37% of the frame. The remaining 180 px above and 223 px below are transparent padding inherited from the original ChatGPT source image.

That padding makes the README header render with extra vertical space even after #82 collapsed the inter-element gaps. Cropping the PNG to its actual content (with 16 px breathing room) is what actually closes the visible gap.

Change

Before After
Dimensions 1280×640 1090×269
File size 256 KB 248 KB
Whitespace above content 180 px 16 px
Whitespace below content 223 px 16 px
Rendered height in README at `width=600` ~300 px ~148 px

Linked context

  • Direct follow-up to fix(readme): collapse vertical gaps in header #82 — that PR collapsed layout gaps; this one collapses the image-internal gap that turned out to be the larger contributor.
  • `.github/social-preview.png` is intentionally not updated — it stays at 1280×640 because GitHub's social preview (Settings → Social preview) expects a 2:1 aspect ratio for share cards.

Testing

  • Threshold detection: alpha > 32 → bbox `(111, 180, 1169, 417)`, then +16 px padding → `(95, 164, 1185, 433)` → 1090×269.
  • File loads correctly via PIL; mode RGBA; corner pixel still alpha=0 (transparency preserved).
  • README tag `` will now render at ~148 px tall instead of ~300 px.

Checklist

  • Build passes (no code changes)
  • No prettier / format issues (image-only change)
  • CHANGELOG entry not needed (visual asset only)

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Documentation
    • Minor README.md formatting adjustments.

…space)

The current logo PNG is 1280x640 but the visible bunny + OPENHOP
wordmark only occupies 237 px of the height (~37%) — the rest is
transparent padding from the original ChatGPT source image. That
padding eats vertical space in the README header even though the
surrounding layout is already tight.

Threshold-cropped to alpha>32 + 16px padding: 1090x269. At
width=600 in the README the rendered height drops from ~300px to
~148px — visually closes the gap users have been reporting.

docs/logo.png and .github/social-preview.png are intentionally kept
distinct now: README image is content-tight; social preview keeps
the 1280x640 (2:1) framing GitHub's share-card UI expects.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 7, 2026

Review Change Stack
No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 0927cb30-f534-4de8-92b7-0309bba81751

📥 Commits

Reviewing files that changed from the base of the PR and between 1b1688d and a79ac92.

⛔ Files ignored due to path filters (1)
  • docs/logo.png is excluded by !**/*.png
📒 Files selected for processing (1)
  • README.md

Walkthrough

README.md header formatting is normalized by inserting a blank line at the start of the file. No documentation content, sections, or links are added, removed, or modified.

Changes

Documentation

Layer / File(s) Summary
README Header Formatting
README.md
Line 2 is normalized to a single blank line; no README content changes.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly describes the main change: cropping the logo to remove unnecessary transparent padding from the README image, which directly aligns with the primary objective of reducing vertical whitespace in the README header.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/logo-crop-tight

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.


Comment @coderabbitai help to get the list of available commands and usage tips.

The post-#82 edits on master dropped the blank line between the
"# 🐇 OpenHop — …" heading and the <p align="center"> block. CI's
prettier format:check rejects adjacent block elements without a
blank line separator.

This is the same fix that landed in #82 (commit 0c0b1b0); replaying
it because master regressed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@naorsabag naorsabag merged commit c43cdf4 into master May 7, 2026
7 checks passed
@naorsabag naorsabag deleted the fix/logo-crop-tight branch May 8, 2026 06:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant