<script lang="ts">
	import favicon from '/favicon.png';
	import '/node_modules/@rose-pine/palette/dist/css/rose-pine-hsl.css';
	import '/node_modules/@rose-pine/palette/dist/css/rose-pine-hsl.css';
	import 'prism-rose-pine/dist/prism-rose-pine-moon.css';
	import './style.css';

	import './style.css';

	let { children } = $props();
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
</svelte:head>

<nav class="media-margin">
	<a href="/">Home</a>
	<a href="/about">About</a>
	<a
		href="https://bsky.app/profile/amyt3a.bsky.social"
		aria-label="Link to my Bluesky account"
		target="_blank"
		><svg fill="none" class="bsky" viewBox="0 0 64 57"
			><path
				fill="var(--rp-moon-pine)"
				d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
			></path></svg
		></a
	>
</nav>
{@render children?.()}

<style>
	nav {
		font-family: 'Fraunces', serif;
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
		font-variation-settings:
			'SOFT' 0,
			'WONK' 0;
		font-size: 1.728rem;
	}

	.bsky {
		display: block;
		height: 2rem;
		float: right;
	}

	nav a {
		margin: 1rem;
		margin-left: 0rem;
		padding-left: 0rem;
		#border-bottom: solid var(--rp-moon-foam);
		color: var(--rp-moon-foam);
		&:visited {
			color: var(--rp-moon-foam);
		}
	}
</style>
