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">
<h2>Content</h2>
<nav id="TableOfContents">
<ul>
<nav>
<ul class="p-toc__primary">
{fold(headings).map(heading => (
<li>
<li class="p-toc__primary-item">
<a href={`#${heading.slug}`}>{heading.text}</a>
{heading.children && (
<ul>
<ul class="p-toc__nested">
{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>
)}

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

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