cottongin
dc31d21104
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>
37 lines
2.2 KiB
Markdown
37 lines
2.2 KiB
Markdown
# 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.
|