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

<div class="lg:sl-flex">
	{
		Astro.locals.starlightRoute.toc && (
			<aside class="right-sidebar-container print:hidden">
				<div class="right-sidebar">
					<slot name="right-sidebar" />
				</div>
			</aside>
		)
	}
	<div class="main-pane"><slot /></div>
</div>

<style>
	.main-pane {
		isolation: isolate;
	}

	@media (min-width: 72rem) {
		.right-sidebar-container {
			order: 2;
			position: relative;
			width: calc(
				var(--sl-sidebar-width) + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2
			);
		}

		.right-sidebar {
			position: fixed;
			top: 0;
			border-inline-start: 1px solid var(--sl-color-hairline);
			padding-top: var(--sl-nav-height);
			width: 100%;
			height: 100vh;
			overflow-y: auto;
			scrollbar-width: none;
		}

		.main-pane {
			width: 100%;
		}

		:global([data-has-sidebar][data-has-toc]) .main-pane {
			--sl-content-margin-inline: auto 0;

			order: 1;
			width: calc(
				var(--sl-content-width) + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2
			);
		}
	}
</style>