finalversion marginalien

views/routes/brief/body.gohtml

@@ -20,10 +20,59 @@
 	</div>
 </div>
 
-<div class="text">
+<div class="text flex flex-row">
 	{{- Safe (ParseGeneric .text.Content) -}}
 </div>
 
 <div class="traditions mt-12 pt-3 border-t-gray-200 border-t-1 max-w-[90ch] print:border-none">
 	{{ template "_lettertrad" $model.meta -}}
 </div>
+
+<script type="module">
+	function alignSidenotes() {
+		const text = document.querySelector(".text");
+		if (!text) return;
+		const notes = text.querySelectorAll(".note-sidenote-meta,.note-hand");
+
+		// Only do margin notes if wide enough and not printing
+		// if (window.innerWidth < 900 || window.matchMedia("print").matches) return;
+		// Reset all notes for fallback
+		notes.forEach((note) => {
+			note.classList.remove("margin-note");
+			note.style.top = "";
+		});
+
+		notes.forEach((note) => {
+			const noteId = note.id;
+			if (!noteId) return;
+			const anchor = text.querySelector(
+				`.sidenote[aria-describedby="${noteId}"], .hand[aria-describedby="${noteId}"]`,
+			);
+			if (!anchor) return;
+
+			console.log(anchor);
+			// Mark as margin note
+			note.classList.add("margin-note");
+			// Position: relative to .text
+			const textRect = text.getBoundingClientRect();
+			const anchorRect = anchor.getBoundingClientRect();
+			// Get scroll offset for window
+			const top = anchorRect.top - textRect.top;
+			note.style.top = `${top}px`;
+		});
+	}
+
+	// Run on load, resize, and before/after print
+	alignSidenotes();
+	window.addEventListener("resize", alignSidenotes);
+	window.addEventListener("scroll", alignSidenotes); // If container is scrollable
+
+	// Revert to fallback for print, reapply after
+	window.matchMedia("print").addEventListener("change", (e) => {
+		if (e.matches) {
+			alignSidenotes(); // fallback mode (will un-absolute)
+		} else {
+			setTimeout(alignSidenotes, 100); // recalc after print closes
+		}
+	});
+</script>

views/transform/site.css

@@ -87,7 +87,15 @@
 	}
 
 	.text {
-		@apply font-serif max-w-[80ch] relative;
+		@apply font-serif relative;
+	}
+
+	.text .fulltext {
+		@apply max-w-[80ch] mr-8;
+	}
+
+	.text .notes {
+		@apply relative max-w-[80ch] pr-4;
 	}
 
 	.text .page,
@@ -170,12 +178,12 @@
 	}
 
 	.text .page {
-		@apply font-sans text-sm text-gray-500 absolute left-0 ml-[-5%] w-[2%] mt-[0.4rem] leading-[1.2];
+		@apply font-sans text-sm text-slate-600 absolute -left-[2rem] w-[1rem] mt-[0.4rem] leading-[1.2];
 	}
 
 	.text .eanchor-page::before {
-		content: " | ";
-		@apply text-gray-500 font-sans text-sm relative bottom-[0.1rem];
+		content: "|";
+		@apply text-slate-600 font-sans text-sm relative bottom-[0.1rem] pr-0.5;
 	}
 
 	/* .text .page + br { */
@@ -255,7 +263,7 @@
 	}
 
 	.text .note-note {
-		@apply inline text-sm text-gray-500 relative left-[0.1rem] -top-[0.1rem];
+		@apply inline text-sm text-gray-500 relative left-[0.1rem];
 	}
 
 	.text .sidenote {
@@ -263,14 +271,26 @@
 	}
 
 	.text .sidenote-page::before {
-		content: "| S. ";
+		content: "; S. ";
 	}
 
-	.text .sidenote-pos {
+	.text .note-sidenote-meta > div {
+		@apply inline;
+	}
+
+	.text .note-sidenote-meta .sidenote-pos {
 		@apply !hidden;
 	}
 
 	.text .hand {
-		@apply inline text-blue-950 font-didone;
+		@apply inline text-blue-950 font-didone text-[0.9rem];
+	}
+
+	.text .margin-note {
+		@apply absolute w-[13rem] text-sm;
+	}
+
+	.text .note-hand {
+		@apply text-blue-950;
 	}
 }