ToC styles remake
This commit is contained in:
parent
5fc2d09c49
commit
8f3d798001
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue