<!DOCTYPE html>
<html lang="en">
	<head>
		<title>{{title}}</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta charset="utf-8">
		<!-- Meta -->
		<!-- <link rel="icon" type="image/x-icon" href="/favicon.ico"> -->
		<link rel="canonical" href="/" />
		<meta name="description" content="{{description}}" />
		<meta name="robots" content="index,follow" />
		<meta property="og:title" content="{{title}}" />
		<meta property="og:type" content="article" />
		<meta property="og:url" content="/" />
		<meta property="og:description" content="{{description}}" />
		<!-- <meta property="og:image" content="/assets/img/logo.jpg" />
		<meta property="og:image:alt" content="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'" /> -->

		<!-- JS -->
		<script src="/assets/scripts/nav.js" defer></script>

		<!-- CSS -->
		<link rel="stylesheet" href="/assets/styles/main.css">
		<link rel="stylesheet" href="/assets/styles/palette.css">
		<link rel="stylesheet" href="/assets/styles/nav.css">
	</head>
	<body>
		<header>
			<nav id="top-nav"><!-- auto-generated by nav.js --></nav>
		</header>
		<main id="main">
			<h1>Site palette</h1>
			<p class="color" id="dark">#130024</p>
			<p class="color" id="light">#ffdff3</p>
			<p class="color" id="purple-dark">#570d93</p>
			<p class="color" id="purple-light">#be70fe</p>
			<p class="color" id="pink-dark">#8f0d66</p>
			<p class="color" id="pink-light">#e771c2</p>
			<p class="color" id="orange-dark">#ba4f1d</p>
			<p class="color" id="orange-light">#e88a5c</p>
		</main>
		<footer id="footer"><!-- auto-generated by nav.js --></footer>
	</body>
</html>
