search

RIOT-OS / riot-os.org

Sources of the RIOT website https://riot-os.org/.
4 stars 16 forks source link

sass/index: move FAQ entry anchors below sticky header #129

Closed mguetschow closed 4 months ago

mguetschow commented 4 months ago

As a follow-up of https://github.com/RIOT-OS/riot-os.org/pull/127#issuecomment-2070474342, this moves the anchors of FAQ entries below the sticky website header. It just adds 9 lines of CSS, so probably worth the effort @miri64 ?

Tested both on mobile and desktop screen (the sticky header size doesn't change).

Can be tested by opening https://riot-os-riot-os-org-preview-129.surge.sh/#faq-1

github-actions[bot] commented 4 months ago

🚀 PR preview deployed to https://RIOT-OS-riot-os-org-preview-129.surge.sh

miri64 commented 4 months ago

Should we maybe use the same trick for the sections (which are linked in the menu)?

leandrolanzieri commented 4 months ago

Is this intending to add further space before each question and the header? In my case (chrome Version 124) navigating to https://www.riot-os.org/#faq-1 doesn't cover the question.

That said, maybe we can get away with something intended for this use like scroll-padding-top or scroll-margin-top?

mguetschow commented 4 months ago

I can confirm @leandrolanzieri's observation with Chromium 124, but it is actually somehow not consistent (trying different #faq-x sometimes hides them behind the header, sometimes not). But the fix proposed here indeed seems to add further space in Chromium-based browsers which is not intended.

I will have a look into the proposed CSS properties.

mguetschow commented 4 months ago

I've updated this PR to use scroll-padding-top instead and tested it successfully on both Firefox and Chromium in desktop and mobile screen size.

I had to add a padding-top to #hero to compensate for the scroll offset at the very top. This was not necessary for #simple-page-header since it already has a much larger top padding.

miri64 commented 4 months ago

I had to add a padding-top to #hero to compensate for the scroll offset at the very top. This was not necessary for #simple-page-header since it already has a much larger top padding.

Again aiming for reusability: Maybe use a .first or .top class for this?

mguetschow commented 4 months ago

Again aiming for reusability: Maybe use a .first or .top class for this?

I'm not a CSS expert, but I doubt that would work since #hero defines padding: 0, which would be more concrete than a padding-top: 90px in class .first.

Just to mention, this conveniently also fixes all other anchors on the main page and even other pages such as cpus.html: Compare https://www.riot-os.org/cpus.html#cpus with https://riot-os-riot-os-org-preview-129.surge.sh/cpus.html#cpus in Firefox 115 (there is again no difference in Chromium 124).

miri64 commented 4 months ago

I'm not a CSS expert, but I doubt that would work since #hero defines padding: 0, which would be more concrete than a padding-top: 90px in class .first.

True. Then let's keep as is.