✔️ Deploy Preview for keen-clarke-470db9 ready!

🔨 Explore the source changes: 62039cc

🔍 Inspect the deploy log: https://app.netlify.com/sites/keen-clarke-470db9/deploys/612544544415c60008a5a307

😎 Browse the preview: https://deploy-preview-622--keen-clarke-470db9.netlify.app

On the How it Works page, the third item in the Maintainer workflow (Create a patch file) is oriented backward, e.g. the code is on the left, the text is on the right, but it should be the opposite.

Yeah, that's a long-standing issue with all of our how-it-works pages. I'll have to wrestle with the columns + offsets on that tomorrow.

Thanks for taking a crack at this Zack!

I'm really not trying to nitpick for the sake of nitpicking, but I have a gut feeling that the large images are making it harder to skim the page.

Here's an idea to try:

First, for the pull request image (the one below "You review and merge"), here's a smaller screenshot that I think will cleanly fit the zig-zag and still captures all the same content:

(I created it by shrinking my browser window down and using chrome dev tools to remove / shrink stuff that wasn't necessary)

Now, the "Use the UI" and "Use the CLI" tabs are harder. Perhaps what we can do there is to create a thumbnail of each that fits the zig-zag UI (410x310) and overlay a "play" button on top of each (since something is overlayed on the thumbnail anyway, it doesn't have to be super crisp). When the user clicks the play button, we add a tiny bit of JS code to replace the image with the full-size, sharp, readable gif, which starts playing. That way, while skimming, you have the normal zig-zag flow, but when you want to see details, you can still do so, and you'll be paying full attention to it after clicking (rather than seeing a .gif part way through playing while scrolling).

WDYT?

Makes sense - I will take a crack at implementing that.

Implemented in a5a1618

Merging now.