mirror of
https://github.com/sern-handler/website
synced 2026-06-20 23:02:24 +00:00
60 lines
1.3 KiB
Plaintext
60 lines
1.3 KiB
Plaintext
---
|
|
import type { Props } from '../props';
|
|
|
|
import MobileTableOfContents from 'virtual:starlight/components/MobileTableOfContents';
|
|
import TableOfContents from 'virtual:starlight/components/TableOfContents';
|
|
---
|
|
|
|
{
|
|
Astro.props.toc && (
|
|
<>
|
|
<div class="lg:sl-hidden">
|
|
<MobileTableOfContents {...Astro.props} />
|
|
</div>
|
|
<div class="right-sidebar-panel sl-hidden lg:sl-block">
|
|
<div class="sl-container">
|
|
<TableOfContents {...Astro.props} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
<style>
|
|
.right-sidebar-panel {
|
|
padding: 1rem var(--sl-sidebar-pad-x);
|
|
}
|
|
.sl-container {
|
|
width: calc(var(--sl-sidebar-width) - 2 * var(--sl-sidebar-pad-x));
|
|
}
|
|
.right-sidebar-panel :global(h2) {
|
|
color: var(--sl-color-white);
|
|
font-size: var(--sl-text-h5);
|
|
font-weight: 600;
|
|
line-height: var(--sl-line-height-headings);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.right-sidebar-panel :global(:where(a)) {
|
|
display: block;
|
|
font-size: var(--sl-text-xs);
|
|
text-decoration: none;
|
|
color: var(--sl-color-gray-3);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.right-sidebar-panel :global(:where(a):hover) {
|
|
color: var(--sl-color-white);
|
|
}
|
|
@media (min-width: 72rem) {
|
|
.sl-container {
|
|
max-width: calc(
|
|
(
|
|
(
|
|
100vw - var(--sl-sidebar-width) - 2 * var(--sl-content-pad-x) - 2 *
|
|
var(--sl-sidebar-pad-x)
|
|
) * 0.25 /* MAGIC NUMBER 🥲 */
|
|
)
|
|
);
|
|
}
|
|
}
|
|
</style>
|