Add CSS for embedded Bluesky posts

[seanthegeek]

Type of change

• Improvement (refactoring and improving code)

Description

Add CSS for the bluesky-embed class used in HTML generated by the "Embed post" feature in Bluesky.

• Center the post
• Add 1rem the bottom margin to match the bottom margin for p in Chirpy

Additional context

The content of the embed HTML changes greatly for each individual Bluesky post, so Bluesky is not a good candidate for a Chirpy embed include. Here is an example of embed HTML for a Bluesky post, with the code deminified and beautified to make it easier to read for this example.

<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:flfa7b6kgjqp3bbh223tmpjk/app.bsky.feed.post/3lbvtx4qei222" data-bluesky-cid="bafyreiakgrpjfo5yn7zytxeyaqcpplg6umt4siahmparnkat3l35yfjmhe">
  <p lang="en">Blue Sky team, you&#x27;re building something special and great here. Keep at it. Stick with it. And please don&#x27;t sell it to an evil billionaire who&#x27;s going to come around waving a lot of money to gobble it up. Sincerely, a Happy Blue Sky user.</p>&mdash; Wajahat Ali ( <a href="https://bsky.app/profile/did:plc:flfa7b6kgjqp3bbh223tmpjk?ref_src=embed">@wajali.bsky.social</a>) <a href="https://bsky.app/profile/did:plc:flfa7b6kgjqp3bbh223tmpjk/post/3lbvtx4qei222?ref_src=embed">November 27, 2024 at 12:45 AM</a>
</blockquote>
<script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>

Which looks like this when rendered with this CSS included.

[cotes2020]

Thank you for your contribution! Unless you can design Bluesky as a general component similar to embedded videos, I will not consider merging this standalone CSS.