From e5a5f5e8b602890f6b0353237143488fcf1f401c Mon Sep 17 00:00:00 2001
From: a <a@trwnh.com>
Date: Sun, 6 Oct 2024 16:50:17 -0500
Subject: [PATCH] WIP: floating TOC toggle on articles

---
 unified.test.hugo/assets/styles/common.scss   |  1 +
 .../assets/styles/common/content.scss         |  6 ++-
 .../styles/layouts/_default/single.scss       | 50 +++++++++++++++++++
 unified.test.hugo/assets/styles/screen.scss   |  4 +-
 .../layouts/_default/single.html              |  3 ++
 5 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/unified.test.hugo/assets/styles/common.scss b/unified.test.hugo/assets/styles/common.scss
index acc1c5c..f03b358 100644
--- a/unified.test.hugo/assets/styles/common.scss
+++ b/unified.test.hugo/assets/styles/common.scss
@@ -23,5 +23,6 @@
 
 @import "features/autonumbering";
 @import "features/search";
+@import "features/syntax-highlighting";
 
 @import "components/table-of-contents";
\ No newline at end of file
diff --git a/unified.test.hugo/assets/styles/common/content.scss b/unified.test.hugo/assets/styles/common/content.scss
index cc60ec1..5f3a17a 100644
--- a/unified.test.hugo/assets/styles/common/content.scss
+++ b/unified.test.hugo/assets/styles/common/content.scss
@@ -1,5 +1,5 @@
 .hugo-content {
-	*:first-child {
+	> *:first-child {
 		margin-block-start: 0;
 	}
 	/* text */
@@ -104,7 +104,7 @@
 		line-height: 1.4;
 		overflow: auto;
 		white-space: pre-wrap;
-		word-wrap: break-word;
+		word-break: break-word;
 		display: grid;
 		tab-size: 3;
 		margin-block-end: 1em;
@@ -115,6 +115,8 @@
 		color: var(--ui-overlay-text);
 		padding: 0.25rem;
 		font-size: 1rem;
+		white-space: pre-wrap;
+		word-break: break-word;
 	}
 	:not(.highlight) > pre {
 		line-height: 1.5;
diff --git a/unified.test.hugo/assets/styles/layouts/_default/single.scss b/unified.test.hugo/assets/styles/layouts/_default/single.scss
index 49776fd..d8a6f36 100644
--- a/unified.test.hugo/assets/styles/layouts/_default/single.scss
+++ b/unified.test.hugo/assets/styles/layouts/_default/single.scss
@@ -40,7 +40,55 @@
 		max-width: 80ch;
 		margin-inline: auto;
 	}
+	#toc-toggle {
+		display: none;
+		position: fixed;
+		bottom: 1em;
+		right: 1em;
+		background-color: var(--ui-overlay);
+		z-index: 5;
+		outline: none;
+		&:checked ~ .page-toc {
+			display: block;
+			position: fixed;
+			z-index: 10;
+			bottom: 5em;
+			height: 80vh;
+			overflow-y: scroll;
+			right: 1em;
+			background: var(--ui-overlay);
+		}
+	}
+	label[for="toc-toggle"] {
+		position: fixed;
+		bottom: 1em;
+		right: 1em;
+		z-index: 5;
+		background: var(--ui-overlay);
+		padding: 1em;
+		border-radius: 100em;
+		width: 6em;
+		display: flex;
+		justify-content: center;
+	}
+	#toc-toggle__label-hide {
+		display: none;
+	}
+	#toc-toggle:checked ~ #toc-toggle__label-hide {
+		display: flex;
+	}
+	#toc-toggle:checked ~ #toc-toggle__label-show {
+		display: none;
+	}
+	@media (min-width: 400px) {
+		.container {
+			padding: 0 2em;
+		}
+	}
 	@media (min-width: 60rem) {
+		label[for="toc-toggle"] {
+			display: none;
+		}
 		.container {padding: 0;}
 		.page[has-toc] {
 			display: grid;
@@ -67,6 +115,8 @@
 				align-self: start;
 				justify-self: start;
 				max-width: unset;
+				border-inline-start: thin solid var(--ui-overlay);
+				padding-inline-start: 2em;
 				details {
 					padding: 0;
 					background: none;
diff --git a/unified.test.hugo/assets/styles/screen.scss b/unified.test.hugo/assets/styles/screen.scss
index b86cc78..89020dd 100644
--- a/unified.test.hugo/assets/styles/screen.scss
+++ b/unified.test.hugo/assets/styles/screen.scss
@@ -1,3 +1 @@
-@import "common";
-
-@import "features/syntax-highlighting";
\ No newline at end of file
+@import "common";
\ No newline at end of file
diff --git a/unified.test.hugo/layouts/_default/single.html b/unified.test.hugo/layouts/_default/single.html
index e381e76..2d50221 100644
--- a/unified.test.hugo/layouts/_default/single.html
+++ b/unified.test.hugo/layouts/_default/single.html
@@ -42,6 +42,9 @@
 				<hr>
 			</header>
 			{{ if .Params.toc }}
+			<input type="checkbox" id="toc-toggle">
+			<label for="toc-toggle" id="toc-toggle__label-show">Show TOC</label>
+			<label for="toc-toggle" id="toc-toggle__label-hide">Hide TOC</label>
 			<aside class="page-toc toc section">
 				<div class="container">
 					<details open>