ToC styles remake
This commit is contained in:
parent
5fc2d09c49
commit
8f3d798001
|
@ -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>
|
||||
)}
|
||||
|
|
|
@ -1,14 +1,18 @@
|
|||
.p-toc {
|
||||
#TableOfContents > ul {
|
||||
&__primary {
|
||||
list-style: hiragana-iroha;
|
||||
margin-left: 2em;
|
||||
|
||||
li {
|
||||
&-item {
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0.5em 0;
|
||||
&__nested {
|
||||
margin: 0.5em 0;
|
||||
|
||||
&-item {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue