Skip to content

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
Member

@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
Member

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
Member

@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.

3 participants