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
parent fe64789b8f
commit f86d82aa00
3 changed files with 25 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/TableOfContents.astro
View file

@ -24,12 +24,15 @@ console.log(edit);
<style is:inline> <style is:inline>
.toc { .toc {
position: fixed; position: fixed;
width: var(--sidebar-width); width: calc(var(--sidebar-width) - 2rem);
height: 100vh; height: fit-content;
overflow-y: auto; overflow-y: auto;
max-height: calc(100vh - var(--nav-height) - 2rem * 2);
inset-block: 0; inset-block: 0;
inset-inline-end: 0; inset-inline-end: 2rem;
padding-top: var(--nav-height); margin-top: calc(2rem + var(--nav-height));
margin-bottom: 2rem;
border-radius: 1em;
background-color: var(--secondary-background); background-color: var(--secondary-background);
transition: 0.3s; transition: 0.3s;
z-index: 10; z-index: 10;
@ -39,6 +42,7 @@ console.log(edit);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1rem 1rem 0; padding: 1rem 1rem 0;
overflow-y: auto;
} }
.toc .container summary { .toc .container summary {
@ -60,6 +64,15 @@ console.log(edit);
.toc ul li:hover { .toc ul li:hover {
font-size: 0.785rem; 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> </style>

2
src/components/TableOfContentsHeading.astro
View file

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

9
src/layouts/Collections.astro
View file

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