search

ansible-community / community-website

Ansible Community website (WIP)
https://ansible-community-website.readthedocs.io
Creative Commons Attribution Share Alike 4.0 International
14 stars 25 forks source link

fix tab menu alignment issue #422

Closed oraNod closed 6 months ago

oraNod commented 7 months ago

This PR moves the tab menu anchor class to the tab menu band scss file because it's confusing otherwise. The tab menu anchor class is only used in one place anyway.

This PR also adjusts the tab menu anchors so that the icon and the text are better aligned with one another.

oraNod commented 7 months ago

@tiyiprh Great catch with the tab menu anchors being wonky on the homepage. I think this fixes it but maybe it needs more adjustment. Please take a look and let me know if it needs more work. Cheers.

tiyiprh commented 7 months ago

@oraNod This is definitely better but I think what we had originally was more aligned. Sorry for the nitpicking!

Screenshot 2024-02-13 at 1 29 36 PM
oraNod commented 7 months ago

Thanks @tiyiprh I love the nitpicks!

If I remember correctly with this change, the anchors used to wrapped around buttons. We found there were accessibility issues with that approach though. It was easier to get that alignment with the buttons but we'll figure it out here.

oraNod commented 7 months ago

OK, think I've got it now. The height of the icon in the anchor is 40px and the line height of the text is 30px so I increased it so the icon and the text can align properly. I also adjusted the padding on the bottom of the anchor to compensate for the additional line height. Removed the gap property because it didn't seem to take effect.