jjj 0.2.1

A modal interface for Jujutsu.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

---
import MobileTableOfContents from 'virtual:starlight/components/MobileTableOfContents';
import TableOfContents from 'virtual:starlight/components/TableOfContents';
---

{
	Astro.locals.starlightRoute.toc && (
		<>
			<div class="lg:sl-hidden">
				<MobileTableOfContents />
			</div>
			<div class="right-sidebar-panel sl-hidden lg:sl-block">
				<div class="sl-container">
					<TableOfContents />
				</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>