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

1
src/styles/global.scss
View file

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

1
src/styles/post.scss
View file

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

3
src/styles/toc.scss
View file

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