Skip to content

CSS: Add link-target highlighting for headings

FeRD (Frank Dana) requested to merge ferdnyc/gtk-web:target-highlight into master

Internal links in the documentation can sometimes be hard to track, especially on pages like https://docs.gtk.org/gtk4/ where all of the sections start out collapsed, so links clicked on the sidebar will expand the section, but not scroll it to the top of the window.

To make those targets easier to spot, this MR adds CSS rules on the :target pseudo-class for each heading level (h1 through h6), to show a semi-transparent background-color: var(--secondary) on the target of fragment links. The highlight is then slowly faded away over 15 seconds.

A screencast showing the effect, when clicking a sidebar link:

link

Merge request reports