Closed mguetschow closed 4 months ago
🚀 PR preview deployed to https://RIOT-OS-riot-os-org-preview-129.surge.sh
Should we maybe use the same trick for the sections (which are linked in the menu)?
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
?
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.
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.
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?
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).
I'm not a CSS expert, but I doubt that would work since
#hero
definespadding: 0
, which would be more concrete than apadding-top: 90px
in class.first
.
True. Then let's keep as is.
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