<script>
	import Maincontent from '../components/misc/maincontent.svelte';
	import Content from '../components/about/content.svelte';
	import Sidebar from '../components/about/sidebar.svelte';
</script>

<svelte:head>
	<title>About</title>
</svelte:head>

<Maincontent>
	<div
		class="col-start-1 col-span-7 sm:col-span-5 md:col-span-3 lg:col-span-2 rounded-xl mt-5 sm:flex flex-col justify-start gap-2 p-2"
	>
		<Sidebar />
	</div>

	<div class="px-5 sm:px-0 sm:pr-5 lg:pr-0 sm:mt-10 col-span-7 sm:col-span-2 md:col-span-4 lg:col-span-3 ">
		<Content />
	</div>

	<div class="px-2 col-span-7">

	<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 bg-red-50 rounded-xl p-3 gap-y-5">
		<ul class="list-disc ml-4">
			<p class="font-bold">Music</p>
			<li>Hatsune Miku</li>
			<li>Amane Kanata</li>
			<li>Mothy/Akuno-p</li>
		</ul>
		<ul class="list-disc ml-4">
			<p class="font-bold">TV</p>
			<li>Game of Thrones</li>
			<li>Avatar the Last Airbender</li>
		</ul>
		<ul class="list-disc ml-4">
			<p class="font-bold">VTubers</p>
			<li>Momosuzu Nene</li>
			<li>Amane Kanata</li>
			<li>Petra Gurin</li>
			<li>Ninomae Ina'nis</li>
		</ul>
		<ul class="list-disc ml-4">
			<p class="font-bold">Food</p>
			<li>Spaghetti</li>
			<li>Steak!</li>
		</ul>
	</div>
	</div>
</Maincontent>
