diff options
| author | Reuben Tier | 2023-05-16 22:01:56 +0100 |
|---|---|---|
| committer | GitHub | 2023-05-16 23:01:56 +0200 |
| commit | db728d61afa5cea060c66f746a4cc4ab3e1c3bcd (patch) | |
| tree | b5fcae8d25108c625f098a092508dbd2ed205121 | |
| parent | 8597b9c1002f8c5073d25ae5cacd4060ded2f8c8 (diff) | |
| download | IT.starlight-db728d61afa5cea060c66f746a4cc4ab3e1c3bcd.tar.gz IT.starlight-db728d61afa5cea060c66f746a4cc4ab3e1c3bcd.tar.bz2 IT.starlight-db728d61afa5cea060c66f746a4cc4ab3e1c3bcd.zip | |
Add padding to scroll preventing headings being obscured by nav (#54)
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
| -rw-r--r-- | .changeset/pink-stingrays-rhyme.md | 5 | ||||
| -rw-r--r-- | packages/starlight/index.astro | 14 |
2 files changed, 19 insertions, 0 deletions
diff --git a/.changeset/pink-stingrays-rhyme.md b/.changeset/pink-stingrays-rhyme.md new file mode 100644 index 00000000..b64e83a7 --- /dev/null +++ b/.changeset/pink-stingrays-rhyme.md @@ -0,0 +1,5 @@ +--- +"@astrojs/starlight": patch +--- + +Add padding to scroll preventing headings being obscured by nav diff --git a/packages/starlight/index.astro b/packages/starlight/index.astro index cf2ce4db..bf73a6f4 100644 --- a/packages/starlight/index.astro +++ b/packages/starlight/index.astro @@ -47,6 +47,20 @@ const prevNextLinks = getPrevNextLinks(sidebar); <html lang={lang} dir={dir}> <head> <HeadSEO data={entry.data} lang={lang} /> + <style> + /* Add scroll padding to ensure anchor headings aren't obscured by nav */ + html { + /* Additional padding is needed to account for the mobile TOC */ + scroll-padding-top: calc( + 1.5rem + var(--sl-nav-height) + var(--sl-mobile-toc-height) + ); + } + @media (min-width: 72em) { + html { + scroll-padding-top: calc(1.5rem + var(--sl-nav-height)); + } + } + </style> </head> <body> <ThemeProvider /> |