1 files changed, 201 insertions, 0 deletions
diff --git a/includes/head.php b/includes/head.php
new file mode 100644
index 0000000..c5e5287
--- /dev/null
+++ b/includes/head.php
@@ -0,0 +1,201 @@
+<head>
+	<style>
+		@font-face {
+			font-family: "Iosevka Slab";
+			font-display: swap;
+			src: url("/includes/iosevka-slab-regular.woff2");
+		}
+
+		:root {
+			--balboa: #195970;
+			--ruby: #9b111e;
+			--slate: #b9c2ca;
+			--charcoal: #798d94;
+			--white: white;
+			--box-radius: 0.5em;
+			--box-border: 0.5em solid var(--white);
+		}
+
+		body {
+			font-family: "Iosevka Slab", monospace;
+			font-size: 1.5em;
+			background-color: var(--balboa);
+			color: var(--white);
+			max-width: 50em;
+			margin: auto;
+			padding: 1em;
+		}
+
+		hr {
+			color: var(--white);
+		}
+
+		nav {
+			list-style-type: none;
+			text-align: center;
+		}
+
+		nav ul {
+			padding: 0;
+			margin: 0;
+		}
+
+		nav li {
+			display: inline-block;
+			margin: 0.5em;
+			padding: 0.5em;
+		}
+
+		nav svg {
+			padding-right: 0.5em;
+		}
+
+		nav a:link,
+		nav a:visited,
+		nav a:hover,
+		nav a:active {
+			display: flex;
+			align-items: center;
+			color: var(--white);
+			text-decoration: none;
+		}
+
+		a:link {
+			color: var(--slate);
+		}
+
+		a:visited {
+			color: var(--charcoal);
+		}
+
+		pre {
+			white-space: pre-wrap;
+			display: block;
+			background-color: var(--charcoal);
+			padding: 1em;
+			border-radius: var(--box-radius);
+			border-left: var(--box-border);
+			border-right: var(--box-border);
+		}
+
+		.description {
+			background-color: var(--ruby);
+			padding: 1em;
+			border-radius: var(--box-radius);
+			border-left: var(--box-border);
+			border-right: var(--box-border);
+		}
+
+		h1,
+		blockquote {
+			font-style: oblique;
+		}
+
+		header {
+			text-align: center;
+		}
+
+		article ul {
+			list-style: none;
+			padding: 0;
+			margin: 0;
+		}
+
+		article ul li {
+			padding: 0.5em;
+		}
+
+		article ul li:before {
+			content: "➙";
+			padding-right: 0.5em;
+		}
+
+		article ol li {
+			padding: 0.5em;
+		}
+
+		p img {
+			display: block;
+			margin-left: auto;
+			margin-right: auto;
+			max-width: 75%;
+			height: auto;
+			border-radius: var(--box-radius);
+			border-left: var(--box-border);
+			border-right: var(--box-border);
+		}
+
+		iframe {
+			display: block;
+			margin-left: auto;
+			margin-right: auto;
+		}
+
+		.list {
+			overflow-x: auto;
+		}
+
+		.list table {
+			width: 100%;
+		}
+
+		.list td,
+		th {
+			padding: 0.5em;
+			text-align: left;
+			border-bottom: 1px solid var(--charcoal);
+		}
+
+		svg {
+			width: 24px;
+			height: 24px;
+		}
+
+		.form {
+			text-align: center;
+		}
+
+		.form input {
+			font-size: 1em;
+			margin-top: 1em;
+			border-radius: 3em;
+			box-sizing: border-box;
+			padding: 0.5em;
+			border: 0;
+		}
+
+		.form .description {
+			display: none;
+		}
+	</style>
+
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<meta property="og:description" content="The World Wide Web pages of Adam Carpenter" />
+	<meta property="og:image" content="https://nextcloud.53hor.net/index.php/s/Nx9e7iHbw4t99wo/preview" />
+	<meta property="og:site_name" content="53hor.net" />
+	<meta property="og:title" content="Adam Carpenter (53hornet)" />
+	<meta property="og:type" content="website" />
+	<meta property="og:url" content="https://www.53hor.net" />
+	<?php
+	if (isset($title)) {
+		printf('<title>53hornet ➙ %s</title>', $title);
+	} else {
+		echo '<title>53hornet</title>';
+	}
+	?>
+</head>
+
+<body>
+
+	<?php
+	if (!isset($nav) || $nav) {
+		include('nav.php');
+	}
+	?>
+	<article>
+		<?php
+		if (isset($title)) {
+			printf('<h1>%s</h1>', $title);
+		}
+		?>