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

make toc a floating element

Browse source
This commit is contained in:
Philip Ahlqvist 2024-01-17 18:48:17 +01:00 committed by pigges
parent 5c761b147c
commit 4e98e1a8ca
3 changed files with 25 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/components/TableOfContents.astro
View file

@ -24,21 +24,25 @@ console.log(edit);
<style is:inline>
.toc {
position: fixed;
width: var(--sidebar-width);
height: 100vh;
width: calc(var(--sidebar-width) - 2rem);
height: fit-content;
overflow-y: auto;
max-height: calc(100vh - var(--nav-height) - 2rem * 2);
inset-block: 0;
inset-inline-end: 0;
padding-top: var(--nav-height);
inset-inline-end: 2rem;
margin-top: calc(2rem + var(--nav-height));
margin-bottom: 2rem;
border-radius: 1em;
background-color: var(--secondary-background);
transition: 0.3s;
z-index: 10;
}
.toc .container {
display: flex;
flex-direction: column;
padding: 1rem 1rem 0;
overflow-y: auto;
}
.toc .container summary {
@ -60,6 +64,15 @@ console.log(edit);
.toc ul li:hover {
font-size: 0.785rem;
/* border-left: 1px solid var(--header-text); */
}
@media only screen and (max-width: 750px) {
.toc {
margin-top: var(--nav-height);
margin-bottom: 0;
inset-inline-start: 0;
inset-inline-end: unset;
transform: translateX(-100%);
}
}
</style>

2
src/components/TableOfContentsHeading.astro
View file

@ -39,7 +39,7 @@ const { heading } = Astro.props;
}
li ul {
/* list-style: none; */
list-style: none;
padding-inline-start: 1rem;
/* border-left: 1px solid var(--secondary-background); */
}

9
src/layouts/Collections.astro
View file

@ -50,7 +50,7 @@ const isActive = (href: string)=>{
</section>
<div class="main">
<div class="content">
<aside class="toc">
<aside id="toc">
<TableOfContents headings={headings} edit={'src/content' + pathname + '.md'} />
</aside>
<div class="markdown-body">
@ -162,18 +162,19 @@ const isActive = (href: string)=>{
width: 100%;
}
.wrapper .toc {
.wrapper #toc {
display: flex;
flex-direction: column;
}
@media only screen and (max-width: 750px) {
.wrapper .sidebar {
transform: translateX(-80%);
transform: translateX(-100%);
}
.wrapper .main {
padding-inline-start: calc(var(--sidebar-width) * 0.2);
padding-inline-start: unset;
padding-inline-end: unset;
}
}
</style>