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

---
interface Props {
	stagger?: boolean;
}

const { stagger = false } = Astro.props;
---

<div class:list={['card-grid', { stagger }]}><slot /></div>

<style>
	.card-grid {
		display: grid;
		grid-template-columns: 100%;
		gap: 1rem;
	}

	.card-grid > :global(*) {
		margin-top: 0 !important;
	}

	@media (min-width: 50rem) {
		.card-grid {
			grid-template-columns: 1fr 1fr;
			gap: 1.5rem;
		}
		.stagger {
			--stagger-height: 5rem;
			padding-bottom: var(--stagger-height);
		}

		.stagger > :global(*):nth-child(2n) {
			transform: translateY(var(--stagger-height));
		}
	}
</style>