kamov/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

ToC styles remake

Browse source
This commit is contained in:
Maciej Jur 2023-04-16 01:04:13 +02:00
parent 5fc2d09c49
commit 8f3d798001
2 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/Toc.astro
View file

@ -33,15 +33,17 @@ function fold(headings: Heading[]) {
<section class="p-toc"> <section class="p-toc">
<h2>Content</h2> <h2>Content</h2>
<nav id="TableOfContents"> <nav>
<ul> <ul class="p-toc__primary">
{fold(headings).map(heading => ( {fold(headings).map(heading => (
<li> <li class="p-toc__primary-item">
<a href={`#${heading.slug}`}>{heading.text}</a> <a href={`#${heading.slug}`}>{heading.text}</a>
{heading.children && ( {heading.children && (
<ul> <ul class="p-toc__nested">
{heading.children?.map(child => ( {heading.children?.map(child => (
<li><a href={`#${child.slug}`}>{child.text}</a></li> <li class="p-toc__nested-item">
<a href={`#${child.slug}`}>{child.text}</a>
</li>
))} ))}
</ul> </ul>
)} )}

12
src/styles/partials/_toc.scss
View file

@ -1,14 +1,18 @@
.p-toc { .p-toc {
#TableOfContents > ul { &__primary {
list-style: hiragana-iroha; list-style: hiragana-iroha;
margin-left: 2em; margin-left: 2em;
li { &-item {
margin: 0.3em 0; margin: 0.3em 0;
} }
}
ul { &__nested {
margin: 0.5em 0; margin: 0.5em 0;
&-item {
margin: 0.25em 0;
} }
} }