dave-dmg/blog_bricked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed scroll-margin-top for sidenote-ref

Browse Source
This commit is contained in:
Dave
2025-10-02 14:33:27 +02:00
parent fdcfc774fb
commit ae6da529cf
3 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Content/Sidenote/Container/Container.module.css
View File

@@ -11,13 +11,15 @@
} }
.note { .note {
@mixin text-xs;
@mixin my var(--spacing-cozy);
position: relative; position: relative;
min-width: 16rem; padding-left: var(--size-12);
font-family: var(--font-mono); font-family: var(--font-mono);
@media screen and (--bp-margin) { @media screen and (--bp-margin) {
@mixin text-xs; min-width: 16rem;
margin-right: var(--spacing-generous); margin-right: var(--spacing-generous);
padding: var(--spacing-cozy) var(--spacing-cozy) var(--spacing-cozy) var(--size-12) ; padding: var(--spacing-cozy) var(--spacing-cozy) var(--spacing-cozy) var(--size-12) ;
border: var(--size-1) solid var(--color-surface-inverse); border: var(--size-1) solid var(--color-surface-inverse);

1
src/components/Content/Sidenote/Item/Item.module.css
View File

@@ -1,6 +1,7 @@
.ref { .ref {
@mixin px var(--spacing-tight); @mixin px var(--spacing-tight);
scroll-margin-top: calc(var(--el-header-height) + var(--spacing-comfortable));
display: inline-block; display: inline-block;
font-weight: var(--typo-weight-black); font-weight: var(--typo-weight-black);
transition: color 0.5s ease-in-out; transition: color 0.5s ease-in-out;

2
src/components/Content/Sidenote/Item/index.tsx
View File

@@ -7,7 +7,7 @@ export default function SidenoteItem({ id, marker, content, type }: Sidenote) {
<a <a
href={`#${id}`} href={`#${id}`}
className={styles.ref} className={styles.ref}
id={`#ref-${id}`} id={`ref-${id}`}
style={{ anchorName: `--note-${id}` } as React.CSSProperties} style={{ anchorName: `--note-${id}` } as React.CSSProperties}
> >
[{marker}] [{marker}]