Restyle doclinks box

[patrickhlauke]

Apply proposed styles from #1130 (comment)

Closes #1130

Live preview: https://deploy-preview-4590--wcag2.netlify.app/guidelines/#text-alternatives

[netlify]

✅ Deploy Preview for wcag2 ready!

Name	Link
🔨 Latest commit	b7d6b8b
🔍 Latest deploy log	https://app.netlify.com/projects/wcag2/deploys/68b19ec682edd200083d2ba3
😎 Deploy Preview	https://deploy-preview-4590--wcag2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[patrickhlauke]

had to reduce the negative top margin to just -0.5em, as my original -3em was causing a clash with long SC names, and I was not in the mood (yet) to rework the whole layout/structure of the entire thing to avoid it

I also wasn't able to find where the <br> is injected, so i display:none'd it

[iadawn]

@kfranqueiro Could you see if you could find the errant <br>? Once done I am happy for this to merge and we can work with webmaster to get it published.

[kfranqueiro]

@kfranqueiro Could you see if you could find the errant <br>? Once done I am happy for this to merge and we can work with webmaster to get it published.

Done

[kfranqueiro]

Looks like this has spotted a bug in my TR-vs.-informative check. That failure should be ignored, because this PR only touches TR space.

(Update: will be fixed by #4593)

[patrickhlauke]

ah, magic, thanks @kfranqueiro (now realise why I didn't spot it...had my site-wide search in VS code filtered to just look at .html and .css files, oops)

[bruce-usab]

Looks good to me!

For reviewers, here‘s the link to same bookmark as as in OP.

(Also, I attempted a diff version but it is not of utility as the boxes for Understanding and How To are not visible.