---
import { Icon } from '@astrojs/starlight/components';
---

<section class="sl-flex">
	<a href="/contributing" class="sl-flex">
		<Icon name="rocket" size="1.2em" />
		Contribute
	</a>

	<a href="https://den.oeiuwq.com/community" class="sl-flex">
		<svg
			xmlns="http://www.w3.org/2000/svg"
			width="16"
			height="16"
			viewBox="0 0 24 24"
			fill="currentColor"
			style="width:1.2em;height:1.2em;"
		>
			<path
				d="M12.3 12.22A4.92 4.92 0 0 0 14 8.5a5 5 0 0 0-10 0a4.92 4.92 0 0 0 1.7 3.72A8 8 0 0 0 1 19.5a1 1 0 0 0 2 0a6 6 0 0 1 12 0a1 1 0 0 0 2 0a8 8 0 0 0-4.7-7.28M9 11.5a3 3 0 1 1 3-3a3 3 0 0 1-3 3m9.74.32A5 5 0 0 0 15 3.5a1 1 0 0 0 0 2a3 3 0 0 1 3 3a3 3 0 0 1-1.5 2.59a1 1 0 0 0-.5.84a1 1 0 0 0 .45.86l.39.26l.13.07a7 7 0 0 1 4 6.38a1 1 0 0 0 2 0a9 9 0 0 0-4.23-7.68"
			></path>
		</svg>
		Community
	</a>

	<a href="https://dendritic.oeiuwq.com/sponsor" class="sl-flex">
		<Icon name="heart" size="1.2em" />
		Sponsor
	</a>
</section>

<style>
	section {
		justify-content: center;
		flex-wrap: wrap;
		gap: 0.5rem 1.5rem;
		font-size: var(--sl-text-sm);
	}

	a {
		align-items: center;
		text-decoration: none;
		gap: 0.5rem;
		color: var(--sl-color-gray-3);
	}

	a:hover {
		color: var(--sl-color-white);
	}
</style>