Over mij
diff --git a/src/js/scripts.js b/src/js/scripts.js
index 245d017..ad13924 100644
--- a/src/js/scripts.js
+++ b/src/js/scripts.js
@@ -31,14 +31,13 @@ document.addEventListener('DOMContentLoaded', () =>
/**
* @type {NodeListOf}
*/
- const sections = document.querySelectorAll('section');
+ const sectionsWithId = document.querySelectorAll('section[id]');
- sections.forEach(section =>
+ sectionsWithId.forEach(anchorTarget =>
{
- const anchorTarget = section.querySelector('[id]');
- const anchorHeader = section.querySelector('h1,h2');
+ const anchorHeader = anchorTarget.querySelector('h1,h2');
- if (anchorTarget && anchorHeader)
+ if (anchorHeader)
{
const anchorLink = document.createElement('a');
anchorLink.className = 'anchor-link';
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 2376627..ca48316 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -89,12 +89,8 @@ $ff-subheader: 'Eras ITC',
var(--#{$prefix}font-sans-serif);
main {
- @extend .pb-4;
- padding-top: 7rem !important;
-}
-
-body.has-hero main {
@extend .pt-3;
+ @extend .pb-4;
}
section,
@@ -108,12 +104,8 @@ main>* {
background-color: $red-200;
}
-:target::before {
- content: "";
- display: block;
- height: 6rem;
- margin-top: -6rem;
- visibility: hidden;
+:target {
+ scroll-margin-top: 4.5rem;
}
.anchor-link {