Expand / Include all of the WordPress social media accounts

[dd32]

#687 added the Mastodon account to get it verified, but we have a lot more accounts on every other platform that has been asked to be listed.

@eidolonnight @bjmcsherry have asked to increase this to all of the accounts.

These include:
X
Bluesky
Mastodon
Threads
Facebook
Instagram
Linkedin
TikTok
YouTube
Tumblr

The proposed layout would be:

X | Bluesky | Mastodon | Threads | Facebook | Instagram | LinkedIn | TikTok | YouTube | Tumblr

The visual representation of these gets a bit busy, but not overly bad in my opinion.
There's some responsive work that could/should be done here, although this pre-dates this change, this just makes it a little more obvious.

[eidolonnight]

There's some responsive work that could/should be done here, although this pre-dates this change, this just makes it a little more obvious.

Can this be addressed prior to commit? Some of these layouts are pretty messy.

If not, do we need to select a subset of platforms for now?

[eidolonnight]

Links are all correct, and any alignment issues do not represent a regression from current behavior.

[ryelle]

I happened to see this and took a stab at fixing up the alignments. It's still a little odd when just one or two items wrap, but overall better spacing & alignment across screen sizes.

Size	Main	Rosetta
450px
600px
960px
1600px

[dd32]

Thank you @ryelle! You're so much better at these styles than I am! I hadn't yet attempted it, but I'm almost certain it wouldn't have looked that good without you

I had wondered if we should drop the mobile-only (w) and use the full (w) WordPress.org always such that the 450px/600px viewports are more visually balanced, so that it doesn't look like the plain WordPress logo is misaligned with the social icons.. since currently it blends in and looks like one of them.

And yes, I agree, it's a little odd looking when only some icons wrap, I was originally going to see if there was a flexbox text-wrap: balance that would work here, but I imagine not.

[ryelle]

since currently it blends in and looks like one of them.

Yeah, I ended up adding a larger space between so it doesn't get close enough to look like yet another social icon. The 600px screenshot is about as close as they'll get, I think.

And yes, I agree, it's a little odd looking when only some icons wrap, I was originally going to see if there was a flexbox text-wrap: balance that would work here, but I imagine not.

I was hoping the same, but that's not how flex works unfortunately. Maybe switching to a float layout would let us use balance, but I'm not actually sure. And I don't think we want to deal with floats.