Ensure headings are fully visible

[lslezak]

Problem

• The headings are not visible when using a page URL with anchor
• The page scrolls to the heading but because of the "floating" title bar it is not visible including the first line of the text below (it is below the title bar)
• This is confusing after clicking a link in another blog post

Solution

• Add a scroll margin
• The fix was inspired by the Docusaurus CSS
• Documentation: https://developer.mozilla.org/en-US/docs/Glossary/Scroll_snap

Testing

• Compare: https://yast.opensuse.org/blog/2024-06-28/agama-9#autoyast
• With: https://yast-branch-fixed-anchor-styling.surge.sh/blog/2024-06-28/agama-9#autoyast

Screenshots

Before

When using the #autoyast anchor the "AytoYaST Compatibility" heading is not visible:

After

When using the #autoyast anchor the heading and the text is fully visible: