help_pages: Highlight headings targeted by URL fragments.

One caveat: While the approach here works fine when loading a new
docs page whose URL includes a fragment, there appears to be something
about `simplebar` that clears out the `:target` reference. If you
click a heading link on a help page, for example, you might
momentarily see the highlighted style appear before it disappears.
This commit is contained in:
Karl Stolley 2023-05-12 13:25:17 -05:00 committed by Tim Abbott
parent a4c7be68cc
commit ceec61ba10

View File

@ -248,6 +248,19 @@ html {
background-color: hsl(0deg 0% 100%);
width: calc(100vw - 300px);
height: calc(100vh - 59px);
& :target {
/* Match to where simplebar scrolls */
scroll-margin-top: 20px;
/* Increase the highlighted space around the text... */
padding: 6px 8px;
border-radius: 7px 7px 0 0;
/* ...but maintain apparent top and bottom margin;
pull left and right into the gutter. */
margin: 20px -8px 10px;
/* Derive highlight color from sidebar, here with 30% alpha */
background-color: hsl(152deg 70% 50% / 25%);
}
}
.help-center ol,