Feature: Increase visibility of link icon when note-box headings hovered over

MaoShizhong commented 3 months ago

Because

Currently, all headings' :hover::before link icons are absolutely positioned with left: -1.25rem. This is completely fine for top-level headings, but for headings in note boxes, ends up looking like the below:

It would be nice for the link icon to be more visible on hover. I had difficulty adjusting positioning so all headings' link icons would render left of the full prose contents. Instead, I opted for making the note box icon invisible on heading hover instead.

This PR

Adds CSS to visually hide note boxes' icons when their headings are hovered over.

Issue

N/A

Additional Information

N/A

Pull Request Requirements

[X] I have thoroughly read and understand The Odin Project Contributing Guide
[X] The title of this PR follows the keyword: brief description of change format, using one of the following keywords:
- Feature - adds new or amends existing user-facing behavior
- Chore - changes that have no user-facing value, refactors, dependency bumps, etc
- Fix - bug fixes
[X] The Because section summarizes the reason for this PR
[X] The This PR section has a bullet point list describing the changes in this PR
[X] I have verified all tests and linters pass after making these changes.
[ ] If this PR addresses an open issue, it is linked in the Issue section
[ ] If applicable, this PR includes new or updated automated tests

MaoShizhong commented 3 months ago

For QA:

Head to any lesson page that has note boxes with headings, e.g. /lessons/foundations-installations.
Hover over the headings. Non-note box headings should remain untouched. Note box headings should have their note box's icon go invisible on heading hover.

Demonstration

https://github.com/TheOdinProject/theodinproject/assets/122839503/74c8635e-50f5-4e61-aab5-f2c8e0ea6db9

Tiny suggestion: Change the link icon positioning from -left-5 to -left-[22px] (i.e. 2px additional shift to the left). The result is as below, which aligns the icons better IMO.

https://github.com/TheOdinProject/theodinproject/assets/122839503/24f28b14-056a-462a-8da0-9b21e41b7d70

MaoShizhong commented 3 months ago

@KevinMulhern opinion on the extra 2px shift as per the 2nd video? Only a nit but can throw it in if you agree that it looks better

KevinMulhern commented 3 months ago

I didn't really see much of a difference @MaoShizhong, it might just be hard to tell from a video. But if you think it aligns better, we should do it.

MaoShizhong commented 3 months ago

Classic front end worries :stuck_out_tongue: It's definitely minute but it's me being me and being irked by it.

TheOdinProject / theodinproject