edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move page section anchor to make heading visible on navigation

Browse Source
This commit is contained in:
elisejakob
2024-07-07 14:40:33 +02:00
parent 0cae537159
commit 4b1d015d8c
2 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/components/blocks/PageSection.tsx
View File

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

6
web/src/components/blocks/pageSection.module.scss
View File

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