<script>
	import '../app.css';
	import { config } from '$lib/site.config';
	import '@fontsource/ibm-plex-sans/400.css';
	import '@fontsource/ibm-plex-sans/600.css';
	import '@fontsource/ibm-plex-sans/700.css';
	import '@fontsource/noto-sans-sc/400.css';
	import '@fontsource/noto-sans-sc/700.css';
	import '@fontsource-variable/jetbrains-mono';
	import 'highlight.js/styles/github-dark.css';
</script>

<svelte:head>
	<title>{config.title}</title>
</svelte:head>

<div class="main">
	<div class="content">
		<div class="heading">
			<div class="title">{`> `}{config.title}</div>
			<div class="links"><a href="/">首页</a><a href="/post/about">关于</a></div>
		</div>
		<div class="post"><slot /></div>
		<div class="footer">
			<div>{config.copyright}</div>
		</div>
	</div>
</div>

<style lang="postcss">
	:global(html),
	:global(a) {
		font-family: 'IBM Plex Sans', 'Noto Sans SC', sans-sans;
		@apply text-black dark:text-white dark:bg-black;
	}
	:global(body) {
		@apply m-0 p-0;
	}
	:global(*) {
		@apply box-border underline-offset-4;
	}
	:global(code) {
		font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace;
	}
	a {
		@apply pr-2 pl-2;
	}
	.main {
		@apply min-h-screen flex flex-row flex-nowrap justify-center w-full;
	}
	.heading {
		@apply mb-2 w-full;
	}
	.heading > div {
		@apply inline;
	}
	.title {
		@apply text-3xl font-semibold;
	}
	.links {
		@apply inline-block;
	}
	.content {
		@apply pt-4 pb-4 pr-4 pl-4 box-border w-[768px] max-w-full grow-0 flex flex-col flex-nowrap;
	}
	.post {
		@apply w-full h-full;
	}
	.footer {
		@apply w-full mt-8 flex flex-row flex-nowrap justify-center;
	}
	:global(prerender) {
		@apply hidden;
	}
</style>
