# README Screenshots

## Task

Add a Screenshots section to the README featuring a composed collage hero image and links to each full-size original screenshot.

## Changes Made

### New files
- `docs/make_collage.py` -- Python/Pillow script that composes the three source screenshots into an 800x600 collage image (popup left, disabled top-right, enabled bottom-right, light gray background, 4px gaps).
- `docs/reddit-extension-collage.png` -- the generated collage output.

### Modified files
- `README.md` -- added a "Screenshots" section between "What it does" and "Installation" containing the collage image, a blockquote caption describing the layout and noting RES was active during capture, and a table linking to each full-size original.

## Source screenshots
- `docs/reddit-extension-popup.png` (645x2757) -- captured by user by opening `moz-extension://<uuid>/popup/popup.html` in a Firefox tab
- `docs/reddit-extension-disabled.png` (2794x1671) -- old.reddit.com without extension
- `docs/reddit-extension-enabled.png` (2794x1671) -- old.reddit.com with extension

## Lessons Learned
- Firefox extension popups close on focus loss. Opening the popup HTML directly via `moz-extension://` URL in a regular tab is the simplest workaround for full-page captures.
- GitHub-flavored markdown cannot crop images, does not honor `rowspan`, and strips most CSS. A pre-composed collage image is the only way to get a multi-panel layout.
- Pillow's `Image.LANCZOS` resampling produces clean downscaled screenshots even at significant reduction ratios (e.g., 2794px down to ~546px).

## Follow-up
- The `docs/make_collage.py` script can be re-run if source screenshots are updated.
- Consider adding the collage script or output to `.gitignore` if the generated image shouldn't be tracked separately from sources.