<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>{{ title }}</title>

	<link rel="stylesheet" href="/core/css/tabler.min.css" />
</head> 
<body class="d-flex flex-column" style="background: var(--tblr-bg-surface)">
	<div class="navbar navbar-expand-md">
		<div class="container-fluid">
			<div class="navbar-brand">
				{% include "logo.html" %}
			</div>
			<div class="navbar-nav flex-row order-md-last">
				<a href="/ui">UI</a>
				<a href="/illustrations">Illustrations</a>
				<!-- <a href="/emails">Emails</a> -->
				<a href="/icons">Icons</a>
			</div>
		</div>
	</div>
	<div class="flex-fill">
		<div class="row g-0 h-full">
			<div class="col-2">{% include "menu.html" %}</div>
			<div class="col border-start" style="background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--tblr-primary) 4%, transparent), transparent 80%) no-repeat 0 0 / 800px 800px !important;">
				<div class="container-md">
					<div class="p-6">
						<div class="markdown fs-3">
							<h1>
								{{ title }}
							</h1>

							<p>{{ summary }}</p>

							{{ content }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="/core/js/tabler.esm.js"></script>
</body>
</html>