Statische Seiten

views/transform/main.js

@@ -14,6 +14,7 @@ const FILTER_LIST_SEARCHABLE = "filter-list-searchable";
 const SCROLL_BUTTON_ELEMENT = "scroll-button";
 const TOOLTIP_ELEMENT = "tool-tip";
 const ABBREV_TOOLTIPS_ELEMENT = "abbrev-tooltips";
+const INT_LINK_ELEMENT = "int-link";
 
 class XSLTParseProcess {
 	#processors;
@@ -738,6 +739,35 @@ class AbbreviationTooltips extends HTMLElement {
 	}
 }
 
+class IntLink extends HTMLElement {
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		// Basic styling to mimic a link.
+		this.style.cursor = "pointer";
+		this.addEventListener("click", this.handleClick);
+	}
+
+	disconnectedCallback() {
+		this.removeEventListener("click", this.handleClick);
+	}
+
+	handleClick(event) {
+		const selector = this.getAttribute("data-jump");
+		if (selector) {
+			const target = document.querySelector(selector);
+			if (target) {
+				target.scrollIntoView({ behavior: "smooth" });
+			} else {
+				console.warn(`No element found for selector: ${selector}`);
+			}
+		}
+	}
+}
+
+customElements.define(INT_LINK_ELEMENT, IntLink);
 customElements.define(ABBREV_TOOLTIPS_ELEMENT, AbbreviationTooltips);
 customElements.define(FILTER_LIST_ELEMENT, FilterList);
 customElements.define(SCROLL_BUTTON_ELEMENT, ScrollButton);

views/transform/site.css

@@ -167,11 +167,19 @@
 	}
 
 	.text {
-		@apply font-serif max-w-[48rem];
+		@apply font-serif  hyphens-auto;
 	}
 
 	.text p {
-		@apply text-lg hyphens-auto;
+		@apply text-lg hyphens-auto max-w-[70ch];
+	}
+
+	.text ul {
+		@apply list-disc ml-0 max-w-[70ch];
+	}
+
+	.text ol {
+		@apply list-decimal ml-0 max-w-[70ch];
 	}
 
 	.text p:first-of-type {
@@ -190,6 +198,18 @@
 		@apply mt-1;
 	}
 
+	.text h1 {
+		@apply text-3xl font-bold mt-6 mb-1.5 hyphens-none leading-normal;
+	}
+
+	.text h2 {
+		@apply text-xl font-bold mt-3 mb-1.5 hyphens-none;
+	}
+
+	.text h3 {
+		@apply text-lg font-bold mt-3 mb-1.5 hyphens-none;
+	}
+
 	.text p + ol {
 		@apply mt-1;
 	}
@@ -203,7 +223,7 @@
 	}
 
 	.text p + p:not(.indented p, p:first-of-type) {
-		@apply indent-3.5;
+		@apply indent-6;
 	}
 
 	.indented p {
@@ -327,4 +347,8 @@
 
 	#entrydata {
 	}
+
+	int-link {
+		@apply text-slate-700 hover:text-slate-900 underline decoration-dotted hover:decoration-solid;
+	}
 }