src/components/Changelog.sass
.Changelog
	> .Spinner
		display: block
		margin: 10vh auto
		+size(4rem)

	> article
		margin-bottom: var(--spacing-half)

		> header
			display: flex
			gap: var(--spacing-half)
			align-items: center
			padding-bottom: var(--spacing-half)
			margin-bottom: 2px
			background: var(--muted-100)
			padding: var(--spacing-half) var(--spacing)
			border-radius: var(--border-radius) var(--border-radius) 0 0

			&:is(.-current > *)
				background: var(--success-o300)
				color: var(--success-z800)

			> hgroup
				flex: 1 1 auto
				display: flex
				flex-wrap: wrap
				gap: 0 var(--spacing-half)
				align-items: center

				> h1
					font-weight: bold
					font-size: 1.6em
					line-height: 1.2

				> h2
					margin-left: auto
					opacity: .5

		> .body
			padding: var(--spacing)
			background: var(--muted-50)
			border-radius: 0 0 var(--border-radius) var(--border-radius)

			&:is(.-current > *)
				background: var(--success-o100)

	> .pagination
		display: grid
		font-size: 1.2em
		grid-template: ". start prev next . ." 2em / 1fr 2.2em 2.2em 2.2em 2.2em 1fr

		> .Button
			+size(100%)

		> .start
			grid-area: start
		> .prev
			grid-area: prev
		> .next
			grid-area: next
