doc/common/extensions: Separate checkmark from image.

[laurensvalk]

This makes it easier to see when the images are small.

Fixes: https://github.com/pybricks/support/issues/838

---

This still needs better CSS:

• margin/padding around background images
• reduce margin/padding for the cross/checks to bring them closer to the top right.

I spent too long messing around to get it to look better, but I must be missing something. Any ideas @dlech ?

[dlech]

It would be nice if we could use icons that have a consistent visual style. The readthedocs theme ships with fontawsome, so we could those if we want to use font icons.

[dlech]

I spent too long messing around to get it to look better, but I must be missing something.

I think the background-origin: content-box; style is what you are looking for.

And instead of the :after selector, just style the height of the <th> in vw units.

[dlech]

Maybe something like:

.requirements-table td {
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
    vertical-align: top !important;
    text-align: right;
    min-width: 100px;
    width: 6vw;
    height: 4vw;
}

(dropping all of the other styles)

[laurensvalk]

I think the background-origin: content-box; style is what you are looking for.

That's the one I started with, but it came out with much bigger margin/padding, leaving not much to see on small screens.

And instead of the :after selector, just style the height of the in vw units.

I was hoping we could have square cells no matter the number of hubs, but I suppose we can just hard code and change it when we add more.

Maybe something like:

Thanks, but we can't quite merge this yet :)

I'm just going to go for the simple solution so we have something for the release.

[laurensvalk]

I'm just going to go for the simple solution so we have something for the release.

I just used the compatibility icons we already had, minus the checkmarks, but with the margin they already had.