Add spacing at the top to the height of the pinned navigation?

[krystian3w]

I noticed that your HTML anchors may be obscured (e.g., we can not see the headline/heading and part of the link to a given installer or archive package).

Some time ago, the following was added to CSS:

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-margin-top
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-padding-top

For legacy can be used :target:

body :target {
	padding-top: 56px
}

@supports (scroll-margin-top: 0) {
	body :target {
		padding-top: unset;
		scroll-margin-top: 56px
	}
}

Unfortunately, I don't know if it's possible to detect that someone has a larger header in CSS itself, but off the top of my head, you could add a negation in the media for high contrast (assuming that someone will probably increase the font size then):

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-contrast
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/forced-colors

@media 
  (prefers-reduced-motion: no-preference) and
  (prefers-contrast: no-preference) and
  (forced-colors: none) {
	body :target {
		padding-top: 56px
	}

	@supports (scroll-margin-top: 0) {
		body :target {
			padding-top: unset;
			scroll-margin-top: 56px
		}
	}
}

[anfragment]

@krystian3w Thank you so much for the suggestion! The fix is deployed, you can check out the result on the website.

We specify the header height explicitly using var(--header-height) (which uses rem), so there was no need to worry about non-default heights due to increased font sizes.

[anfragment]

By the way, we have a special Contributor role on our community Discord (which I should've offered you back when you helped us with filter-lists).

If you'd like, please let me know your Discord username or contact me there via DMs. Thanks!