big ol toc update

css/main.css

@@ -9,6 +9,8 @@
 	color-scheme: light dark;
 
 	--font-family: 'Atkinson Hyperlegible Next', sans-serif;
+	/* if you change the header font, go to post-toc.css and fuck about with the width
+		of the table of contents */
 	--font-family-headers: 'Peritel', 'Atkinson Hyperlegible Next', sans-serif;
 	--font-family-code: 'Atkinson Hyperlegible Mono', monospace;
 
@@ -67,7 +69,6 @@
 }
 
 /* Base */
-
 * {
 	box-sizing: border-box;
 	margin: 0;

css/post-toc.css

@@ -0,0 +1,73 @@
+#toc {
+	float: right;
+	margin: 1rem 0 1.5rem 1.5rem;
+	width: min(calc(100% - 1.5rem), 23rem);
+		/* 23rem is the width of the words 'table of contents' in my header font */
+		/* yes, it's a bit hacky */
+}
+
+@media (max-width: 850px) {
+	#toc {
+		float: unset;
+		margin-top: 2rem;
+		margin-left: .5rem;
+		width: calc(100% - .5rem);
+	}
+}
+
+#toc details {
+	border: thick solid var(--color-pink);
+	border-radius: 1rem;
+	margin-top: 1rem;
+}
+
+#toc summary {
+	position: relative;
+	top: -1.5rem;
+	left: -.75rem;
+	width: fit-content;
+	background: var(--color-bg);
+	border-radius: .5rem;
+}
+
+#toc summary:focus-visible {
+	outline: .15rem solid var(--color-teal);
+}
+
+#toc summary::marker {
+	font-size: 2.35rem;
+}
+
+#toc h2 {
+	margin-top: 0;
+	display: inline;
+	line-height: normal;
+}
+
+#toc nav {
+	position: relative;
+	top: -1.25rem;
+}
+
+#toc li {
+	margin-block: .45rem 0;
+}
+
+@media (max-width: 650px) {
+	#toc nav > ol {
+		margin-left: .5rem;
+	}
+}
+
+/* basically we want to style this `ol` as a `ul` */
+#toc ol > li {
+	list-style: disc;
+}
+
+#toc ol > li > ol > li {
+	list-style: circle;
+}
+
+#toc ol > li > ol > li > ol > li {
+	list-style: square;
+}