---
import Layout from '../layouts/Layout.astro';
import sites from '../components/sites.json';
import news from '../components/news.json';

---

<Layout>
	<div class="container">
		<h1>Welcome to bits & Bytes Minecraft!</h1>
		<p class="ip">IP: bnbmc.net</p>
		<i>Must be an active member of the bits & Bytes Discord to join.</i>
		<div class="grid-container">
			<div class="flex-site">
				{sites.map((site) => (
					<a href={site.website} class="site">{site.name}</a>
				))}
			</div>
			<div class="flex-news">
				<h1>Announcements</h1>
				{news.map((article) => (
					<h2>{article.title}</h2>
					<p>{article.content}</p>
				))}
			</div>
		</div>
	</div>
</Layout>

<style>

	:root {
		--box: #394049;
		--link: #22b7f1;
		--link-hover: #4dbdea;
		--link-active: #3f7a91;
	}

	@media (prefers-color-scheme: light) {
		:root {
			--box: #9bafc8;
			--link: #135268;
			--link-hover: #2aabda;
			--link-active: #2797ca;
		}
	}

	.ip {
		font-size: 1.2em;
	}

	a {
		font-size: 1.1em;
		color: var(--link);
		text-decoration: none;
	}

	a:hover {
		color: var(--link-hover);
		text-decoration: none;
	}

	a:active {
		color: var(--link-active);
	}

	.container {
		padding-top: 2em;
		padding-left: 6em;
		padding-right: 6em;
	}

	.grid-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 2em;
		margin: 1em;
	}

	.flex-site {
		display: flex;
		flex-direction: column;
	}
	.site {
		background-color: var(--box);
		padding: 1.5em;
		margin-bottom: .5em;
	}

	/* Mobile view */
	@media (max-width: 992px) {
		.grid-container {
			display: grid;
			grid: auto auto auto / 1fr;
		}
	}
</style>

<script>
	twemoji.parse(document.body);
</script>