6 files changed, 362 insertions, 0 deletions
diff --git a/_sass/code.scss b/_sass/code.scss
new file mode 100644
index 0000000..79791b3
--- /dev/null
+++ b/_sass/code.scss
@@ -0,0 +1,19 @@
+pre.highlight {
+	code { color: var(--code); }
+	// https://github.com/rouge-ruby/rouge/wiki/List-of-tokens
+	@each $c in c,cm,cp,c1,cs { .#{$c} { @extend %token_comment } }
+	@each $c in k,kc,kd,kn,kp,kr,kt { .#{$c} { @extend %token_keyword } }
+	@each $c in s,sb,sc,sd,s2,se,sh,si,sx,sr,s1,ss { .#{$c} { @extend %token_string } }
+	@each $c in m,mf,mh,mi,il,mo,mx,mb { .#{$c} { @extend %token_number } }
+	@each $c in o,ow { .#{$c} { @extend %token_operator } }
+}
+
+%token_comment { font-style: italic; }
+%token_keyword { font-weight: 700; }
+
+%token_comment { color: var(--code-comment); }
+%token_keyword { color: var(--code-keyword); }
+%token_string { color: var(--code-string); }
+%token_number { color: var(--code-number); }
+%token_operator { color: var(--code-operator); }
+
diff --git a/_sass/color.scss b/_sass/color.scss
new file mode 100644
index 0000000..9a5caff
--- /dev/null
+++ b/_sass/color.scss
@@ -0,0 +1,40 @@
+:root {
+	--bg-0: canvas;
+	--fg-0: canvastext;
+	--bg-1: canvastext;
+	--fg-1: canvas;
+	--bg-2: buttonface;
+	--fg-2: buttontext;
+
+	--code-comment: #556885;
+	--code-keyword: #a72076;
+	--code-string: #755a1c;
+	--code-number: #c94f29;
+	--code-operator: #6327c1;
+
+	--admonition-warning: #d61b12;
+	--admonition-note: #a0790a;
+	--admonition-info: #0f4ba3;
+}
+
+@media only screen and (prefers-color-scheme: dark) {
+	:root {
+		--bg-0: canvas;
+		--fg-0: canvastext;
+		--bg-1: color-mix(in srgb, canvas 100%, white 10%);
+		--fg-1: canvastext;
+		--bg-2: var(--bg-1);
+		--fg-2: var(--fg-1);
+
+		--code-comment: #808b9bd9;
+		--code-keyword: #d25a76;
+		--code-string: #e4a87e;
+		--code-number: #fa7d57;
+		--code-operator: #da9eff;
+
+		--admonition-warning: #f87171;
+		--admonition-note: #f2b939;
+		--admonition-info: #74b7f2;
+	}
+}
+
diff --git a/_sass/layout.scss b/_sass/layout.scss
new file mode 100644
index 0000000..cbc9d17
--- /dev/null
+++ b/_sass/layout.scss
@@ -0,0 +1,135 @@
+html, body {
+	padding: 0;
+	margin: 0;
+}
+
+.limitwidth {
+	max-width: 650px;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: 12px;
+	padding-right: 12px;
+}
+
+nav {
+	position: sticky;
+	z-index: 2; // above toc
+
+	top: 0;
+	left: 0;
+	right: 0;
+
+	line-height: 20px;
+}
+
+article {
+	margin-top: 24px;
+	margin-bottom: 24px;
+}
+
+nav a {
+	display: inline-block;
+	padding: 2px 8px;
+}
+
+nav .right { float: right; }
+
+header, footer { padding: 8px 0px; }
+
+img, figcaption {
+	display: block;
+	max-width: 80%;
+	margin: 0 auto;
+}
+
+// table of contents
+aside {
+	// make sure mouse events work on toc even if content is behind toc
+	position: relative;
+	z-index: 1;
+
+	float: right;
+	width: 40%;
+	text-align: left;
+
+	margin-left: 12px;
+	margin-bottom: 6px;
+	padding: 6px 0px;
+}
+
+ul {
+	padding-left: 24px;
+}
+
+aside ul {
+	padding-left: 16px;
+	margin: 0;
+	// list-style-position: inside;
+	list-style-type: square;
+}
+
+// indent first level
+aside > ul { margin-left: 12px; }
+
+// align description arrow with list bullet inside toc
+summary { list-style-position: outside; }
+// hide bullets for list items that can be expanded
+li.stub::marker { content: ""; }
+// collapsable element
+summary, summary::marker { cursor: pointer; }
+
+blockquote {
+	position: relative;
+	padding-left: 12px;
+	margin-top: 24px;
+	margin-bottom: 24px;
+}
+
+blockquote, figure {
+	margin-left: 0;
+	margin-right: 0;
+}
+
+pre {
+	overflow-x: auto;
+	border-radius: 10px;
+	padding: 6px 10px;
+}
+
+figure figcaption {
+	margin-top: 6px;
+}
+
+// fix anchor scroll offset
+h1, h2, h3, h4, h5, h6 { scroll-margin-top: 40px; }
+
+footer ul {
+	list-style: none;
+	padding: 0;
+}
+
+.autocolumn {
+	display: flex;
+	gap: 24px;
+	justify-content: flex-start;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+.autocolumn .column {
+	min-width: 250px;
+	flex-grow: 1;
+}
+
+#search {
+	display: flex;
+	gap: 6px;
+	margin: 24px 0px;
+}
+#search input[type=text] { flex-grow: 1; }
+
+// center tables
+table {
+	margin-left: auto;
+	margin-right: auto;
+}
+
diff --git a/_sass/media.scss b/_sass/media.scss
new file mode 100644
index 0000000..134d0d4
--- /dev/null
+++ b/_sass/media.scss
@@ -0,0 +1,30 @@
+// no floating toc when screen too narrow
+@media only screen and (max-width: 450px) {
+	aside {
+		float: none;
+		width: unset;
+
+		border-left: none;
+		border-bottom: 1px dashed;
+		margin-left: 0px;
+	}
+}
+
+@media only screen and (prefers-color-scheme: dark) {
+	nav .item.active {
+		text-decoration: underline;
+		font-weight: bold;
+	}
+}
+
+@media print {
+	nav { display: none; }
+
+	.invert {
+		background-color: unset;
+		color: unset;
+	}
+
+	.limitwidth { max-width: 35em; }
+}
+
diff --git a/_sass/theme.scss b/_sass/theme.scss
new file mode 100644
index 0000000..a844858
--- /dev/null
+++ b/_sass/theme.scss
@@ -0,0 +1,121 @@
+
+blockquote {
+	font-style: italic;
+	opacity: .8;
+	--color: currentcolor;
+}
+blockquote::before {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: -4px;
+	bottom: -4px;
+	width: 2px;
+	background-color: var(--color);
+}
+blockquote p {
+	margin: 1ex 0;
+}
+blockquote.admonition {
+	font-style: unset;
+	opacity: unset;
+}
+blockquote.admonition .title {
+	font-weight: bold;
+	color: var(--bg-0);
+	background-color: var(--color);
+	display: inline-block;
+	padding: 3px 6px;
+	border-radius: 4px;
+	margin: 0;
+}
+@each $level in warning,note,info {
+	.admonition.#{$level} {
+		--color: var(--admonition-#{$level});
+	}
+}
+
+nav, header, footer {
+	background-color: var(--bg-1);
+	color: var(--fg-1);
+}
+
+nav .item.active {
+	background-color: var(--bg-0) !important;
+	color: var(--fg-0) !important;
+}
+
+// only show underline when hovering link
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+// separator style
+hr {
+	display: block;
+	border: none;
+	border-top: 1px dashed;
+}
+
+aside { border-left: 1px dashed; }
+
+pre { border: 1px solid; }
+
+header .title { font-size: 150%; }
+footer .title { font-size: 120%; }
+
+.plainlink a,
+.plainlink a:visited { color: inherit; }
+
+nav .right a {
+	opacity: .75;
+	font-style: italic;
+}
+
+td, th {
+	padding: 0 1ex;
+}
+table {
+	border-color: currentcolor;
+	border-spacing: 0;
+}
+
+// booktabs tables
+table th {
+	border-bottom-style: solid; // \midrule
+	padding-bottom: .4ex; // \aboverulesep
+	border-bottom-width: .05em; // \lightrulewidth
+}
+table tr:has(th) + tr td {
+	padding-top: .65ex; // \belowrulesep
+}
+table {
+	border-top-style: solid; // \toprule
+	margin-top: 0; // \abovetopsep
+	border-top-width: .08em; // \heavyrulewidth
+	padding-top: .65ex; // \belowrulesep
+
+	border-bottom-style: solid; // \bottomrule
+	padding-bottom: .4ex; // \aboverulesep
+	border-bottom-width: .08em; // \heavyrulewidth
+	margin-bottom: 0; // \belowbottomsep
+}
+
+.sortcolumn {
+	display: list-item;
+	list-style: inside;
+	list-style-type: disclosure-open;
+}
+
+input, button {
+	border: none;
+	background-color: var(--bg-2);
+	color: var(--fg-2);
+
+	box-sizing: content-box;
+	height: 20px;
+	line-height: 20px;
+	display: inline-block;
+	padding: 2px 8px;
+}
+input[type=submit], buttom { cursor: pointer; }
+
diff --git a/_sass/typography.scss b/_sass/typography.scss
new file mode 100644
index 0000000..335e433
--- /dev/null
+++ b/_sass/typography.scss
@@ -0,0 +1,17 @@
+html {
+	font-family: sans-serif;
+	font-size: 10pt;
+	hyphens: auto;
+	tab-size: 2;
+}
+
+code {
+	font-family: monospace;
+	font-size: 9pt;
+}
+
+h1, h2, h3, h4, h5, h6,
+aside,
+header { text-wrap: balance; }
+
+article { text-align: justify; }