Add font stretch CSS example

[tannerdolby]

Fixes #573

I used the "Regular" style .ttf file from League Mono, but the text seems a bit "light", might just be me. Below is a demo of the working example in Chrome, (works in Firefox too).

font-stretch-demo.mov

[welcome]

💖 Thanks for opening this pull request! 💖
Here is a list of things that will help get it across the finish line:

• If this is a new or updated CSS interactive example, please ensure that you followed the CSS styleguide - If this is a new or updated JavaScript interactive example, please ensure that you followed the JavaScript styleguide - If your changes affects any of the steps in our contribution docs, please also make the relevant changes there.

[escattone]

@tannerdolby Just FYI, if you merge the master branch into your PR, the build should work again.

[tannerdolby]

@escattone Ok thanks for the heads up. Want me to merge master into this PR with another commit or is it fine in its current form?

[escattone]

@escattone Ok thanks for the heads up. Want me to merge master into this PR with another commit or is it fine in its current form?

@tannerdolby You could either merge master into this PR with another commit, or rebase your PR on master if you'd prefer. Thanks.

[tannerdolby]

Merged my feature branch with master and the build is working now.

[tannerdolby]

@escattone Let me know if you need me to make any changes before this is ready to merge.

[escattone]

@wbamberg I just added you to this repo with maintainer privileges (which I should have done long ago, sorry!), and then also added you as the reviewer.

@tannerdolby All you need is @wbamberg's review/approval. Thanks for your work on this!

[tannerdolby]

@escattone No problem! And thank you for initiating the review/approval from @wbamberg

[wbamberg]

Thanks @escattone ! It's been a while since I reviewed one of these :).

Thanks for the PR @tannerdolby ! I agree it does look a bit light. I suggested changing font-weight, unless there's a reason you went with 100 here. Apart from that this looks great.

[wbamberg]

👍 awesome, thanks @tannerdolby !

[welcome]

Congrats on merging your first pull request! 🎉🎉🎉

[wbamberg]

Thanks for your contribution @tannerdolby ! It's already live at https://interactive-examples.mdn.mozilla.net/pages/css/font-stretch.html .

If you want to do the last bit, so this example shows up on MDN, we need to update https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch over in https://github.com/mdn/content/tree/main/files/en-us/web/css/font-stretch , replacing the big grey box at the top with a macro call like:

<div>{{EmbedInteractiveExample("pages/css/font-stretch.html")}}</div>

Then we can merge that and the new example will be live on MDN.

[tannerdolby]

Fully completed when #4608 is merged in mdn/content 🎉