<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
		<meta name="author" content="Stefan Mühlinghaus">
		<meta name="viewport" content="initial-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="theme-color" content="#222">
		<meta name="robots" content="noindex, nofollow">
		<link rel="icon" type="image/vnd.microsoft.icon" href="/img/favicon-notes.ico">
		<script defer src="/js/alpine-alphabreed.js"></script>
		<script defer src="/js/alpine-3.15.3.min.js"></script>
		<style>
			:root {
				--color-hl: #a19bff;
				--color-bg: #ccc;
				--color-fg: #333;
				--color-cs: black;
			}
			@media (prefers-color-scheme: dark) {
				:root {
					--color-fg: #ccc;
					--color-bg: #333;
					--color-cs: white;
				}
			}
			::selection {
				background-color:var(--color-hl); color:#333;
			}
			html, body, form, textarea { padding:0; margin:0;
				height:100%; }
			html { background-color:var(--color-bg); color:var(--color-fg);
				caret-color:var(--color-cs); font-family:monospace;
				font-size:15px; }
			main { height:100%; }
			textarea { border:none; padding:20px; width:100%;
				font-family:inherit; box-sizing:border-box; resize:none;
				background-color:inherit; color:inherit;
				font-size:inherit; outline:none; }
			#pending { position:fixed; top:10px; right:10px; width:20px;
				height:20px; border:3px solid transparent; border-radius:20px; 
				border-color:var(--color-hl) var(--color-hl) transparent transparent;
				opacity:0; transition:opacity 0.5s; transition-delay:0.5s;
				animation:0.7s linear infinite rotate; }
			#pending.show { opacity:1; }
			@keyframes rotate {
				from { transform:rotate(0deg); }
				to { transform:rotate(359deg); }
			}
		</style>
	</head>
	<body>
		{{ .Content }}
	</body>
</html>
