From 4b1d015d8cbacfce104f68a549eaa3f4a914eded Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Sun, 7 Jul 2024 14:40:33 +0200
Subject: [PATCH] move page section anchor to make heading visible on
 navigation

---
 web/src/components/blocks/PageSection.tsx         | 3 ++-
 web/src/components/blocks/pageSection.module.scss | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/web/src/components/blocks/PageSection.tsx b/web/src/components/blocks/PageSection.tsx
index 59ce1e1..e05af0d 100644
--- a/web/src/components/blocks/PageSection.tsx
+++ b/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" />
diff --git a/web/src/components/blocks/pageSection.module.scss b/web/src/components/blocks/pageSection.module.scss
index d7a3c75..77f00d6 100644
--- a/web/src/components/blocks/pageSection.module.scss
+++ b/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);