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

add a persistent indicator to link targets #552

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

michaelficarra
Copy link
Member

Split from #441, which only gives a temporary highlight to link targets. This is a further enhancement to add a persistent indicator.

Copy link
Contributor

@gibson042 gibson042 left a comment

Choose a reason for hiding this comment

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

I like the visuals, but I think there's a better way to realize them (see below).

Comment on lines +778 to +781
:not(emu-clause, emu-annex, emu-table, emu-production):target {
text-decoration: wavy underline #FF9800;
text-decoration-skip-ink: none;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Nice!

Comment on lines +772 to +777
/* add a more subtle persistent indicator to link targets */
emu-clause:target, emu-annex:target, emu-table:target figure, emu-production:target {
border-left: 0.5em solid #FFC107;
padding-left: 1em;
margin-left: -1em;
}
Copy link
Contributor

@gibson042 gibson042 Aug 31, 2023

Choose a reason for hiding this comment

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

This makes the page content jump around... I think it would be better to take advantage of the visual gutter:

Suggested change
/* add a more subtle persistent indicator to link targets */
emu-clause:target, emu-annex:target, emu-table:target figure, emu-production:target {
border-left: 0.5em solid #FFC107;
padding-left: 1em;
margin-left: -1em;
}
/* add a more subtle persistent indicator to link targets */
emu-clause, emu-annex, emu-table figure, emu-production {
position: relative;
}
emu-clause:target::before, emu-annex:target::before, emu-table:target figure::before, emu-production:target::before {
position: absolute;
top: 0;
height: 100%;
/* occupy some of #spec-container's 20px horizontal padding */
left: -18px;
width: 9px;
background: #FFC107;
content: '';
}

But also note that making sections position: relative necessitates generalizing Toolbox activation code in js/menu.js: #553

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.

2 participants