<!DOCTYPE html>
<html lang="en">
	<head>
		<style>
			body {
				--background: #111;
				--background-2: #252525;
				--background-3: #444;
				--color: #fffbe3;
				--color-2: #d0c895;

				background: var(--background);
				color: var(--color);
				font-family: "Reckless", serif;
				margin: 0;
				padding: 0;
				overflow-x: hidden;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.wrapper {
				max-width: 800px;
				width: calc(100% - 40px);
				padding-left: 20px;
				padding-right: 20px;
				margin-bottom: 100px;
				min-height: 100vh;
			}
		</style>

		{% block meta %}
			<meta charset="utf-8">
			<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			<meta http-equiv="x-ua-compatible" content="ie=edge">
			<meta name="description" content="Hi, there! My name is Garrett. I am a computer scientist, software engineer, and speaker.">
			<meta name="keywords" content="garrett mills glmdev developer speaker flitter extollo student">
			<meta name="author" content="Garrett Mills">
			<meta name="robots" content="index, follow">
			<link rel="author" href="/humans.txt">
			<link rel="alternate" href="/feed/atom.xml" title="Garrett Mills - Notes (Atom)" type="application/atom+xml">
			<link rel="alternate" href="/feed/rss.xml" title="Garrett Mills - Notes (RSS)" type="application/rss+xml">
			<link rel="alternate" href="/feed/json.json" title="Garrett Mills - Notes (JSON)" type="application/feed+json">
			<link rel="alternate" href="/blog/atom.xml" title="Garrett's Blog (Atom)" type="application/atom+xml">
			<link rel="alternate" href="/blog/rss2.xml" title="Garrett's Blog (RSS)" type="application/rss+xml">
			<link rel="alternate" href="/blog/json.json" title="Garrett's Blog (JSON)" type="application/feed+json">
			{% include 'meta.html' %}
		{% endblock %}

		{% block title %}
			{% if title %}
				<title>{{ title }} | Garrett Mills</title>
			{% else %}
				<title>Garrett Mills</title>
			{% endif %}
		{% endblock %}

		{% block style %}
			<!-- Register fonts here to avoid 2 layer network dependency tree for bundle.css -->
			<style>
				@font-face {
					font-family: 'Obsidian';
					src: url('/assets/font/obsidian/Obsidian-Roman.otf') format('opentype');
					font-weight: normal;
					font-style: normal;
					font-display: swap;
				}

				@font-face {
					font-family: "JetBrains Mono";
					src: url("/assets/font/jetbrains-mono/JetBrainsMono-Regular.woff2") format('woff2');
					font-weight: normal;
					font-style: normal;
					font-display: swap;
				}

				@font-face {
					font-family: "Reckless";
					src: url("/assets/font/reckless/WEB/Reckless-Regular.woff2") format('woff2');
					font-weight: normal;
					font-style: normal;
					font-display: swap;
				}

				@font-face {
					font-family: "Reckless";
					src: url("/assets/font/reckless/WEB/Reckless-RegularItalic.woff2") format('woff2');
					font-weight: normal;
					font-style: italic;
					font-display: swap;
				}

				@font-face {
					font-family: "Reckless";
					src: url("/assets/font/reckless/WEB/Reckless-Bold.woff2") format('woff2');
					font-weight: bold;
					font-style: normal;
					font-display: swap;
				}
			</style>
			<link rel="stylesheet" href="/bundle-v1.css">
		{% endblock %}
	</head>
	<body>
		<div class="wrapper">
			<header class="hero">glm.</header>
			<nav>
				<ul>
					<li><a href="/">Home</a></li>
					<!--<li><a href="/timeline">Timeline</a></li>-->
					<li><a href="/blog">Blog</a></li>
					<li><a href="/feed">Notes</a></li>
					<li><a href="/links">Bookmarks <img class="inline-markmark-logo" src="/assets/img/markmark-light.svg" eleventy:ignore alt="MarkMark logo"/></a></li>
				</ul>
			</nav>

			{% block content %}
				<div class="content-wrapper" role="main">{{ content }}</div>
			{% endblock %}
		</div>

		<footer>
			<div class="obsidian">glm.</div>
			<p>&copy; 2015-{{ "now" | date: "%Y" }} Garrett Mills — <a href="/technical">Technical Info</a><br><small><a href="/technical/#source-code-and-licensing">AI Scraping Notice</a></small></p>
		</footer>

		{% block script %}{% endblock %}
		<script src="https://keepandroidopen.org/banner.js?size=mini&animation=off"></script>
	</body>
</html>
