Annotation styles

views/transform/form.css

@@ -535,12 +535,12 @@
 
 	/* Trix editor content area */
 	trix-editor {
-		@apply block w-full focus:border-none focus:outline-none px-3 py-2 min-h-[6rem];
+		@apply block w-full focus:border-none focus:outline-none px-3 py-2 min-h-[9rem];
 	}
 
 	/* Trix content formatting styles */
 	trix-editor h1 {
-		@apply text-2xl font-bold mt-4 mb-2 first:mt-0;
+		@apply mt-1.5 mb-0.5 first:mt-0 !text-base !font-sans !font-bold;
 	}
 
 	trix-editor blockquote {
@@ -611,7 +611,7 @@
 	}
 
 	.trix-dialog {
-		@apply hidden absolute top-full left-0 right-0 mt-1 p-3 bg-white border border-stone-300 rounded-md shadow-lg z-10;
+		@apply hidden absolute top-full left-0 right-0 mt-1 p-3 bg-white border border-stone-300 rounded-xs shadow-lg z-10;
 	}
 
 	.trix-dialog[data-trix-active] {
@@ -623,7 +623,7 @@
 	}
 
 	.trix-input--dialog {
-		@apply w-full px-3 py-1.5 border border-stone-300 rounded-md
+		@apply w-full px-3 py-1.5 border border-stone-300 rounded-xs
 		       focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-1;
 	}
 
@@ -632,7 +632,7 @@
 	}
 
 	.trix-button--dialog {
-		@apply px-4 py-1.5 text-sm font-medium rounded-md
+		@apply px-4 py-1.5 text-sm font-medium rounded-xs
 		       border border-transparent shadow-sm
 		       cursor-pointer transition-all duration-75
 		       focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500;

views/transform/main.js

@@ -2,6 +2,12 @@
 import "./site.css";
 
 import Trix from "trix";
+
+// Disable file attachments in Trix editor
+document.addEventListener("trix-file-accept", (event) => {
+	event.preventDefault();
+});
+
 import { FilterPill } from "./filter-pill.js";
 import { FilterList } from "./filter-list.js";
 import { ScrollButton } from "./scroll-button.js";

views/transform/site.css

@@ -253,6 +253,73 @@
 		@apply -indent-3.5 ml-3.5;
 	}
 
+	/* Annotation Content Display Styling */
+	.annotation-content {
+		@apply font-serif;
+	}
+
+	/* Headings - bold with spacing, same font size */
+	.annotation-content h1 {
+		@apply font-bold mt-2 mb-1 leading-normal;
+	}
+
+	/* Blockquotes - minimal styling */
+	.annotation-content blockquote {
+		@apply border-l-4 border-stone-400 pl-4 py-1 italic text-gray-700;
+	}
+
+	/* Lists - compact with proper indentation */
+	.annotation-content ul {
+		@apply list-disc list-outside my-1;
+	}
+
+	.annotation-content ol {
+		@apply list-decimal list-outside my-1;
+	}
+
+	.annotation-content li {
+		@apply leading-normal;
+		margin-left: 1.5rem;
+	}
+
+	.annotation-content ul > li {
+		list-style-type: disc;
+	}
+
+	.annotation-content ol > li {
+		list-style-type: decimal;
+	}
+
+	/* Nested lists - remove extra spacing */
+	.annotation-content ul ul,
+	.annotation-content ol ul {
+		@apply list-disc my-0;
+	}
+
+	.annotation-content ul ol,
+	.annotation-content ol ol {
+		@apply list-decimal my-0;
+	}
+
+	.annotation-content ul ul > li,
+	.annotation-content ol ul > li,
+	.annotation-content ul ol > li,
+	.annotation-content ol ol > li {
+		@apply leading-normal;
+	}
+
+	/* Links - match site link styling */
+	.annotation-content a {
+		@apply hyphens-none underline decoration-dotted hover:decoration-solid
+		       text-slate-700 hover:text-slate-900 underline-offset-3;
+	}
+
+	/* Code blocks (if needed) */
+	.annotation-content pre {
+		@apply bg-stone-100 border border-stone-300 rounded px-3 py-2 my-1
+		       font-mono text-sm overflow-x-auto;
+	}
+
 	#indexpage {
 		background-image: url("/assets/bg.jpg");
 		@apply h-full w-full;