refine highlight's spacing and border-radius

[XAMPPRocky]

Updates highlight spacing so it doesn't clash with the descent in some titles and updated the border radius to be visually consistent with the buttons.

Production

Staging

Proposed Changes

[Manishearth]

The clashing of the highlight spacing was a deliberate design choice, fwiw. @ashleygwilliams do you have any thoughts on changing this?

r=me on the border change

[XAMPPRocky]

I'm aware it's a deliberate choice. The motivation for this change is that the "highlight" works best on one line titles however the clash doesn't work in my opinion with multi-line titles and makes them harder to scan, as it doesn't feel like it part of the title in the same way when it's a single line. This stands out particularly in the blog, I've pasted some screenshots of examples.

[Manishearth]

(In the future, please include such motivation in the PR itself)

This seems fair, but it seems to largely be a concern for the mobile site where such wrapping is common. I wonder if we can media query it to only apply to the site on mobile? (in general I think the styles need some tweaks on mobile) I think it looks kinda nice on desktop, and I've seen a trend of websites using this kind of underline style elsewhere too.

I'd also still like to hear from Ashley.

[XAMPPRocky]

(In the future, please include such motivation in the PR itself)

This is not the PR that makes that change. #1136 had been open for over a month with no concerns raised and I had talked to other team members who were also in favour of the change. In the future I would appreciate leaving concerns on the appropriate PR before it's merged, instead of in follow up PRs.

[Manishearth]

@XAMPPRocky okay, I wasn't aware of that PR, it must have slipped my notice. Nor was I aware other team members supported it. I do think we should do team pings for major styling changes, though (this PR is fine).

r+ on this and the blog PRs, then.