Add click to copy behavior

[jamesnw]

Description

Adds Click to Copy behavior on each output format and on the fg and bg colors.

I used navigator.clipboard.writeText, as it appears to have sufficient cross-browser support. Our content is all plain text, and our use case is driven directly by user interaction, so I don't think we need to complicate things.

Steps to test/reproduce

Verify that clicking the button copies the correct value.

[netlify[bot]]

✅ Deploy Preview for oddcontrast ready!

Name	Link
🔨 Latest commit	392d049313479c2e0f476a943dfddd3b2609a419
🔍 Latest deploy log	https://app.netlify.com/sites/oddcontrast/deploys/6516e647a9ae510008832f7b
😎 Deploy Preview	https://deploy-preview-119--oddcontrast.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[stacyk]

@dvdherron I reworked this a bit to add some specific focus styles for icon-only links and buttons so when you get a chance, take another look. Not sure if @mirisuzanne wants to review this as well. I switched to use focus-visible more often to give mouse users a bit of a break.

[dvdherron]

I reworked this a bit to add some specific focus styles for icon-only links and buttons

These new focus styles for the icon-only links look great 👍🏽

[stacyk]

It all works great for me. But the copy buttons are very prominent visually. Maybe they could get a bit lighter icon color or something?

@mirisuzanne I lightened all icon-only btw/links in the main and footer areas (so clipboards and social icon links) and also made the clipboards next to the input a tad smaller. I think this works better so thanks for that suggestion.

[mirisuzanne]

@stacyk looks great!