Fixed blog post header hiding part of section when navigating using table of contents

[CappeSun]

Resolves #263

Changes:

public/assets/css/blogpost.css:199-208

@media screen and (min-width: 901px) {
    .blog-card h1,
    .blog-card h2,
    .blog-card h3,
    .blog-card h4,
    .blog-card h5,
    .blog-card h6 {
        scroll-margin-top: 110px;
    }
}

To prevent the header from eclipsing part of selected section when navigating using the table of contents, I have added scroll-margin-top: 110px; to every heading within .blog-card to have the blog post page scroll appropriately. As different posts use different heading tags, I opted to include every heading tag in case one otherwise not included would be used in the future.

Previously, the heading and part of the text would be hidden behind the header when navigating using table of contents, forcing the user to scroll up again. This was only a problem when the header would be following the viewport (at viewport width > 900px), therefore I used @media screen and (min-width: 901px) to keep scrolling with table of contents as usual when the header wouldn't be in the way.

• [x] I have read and agreed to the Code of Conduct.
• [x] I have read and complied with the contributing guidelines.
• [x] What I'm implementing was an approved issue.
• [x] I have tested all of my changes.