Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove :hover pseudo-class from link-style-hover mixin #1792

Merged
merged 1 commit into from
May 7, 2024

Conversation

gabalafou
Copy link
Collaborator

This PR:

  • Removes the :hover pseudo-class from the link-style-hover mixin
  • Uses the modified mixin to slightly change the way the links in the footer respond to hover

Removing the pseudo-class from within the link-style-hover makes the mixin a bit more flexible. For example, I realized that I wanted to change the "next" and "previous" links in the footer so that when any part of the a element is hovered, the link text is underlined. It was complicated to do that with the pseudo-class in the mixin, but easy to do afterwards.

Before:

if you hover part of the `a` element, such as on the next/previous keyword or the arrow icon, but not the actual link text, then the link text does not show the hover effect

After:

if you hover any part of the `a` element, then the link text shows the hover effect (color changes purple, underline becomes thicker)

Copy link
Collaborator Author

@gabalafou gabalafou left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done self-reviewing

Comment on lines -36 to -41
// Exception here - keep visited in the default link colour
// it still should hover on the default link hover colour
&:visited p.prev-next-title {
color: var(--pst-color-link);
&:hover {
color: var(--pst-color-link-hover);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This block of style rule exceptions isn't needed because:

  • line 41 is incorporated in lines 34 and 36 on the right - the link-style-hover mixin (modified and shown above in this diff) sets color to --pst-color-link-hover
  • line 39 is incorporated in lines 27 and 28 on the right - the link-style-default mixin sets color to --pst-color-link

&:hover {
@include link-style-hover;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cody tidiness bonus: I like how this change allows everything to be lexically grouped

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, it's definitely neater than my original approach!

Copy link
Collaborator

@trallard trallard left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you, this LGTM 🚀 merging now!

&:hover {
@include link-style-hover;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, it's definitely neater than my original approach!

@trallard trallard merged commit 5a7fef9 into pydata:main May 7, 2024
19 checks passed
@gabalafou gabalafou deleted the decouple-link-hover-mixin branch May 8, 2024 11:08
ivanov pushed a commit to ivanov/pydata-sphinx-theme that referenced this pull request Jun 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants