path: root/includes/head.php



<!DOCTYPE html>
<html lang="en-US">

<head>
	<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" />

	<style>
		@font-face {
			font-family: "Iosevka Slab";
			font-display: swap;
			src: url("/assets/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;
			width: 24px;
			height: 24px;
		}


		nav svg path,
		nav svg rect {
			fill: var(--white);
		}

		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);
			overflow: auto;
		}

		.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-top: 1em;
			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);
		}

		.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>

	<?php
	if (isset($title)) {
		printf('<title>53hornet ➙ %s</title>', $title);
	} else {
		echo '<title>53hornet</title>';
	}
	?>

	<link rel="icon" href="/assets/53hornet.svg" type="image/svg+xml">
</head>

<body>

	<?php
	include('nav.php');
	?>
	<article>