<script context="module">
	import img from './img.svelte';
	import a from './a.svelte';
	import h1 from './h1.svelte';
	import h2 from './h2.svelte';
	import h3 from './h3.svelte';
	export { img, a, h1, h2, h3 };
</script>

<script>
	export let title;
	export let date;
	export let desc;

	let ddate = new Date(Date.parse(date)).toDateString();
</script>

<svelte:head>
	<title>{title} - Amys Blog</title>
	<meta property="og:title" content={title} />
</svelte:head>

<main>
	<div class="title media-margin">
		<!-- prettier-ignore -->
		<h1>{title}</h1><p class="date">Last updated {ddate}</p>
	</div>
	<div class="blog-text media-margin">
		<p>{desc}</p>
		<slot>
			<!-- the mdsvex content will be slotted in here -->
		</slot>
	</div>
</main>

<style>
	main {
		padding: 0;
		border-radius: 1rem;
	}

	.title h1 {
		width: calc(100% - 15rem);
		vertical-align: baseline;
		display: inline-block;
	}

	.title p {
		width: 15rem;
		display: inline-block;
		text-align: right;
		margin: 0;
		#float: right;
	}

	.blog-text {
		border-radius: var(--border-round);
		#background: var(--rp-moon-surface);
		#box-shadow: 0px 0px 0.5rem 0px hsl(from var(--rp-moon-pine) h calc(s * 0.5) calc(l * 0.25));
	}

	@media only screen and (max-width: 700px) {
		.title {
			margin-bottom: -5.3px;
		}

		.title h1 {
			display: block;
			width: 100%;
		}

		.title p {
			width: 100%;
		}
	}
</style>
