michael/blog
1
0
Fork 0
Code Issues 2 Pull requests Releases Packages 1 Wiki Activity

make toc look better
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Michael Zhang 2023-09-01 19:30:15 -05:00
parent 13d83842aa
commit e3ded78ba3
4 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/TocWrapper.astro
View file

@ -8,6 +8,7 @@ interface Props {
}
const { toc, headings } = Astro.props;
const minDepth = Math.min(...headings.map((heading) => heading.depth));
---
{
@ -20,7 +21,7 @@ const { toc, headings } = Astro.props;
<ul>
{headings.map((heading) => {
return (
<li>
<li style={`padding-left: ${(heading.depth - minDepth) * 10}px;`}>
<a href={`#${heading.slug}`}>{heading.text}</a>
</li>
);

1
src/styles/global.scss
View file

@ -124,5 +124,6 @@ pre > code {
.flex-wrapper > main.pad {
padding-left: 30px;
padding-right: 30px;
}
}

1
src/styles/post.scss
View file

@ -182,6 +182,7 @@
@media screen and (min-width: variables.$breakpoint) {
.post-container {
padding-left: 30px;
padding-right: 30px;
}
}

3
src/styles/toc.scss
View file

@ -1,5 +1,5 @@
@use "variables";
$tocWidth: 180px;
$tocWidth: 240px;
$tocBreakpoint: variables.$breakpoint + $tocWidth;
.toc-wrapper {
@ -16,6 +16,7 @@ $tocBreakpoint: variables.$breakpoint + $tocWidth;
li {
font-size: 14px;
margin: 6px;
}
}
}