search

github / choosealicense.com

A site to provide non-judgmental guidance on choosing a license for your open source project
https://choosealicense.com
MIT License
3.65k stars 1.32k forks source link

Improve readability of sticky header in appendix #1238

Closed matthijsgroen closed 2 weeks ago

matthijsgroen commented 1 month ago

The header of the appendix table was transparent, making the text in the header hard to read when scrolling

Fixes #1110

matthijsgroen commented 2 weeks ago

@mlinksva is this something you could verify?

mlinksva commented 2 weeks ago

This does look nicer but it appears to me only the first column is affected:

Screenshot 2024-08-29 at 08 54 15

It isn't immediately clear to me why, any idea?

matthijsgroen commented 2 weeks ago

It seems to be caused by:

https://github.com/github/choosealicense.com/blob/gh-pages/assets/vendor/hint.css/hint.css#L27

The position relative moves the dots out of the page flow and cause them to render on top of the sticky header.

Since this is a global stylesheet, I cannot forsee the impact of removing this position: relative for the rest of the site. It looks good without the position relative for the appendix page though.

Update: I just checked on other pages, but there the positioning of a hint following the dot will break. They also work with really high z-index values. So I added a commit to set a z-index for this sticky header as well

matthijsgroen commented 2 weeks ago

The z-index value is now based on https://github.com/github/choosealicense.com/blob/3f5208ac0da4a3e9336013eadb0ff7f3e84e277b/assets/vendor/hint.css/hint.css#L62

mlinksva commented 2 weeks ago

Tests are failing for unrelated reasons, will fix in a separate PR.