From ceec61ba109b87d5de8c2c7aa05fd45028e28e3c Mon Sep 17 00:00:00 2001 From: Karl Stolley Date: Fri, 12 May 2023 13:25:17 -0500 Subject: [PATCH] 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. --- web/styles/portico/portico.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/web/styles/portico/portico.css b/web/styles/portico/portico.css index 4f58f3994a..68b4d20a58 100644 --- a/web/styles/portico/portico.css +++ b/web/styles/portico/portico.css @@ -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,