Pigges/lbry-tech
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-tech.git synced 2025-03-04 06:57:53 +00:00
Code Issues Projects Releases Packages Wiki Activity

add toc styling

Browse source
This commit is contained in:
Philip Ahlqvist 2024-02-12 13:03:44 +01:00
parent 9ef0749f98
commit 9ac470b109
1 changed files with 42 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/pages/api/[repo].astro
View file

@ -67,8 +67,15 @@ Object.keys(docs).forEach(group=>{
<Layout title={repo}>
<div class="wrapper">
<section class="sidebar">
{(headings && headings.length) ? (
<aside id="toc">
<TableOfContents headings={headings} />
</aside>
) : ''}
</section>
<TableOfContents headings={headings} />
<!-- <TableOfContents headings={headings} /> -->
<select>
{tags.map(tag=>(
<option>{tag.version}</option>
@ -130,6 +137,40 @@ Object.keys(docs).forEach(group=>{
flex-direction: column;
gap: 1em;
}
.wrapper #toc {
position: fixed;
width: calc(var(--sidebar-width) - 2rem);
height: fit-content;
max-height: calc(100vh - var(--nav-height)*2 - 2rem * 2);
inset-block: 0;
inset-inline-end: 2rem;
margin: calc(2rem + var(--nav-height)) 0;
// background-color: var(--secondary-background);
transition: 0.3s;
z-index: 10;
overflow-y: auto;
border-radius: 1em;
background-color: var(--secondary-background);
}
@media only screen and (max-width: 1000px) {
.wrapper #toc {
position: relative;
width: var(--sidebar-width);
max-height: unset;
inset-block: unset;
inset-inline-end: unset;
margin-top: 0;
z-index: 1;
background-color: transparent;
}
.wrapper .main {
padding-inline-end: unset;
}
}
</style>
<style is:inline>