move page section anchor to make heading visible on navigation

web/src/components/blocks/PageSection.tsx

@@ -14,7 +14,8 @@ export const PageSectionBlock = ({
   const anchor = slugify(block.title);
 
   return (
-    <section className={styles.pageSection} id={anchor}>
+    <section className={styles.pageSection}>
+      <div className={styles.anchor} id={anchor}></div>
       <div className={styles.sectionHeader}>
         <div className={styles.icon}>
           <img src="/assets/icons/neufneuf.svg" />

web/src/components/blocks/pageSection.module.scss

@@ -2,6 +2,7 @@
   margin: var(--spacing-m) auto;
   padding: var(--spacing-m) 0;
   border-top: var(--border-s);
+  position: relative;
 
   &:nth-of-type(1) {
     margin-top: var(--spacing-l);
@@ -26,6 +27,11 @@
   }
 }
 
+.anchor {
+  position: absolute;
+  top: -4rem;
+}
+
 .sectionHeader {
   display: grid;
   grid-template-columns: repeat(12, 1fr);