Initial commit

1 files changed, 433 insertions, 0 deletions

diff --git a/style.css b/style.css
new file mode 100644
index 0000000..d4b0fb4
--- /dev/null
+++ b/style.css
@@ -0,0 +1,433 @@
+:root {
+	--text-button: #f9f9f9;
+	--background-button: #333333;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--text-normal: #cccccc;
+		--text-code: #f9f9f9;
+		--background-normal: #222222;
+		--background-code: #333333;
+	}
+
+	/* code highlighting */
+    code span.al { color: #ffcfaf; } /* Alert */
+    code span.an { color: #7f9f7f; font-weight: bold; } /* Annotation */
+    code span.at { } /* Attribute */
+    code span.bn { color: #dca3a3; } /* BaseN */
+    code span.bu { } /* BuiltIn */
+    code span.cf { color: #f0dfaf; } /* ControlFlow */
+    code span.ch { color: #dca3a3; } /* Char */
+    code span.cn { color: #dca3a3; font-weight: bold; } /* Constant */
+    code span.co { color: #7f9f7f; } /* Comment */
+    code span.cv { color: #7f9f7f; font-weight: bold; } /* CommentVar */
+    code span.do { color: #7f9f7f; } /* Documentation */
+    code span.dt { color: #dfdfbf; } /* DataType */
+    code span.dv { color: #dcdccc; } /* DecVal */
+    code span.er { color: #c3bf9f; } /* Error */
+    code span.ex { } /* Extension */
+    code span.fl { color: #c0bed1; } /* Float */
+    code span.fu { color: #efef8f; } /* Function */
+    code span.im { } /* Import */
+    code span.in { color: #7f9f7f; font-weight: bold; } /* Information */
+    code span.kw { color: #f0dfaf; } /* Keyword */
+    code span.op { color: #f0efd0; } /* Operator */
+    code span.ot { color: #efef8f; } /* Other */
+    code span.pp { color: #ffcfaf; font-weight: bold; } /* Preprocessor */
+    code span.sc { color: #dca3a3; } /* SpecialChar */
+    code span.ss { color: #cc9393; } /* SpecialString */
+    code span.st { color: #cc9393; } /* String */
+    code span.va { } /* Variable */
+    code span.vs { color: #cc9393; } /* VerbatimString */
+    code span.wa { color: #7f9f7f; font-weight: bold; } /* Warning */
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--text-normal: #212121;
+		--text-code: #424242;
+		--background-normal: #fff;
+		--background-code: #eee;
+	}
+
+	img[src$=".svg"].mermaid {
+		filter: invert(1);
+	}
+
+	img.graph {
+		filter: invert(1);
+	}
+
+	/* code highlighting */
+	code span.al { color: #ef2929; } /* Alert */
+    code span.an { color: #8f5902; font-weight: bold; } /* Annotation */
+    code span.at { color: #204a87; } /* Attribute */
+    code span.bn { color: #0000cf; } /* BaseN */
+    code span.cf { color: #204a87; font-weight: bold; } /* ControlFlow */
+    code span.ch { color: #4e9a06; } /* Char */
+    code span.cn { color: #8f5902; } /* Constant */
+    code span.co { color: #8f5902; } /* Comment */
+    code span.cv { color: #8f5902; font-weight: bold; } /* CommentVar */
+    code span.do { color: #8f5902; font-weight: bold; } /* Documentation */
+    code span.dt { color: #204a87; } /* DataType */
+    code span.dv { color: #0000cf; } /* DecVal */
+    code span.er { color: #a40000; font-weight: bold; } /* Error */
+    code span.ex { } /* Extension */
+    code span.fl { color: #0000cf; } /* Float */
+    code span.fu { color: #204a87; font-weight: bold; } /* Function */
+    code span.im { } /* Import */
+    code span.in { color: #8f5902; font-weight: bold; } /* Information */
+    code span.kw { color: #204a87; font-weight: bold; } /* Keyword */
+    code span.op { color: #ce5c00; font-weight: bold; } /* Operator */
+    code span.ot { color: #8f5902; } /* Other */
+    code span.pp { color: #8f5902; } /* Preprocessor */
+    code span.sc { color: #ce5c00; font-weight: bold; } /* SpecialChar */
+    code span.ss { color: #4e9a06; } /* SpecialString */
+    code span.st { color: #4e9a06; } /* String */
+    code span.va { color: #000000; } /* Variable */
+    code span.vs { color: #4e9a06; } /* VerbatimString */
+    code span.wa { color: #8f5902; font-weight: bold; } /* Warning */
+}
+
+html {
+	line-height: 1.5;
+	font-family: Georgia, serif;
+	font-size: 20px;
+	color: var(--text-normal);
+	background-color: var(--background-normal);
+	transition: background-color 100ms linear;
+}
+
+body {
+	margin: 0 auto;
+	max-width: 40em;
+	padding-left: 50px;
+	padding-right: 50px;
+	padding-top: 50px;
+	padding-bottom: 50px;
+	hyphens: auto;
+	overflow-wrap: break-word;
+	text-rendering: optimizeLegibility;
+	font-kerning: normal;
+}
+
+.center {
+    display: block;
+    margin: auto;
+	text-align: center;
+}
+
+@media (max-width: 600px) {
+	body {
+		font-size: 0.86em;
+		padding: 1em;
+	}
+
+	h1 {
+		font-size: 1.6em;
+	}
+}
+
+@media (max-width: 1400px) {
+	nav, #TOC {
+		display: none !important;
+	}
+
+}
+
+@media (max-width: 1024px) {
+	div.buttons {
+		display: none !important;
+	}
+}
+
+@media print {
+	body {
+		background-color: transparent;
+		color: black;
+		font-size: 12pt;
+	}
+
+	p,
+	h2,
+	h3 {
+		orphans: 3;
+		widows: 3;
+	}
+
+	h2,
+	h3,
+	h4 {
+		page-break-after: avoid;
+	}
+
+	nav, #TOC {
+		display: none !important;
+	}
+
+	div.buttons {
+		display: none !important;
+	}
+
+	figure img[src$=".svg"] {
+		max-height: 40vh;
+	}
+}
+
+@font-face {
+	font-family: 'cap';
+	src: url('res/cap.ttf') format('truetype');
+	font-display: swap;
+}
+
+::selection {
+	background-color: var(--text-normal);
+	color: var(--background-normal);
+}
+
+p {
+	margin: 1em 0;
+	text-align: justify;
+}
+
+.cap {
+	font-family: cap;
+	margin: 0.1em 0.1em -0.2em 0;
+	float: left;
+	font-size: 5em;
+	line-height: 1;
+	/* padding-top: 4px; */
+	/* padding-right: 8px; */
+	/* padding-left: 3px; */
+}
+
+a {
+	color: var(--text-normal);
+}
+
+a:visited {
+	color: var(--text-normal);
+}
+
+img {
+	max-width: 100%;
+}
+
+li br {
+	display: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	margin-top: 1.4em;
+}
+
+h5,
+h6 {
+	font-size: 1em;
+	font-style: italic;
+}
+
+h6 {
+	font-weight: normal;
+}
+
+ol,
+ul {
+	padding-left: 1.7em;
+	margin-top: 1em;
+}
+
+li>ol,
+li>ul {
+	margin-top: 0;
+}
+
+blockquote {
+	margin: 1em 0 1em 1.7em;
+	padding-left: 1em;
+	border-left: 2px solid #e6e6e6;
+	/* color: #606060; */
+}
+
+code {
+	font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
+	font-size: 85%;
+	padding: 2px;
+	margin: 0;
+}
+
+pre {
+	margin: 1em 0;
+	overflow: auto;
+	padding: 6px;
+}
+
+pre code {
+	padding: 0;
+	overflow: visible;
+	overflow-wrap: normal;
+}
+
+hr {
+	background-color: #555555;
+	border: none;
+	height: 1px;
+	margin: 1em 0;
+}
+
+table {
+	margin: 1em auto;
+	border-collapse: collapse;
+	overflow-x: auto;
+	font-variant-numeric: lining-nums tabular-nums;
+}
+
+table caption {
+	margin-bottom: 0.75em;
+}
+
+tbody {
+	margin-top: 0.5em;
+	border-top: 1px solid #555555;
+	border-bottom: 1px solid #555555;
+}
+
+th {
+	border-top: 1px solid #555555;
+	padding: 0.25em 0.5em 0.25em 0.5em;
+}
+
+td {
+	padding: 0.125em 0.5em 0.25em 0.5em;
+}
+
+header {
+	margin-bottom: 4em;
+	text-align: center;
+}
+
+header p {
+	text-align: center !important;
+}
+
+#TOC {
+	position: fixed;
+	left: 3%;
+	top: 50%;
+	transform: translateY(-50%);
+	overflow: auto;
+}
+
+#TOC li {
+	list-style: none;
+}
+
+#TOC ul {
+	padding-left: 1.3em;
+}
+
+#TOC>ul {
+	padding-left: 0;
+}
+
+#TOC a:not(:hover) {
+	text-decoration: none;
+}
+
+figure img[src$=".svg"] {
+	margin: 0 auto;
+	display: block;
+}
+
+code, pre, div.sourceCode {
+	white-space: pre-wrap;
+	background-color: var(--background-code);
+	color: var(--text-code);
+	border-radius: 8px;
+	margin: 0;
+}
+
+span.smallcaps {
+	font-variant: small-caps;
+}
+
+span.underline {
+	text-decoration: underline;
+}
+
+div.column {
+	display: inline-block;
+	vertical-align: top;
+	width: 50%;
+}
+
+div.hanging-indent {
+	margin-left: 1.5em;
+	text-indent: -1.5em;
+}
+
+ul.task-list {
+	list-style: none;
+}
+
+div.buttons {
+	display: flex;
+	flex-flow: column;
+	position: fixed;
+	top: 50%;
+	transform: translateY(-50%);
+	right: 0;
+	margin: 3%;
+	color: var(--text-button);
+}
+
+div.buttons button {
+	width: 5em;
+	height: 5em;
+	border-radius: 50%;
+	border: 0;
+	margin: 16px 0;
+	background-color: var(--background-button);
+	color: var(--text-button);
+}
+
+div.buttons button svg {
+	width: 2em;
+	height: 2em;
+	stroke: currentColor;
+	stroke-width: 2;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	fill: none;
+}
+
+div.popover {
+	display: none;
+	z-index: 10;
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.5);
+}
+
+div.popover div {
+	z-index: 15;
+	position: fixed;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	max-height: 30%;
+	max-width: 100%;
+	border-radius: 8px;
+	border: 1px solid var(--text-code);
+	background-color: var(--background-code);
+	padding: 16px;
+}