Files

docs: add screenshots section to README with composed collage

Three-panel collage (popup, before, after) generated via Pillow script.
4:3 aspect ratio, 1200px max, gradient background with drop shadows.

Co-authored-by: Cursor <cursoragent@cursor.com>

2026-08-28 03:09:55 -04:00

2.2 KiB

Raw Permalink Blame History

README Screenshots -- Final

Task

Add a Screenshots section to the README with a composed collage hero image and links to full-size originals.

Changes Made

New files

docs/reddit-extension-collage.png -- 1200x900 (4:3) composed collage of all three screenshots.
docs/make_collage.py -- Pillow script that generates the collage. Configurable aspect ratio, max dimension, gradient, borders, and drop shadows.
docs/reddit-extension-popup.png -- full-page capture of the extension popup (captured manually via moz-extension:// URL in a tab).
docs/reddit-extension-disabled.png -- old.reddit.com without the extension.
docs/reddit-extension-enabled.png -- old.reddit.com with the extension active.

Modified files

README.md -- added Screenshots section between "What it does" and "Installation". Contains the collage hero image, a blockquote caption, and a table linking to each full-size original.

Collage Details

Final collage configuration after iterating through multiple options:

Layout: popup on left, disabled screenshot top-right, enabled screenshot bottom-right
Aspect ratio: 4:3, clamped to 1200px max dimension (chosen from 5:4, 4:3, 3:2, 16:10, 16:9, 6:5, 7:6 variants)
Background: 45-degree linear gradient from #888888 to #575757
Panel borders: #111111, 1px, 4px corner radius
Drop shadows: offset (4,4), blur 8, rgba(0,0,0,0.43), cast bottom-right to complement the gradient angle
Padding: 20px outer, 14px gaps between panels (scaled proportionally when clamped)

Lessons Learned

Firefox extension popups close on focus loss. Opening moz-extension://<uuid>/popup/popup.html in a regular tab is the simplest workaround for full-page captures.
GitHub-flavored markdown cannot crop images, strips rowspan, and removes CSS. A pre-composed collage image is the only way to get a multi-panel layout in a README.
Iterating on visual output (colors, ratios, effects) works well as a rapid generate-and-review loop with Pillow.
Generating multiple aspect ratio variants at once and letting the user compare side-by-side is faster than guessing one at a time.

Follow-up

Run python docs/make_collage.py to regenerate the collage if source screenshots are updated.

2.2 KiB Raw Permalink Blame History