All solutions

These abstract backgrounds for component challenges are my new Least Favourite Thing Ever.

I can't figure out how they're supposed to behave responsively and I can't even seem to get them positioned absolutely to match the different device designs.

Partly I consider them window-dressing for a component that lacks a real context (and therefore unimportant), but I still spend too much time compulsively messing around with magic numbers trying to get a visual match.

If you're happy with your background for this challenge, or have seen it done well, please send me a link to the solution!

That background wave shape totally defeated me.

I can't even figure out what the intended behaviour is between the mobile and desktop breakpoints.

Any suggestions what an elegant implementation would be?

I started out trying to make the structure of this component totally clean and robust, and I did OK at first.

I was using slots with fallback content to try to capture all the styles and behaviours before introducing any real content, but I lost my way a bit with that when it came to the share button.

I put waaaay too much time into allowing the share button to slide responsively along its tail to make it fully responsive over the 100px or so when the screen is too small to accommodate it off the right edge.

Anyhoo. I got there in the end.

This isn't completely finished, which irks me (contact page, some work on buttons and social media icon states remain), but I have to prioritse other things at the moment, and I've got far enough that I feel it's worth posting.

In retrospect, I wish I'd stuck with my strategy of doing the site's layout shell, nav, footer etc (the stuff I don't usually finish!) first and not started the content until I'd finished the button and social media links. Then I could've ignored the contact page and the whole thing would have still felt self-contained.

Live and learn.