# 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.