Lesekabinett & Startseite

2025-10-29 09:15:33 +00:00 · 2025-03-02 00:27:16 +01:00
parent 6e286857d5
commit 0a86833a9f
56 changed files with 771 additions and 445 deletions
--- a/views/assets/css/fonts.css
+++ b/views/assets/css/fonts.css
@@ -38,6 +38,14 @@
 	src: url(/assets/fonts/SourceSans3-BoldItalic.ttf) format("truetype");
 }

+@font-face {
+	font-family: "Spectral";
+	font-style: normal;
+	font-weight: 500;
+	font-display: swap;
+	src: url(/assets/fonts/Spectral-Regular.ttf) format("truetype");
+}
+
@font-face {
 	font-family: "Source Sans 3";
 	font-style: normal;
--- a/views/layouts/blank/root.gohtml
+++ b/views/layouts/blank/root.gohtml
@@ -2,6 +2,9 @@
 <html class="w-full h-full" {{ if .lang }}lang="{{ .lang }}"{{ end }}>
 	<head>
 		<meta charset="UTF-8" />
+		<meta
+			name="htmx-config"
+			content='{"defaultSwapStyle":"outerHTML", "scrollBehavior": "instant"}' />

 		{{ block "head" . }}
 			<!-- Default Head elements -->
@@ -9,27 +12,38 @@

 		{{ if .isDev }}
 			<link rel="icon" href="/assets/logo/dev_favicon.png" />
+			<meta name="robots" content="noindex" />
 		{{ else }}
+			{{ if .url }}
+				<link rel="canonical" href="{{ .url }}" />
+			{{ end }}
 			<link rel="icon" href="/assets/logo/favicon.png" />
 		{{ end }}


-		<link href="/assets/css/remixicon.css" rel="stylesheet" />
 		<script src="/assets/js/alpine.min.js" defer></script>
 		<script src="/assets/js/htmx.min.js" defer></script>
 		<script src="/assets/js/htmx-response-targets.js" defer></script>
-		<script src="/assets/js/client-side-templates.js" defer></script>
+		<script src="/assets/js/mark.min.js" defer></script>

+		<script type="module" src="/assets/scripts.js"></script>
+		<link href="/assets/css/remixicon.css" rel="stylesheet" />
 		<link rel="stylesheet" type="text/css" href="/assets/css/fonts.css" />
 		<link rel="stylesheet" type="text/css" href="/assets/style.css" />

 		<script type="module">
-			import { setup } from "/assets/scripts.js";
-			setup();
+			document.body.addEventListener("htmx:responseError", function (event) {
+				const config = event.detail.requestConfig;
+				if (config.boosted) {
+					document.body.innerHTML = event.detail.xhr.responseText;
+					const newUrl = event.detail.xhr.responseURL || config.url;
+					window.history.pushState(null, "", newUrl);
+				}
+			});
 		</script>
 	</head>

-	<body class="w-full" hx-ext="response-targets" hx-boost="true">
+	<body class="w-full h-full min-h-full" hx-ext="response-targets" hx-boost="true">
 			{{ block "body" . }}
 					<!-- Default app body... -->
 			{{ end }}
--- a/views/layouts/components/_menu.gohtml
+++ b/views/layouts/components/_menu.gohtml
@@ -5,10 +5,16 @@
 	x-data="{ openeditionmenu: window.location.pathname.startsWith('/edition/')}">
 	<div class="flex flex-row justify-between">
 		<div class="flex flex-row gap-x-3">
-			<div class="grow-0"><img class="h-14 w-14 border" src="/assets/favicon.png" /></div>
+			<div class="grow-0">
+				<a href="/" class="no-underline"
+					><img class="h-14 w-14 border" src="/assets/favicon.png"
+				/></a>
+			</div>
 			<div class="flex flex-col">
-				<h1 class="font-bold text-2xl tracking-wide">{{ .site.title }}</h1>
-				<h2 class="italic">{{ .site.desc }}</h2>
+				<h1 class="font-bold text-2xl tracking-wide">
+					<a href="/" class="no-underline text-slate-800">{{ .site.title }}</a>
+				</h1>
+				<h2 class="italic text-slate-800">{{ .site.desc }}</h2>
 			</div>
 		</div>

@@ -40,7 +46,7 @@
 				{{ if and $model.page (HasPrefix $model.page.Path "/edition") -}}
 					aria-current="true"
 				{{- end }}
-				data-url="/edition/"
+				data-url="/redaktion/"
 				class="text-slate-600 hover:text-slate-900 hover:cursor-pointer hover:bg-slate-100
 				!pr-2.5"
 				:class="openeditionmenu? 'bg-slate-100' : 'closed'"
@@ -57,36 +63,43 @@
 		class="submenu flex flex-row justify-end pt-3.5 gap-x-4 font-bold font-serif
 		[&>a]:no-underline [&>*]:-mb-1.5 w-full pr-2.5 [&>*]:px-1.5">
 		<a
-			href="/edition/einfuehrung/"
-			{{ if and $model.page (HasPrefix $model.page.Path "/edition/einfuehrung") -}}
+			href="/redaktion/einfuehrung/"
+			{{ if and $model.page (HasPrefix $model.page.Path "/redaktion/einfuehrung") -}}
 				aria-current="page"
 			{{- end -}}
 			>Einführung</a
 		>
 		<a
-			href="/edition/dokumentation/"
-			{{ if and $model.page (HasPrefix $model.page.Path "/edition/dokumentation") -}}
+			href="/redaktion/dokumentation/"
+			{{ if and $model.page (HasPrefix $model.page.Path "/redaktion/dokumentation") -}}
 				aria-current="page"
 			{{- end -}}
 			>Dokumentation</a
 		>
 		<a
-			href="/edition/literatur/"
-			{{ if and $model.page (HasPrefix $model.page.Path "/edition/literatur") -}}
+			href="/redaktion/literatur/"
+			{{ if and $model.page (HasPrefix $model.page.Path "/redaktion/literatur") -}}
 				aria-current="page"
 			{{- end -}}
 			>Literatur</a
 		>
 		<a
-			href="/edition/danksagungen/"
-			{{ if and $model.page (HasPrefix $model.page.Path "/edition/danksagungen") -}}
+			href="/redaktion/lesekabinett/"
+			{{ if and $model.page (HasPrefix $model.page.Path "/redaktion/lesekabinett") -}}
+				aria-current="page"
+			{{- end -}}
+			>Lesekabinett</a
+		>
+		<a
+			href="/redaktion/danksagungen/"
+			{{ if and $model.page (HasPrefix $model.page.Path "/redaktion/danksagungen") -}}
 				aria-current="page"
 			{{- end -}}
 			>Danksagungen</a
 		>
 		<a
-			href="/edition/kontakt/"
-			{{ if and $model.page (HasPrefix $model.page.Path "/edition/kontakt") -}}
+			href="/redaktion/kontakt/"
+			{{ if and $model.page (HasPrefix $model.page.Path "/redaktion/kontakt") -}}
 				aria-current="page"
 			{{- end -}}
 			>Kontakt</a
--- a/views/public/Lesekabinett/allatroia_anonymus_wochenblatt_1794.pdf
+++ b/views/public/Lesekabinett/allatroia_anonymus_wochenblatt_1794.pdf
--- a/views/public/Lesekabinett/anonymus.pdf
+++ b/views/public/Lesekabinett/anonymus.pdf
--- a/views/public/Lesekabinett/beschreibungen.txt
+++ b/views/public/Lesekabinett/beschreibungen.txt
@@ -0,0 +1,39 @@
+Joseph Franz von Ratschky: Vorbericht. in: Wiener Musenalmanach. 1779, S. 3-6.
+ratschky_in_wiener_1779.pdf
+
+Gottfried August Bürger: Nothgedrungene Nachrede. in: Göttinger Musenalmanach. 1782, S. 184-192.
+buerger_in_goettinger_1782.pdf
+
+Christian Cay Lorenz Hirschfeld: An die Leser. in: Gartenkalender. 1783, S. 272.
+hirschfeld_in_gartenkalender_1783.pdf
+
+Johann Heinrich Voß: Ankündigung. in: Hamburger Musenalmanach. 1784, S. 222ff.
+voss_in_hamburger_1784.pdf
+
+Gotthold Friedrich Stäudlin: Nachrede. in: Schwäbischer Musenalmanach. 1786 [o. S.].
+staeudlin_in_schwaebischer_1786.pdf
+
+Gottfried August Bürger: Fürbitte eines ans peinliche Kreuz der Verlegenheit genagelten Herausgebers eines Musenalmanachs. in: Göttinger Musenalmanach. 1789, S. 104.
+buerger_in_goettinger_1789.pdf
+
+Anonymus: Die deutschen Almanache. in: Bibliothek der redenden und bildenden Künste. Zweyten Bandes erstes Stück. Leipzig, in der Dyckischen Buchhandlung, 1806, S. 207-217.
+anonymus.pdf
+
+Stephan Schütze: Die Neujahrsversammlung. Ein dramatischer Prolog. in: Taschenbuch der Liebe und Freundschaft gewidmet. 1813, S. 1-20.
+schuetze_in_taschenbuch_1813.pdf
+
+N. B. E.: Die deutschen Taschenbücher für 1820. in: Hermes oder kritisches Jahrbuch der Literatur. Zweites Stück für das Jahr 1820. Amsterdam, in der Verlags-Expedition des Hermes, S. 191-235.
+nbe_in_hermes_1820.pdf
+
+Ferdinand Johannes Wit: Die Almanachomanie. in: Politisches Taschenbuch. 1831, S. 102-111.
+wit_in_politaschenbuch_1831.pdf
+
+August Wilhelm Schlegel: Recept. in: Deutscher Musenalmanach (Chamisso, Schwab, Gaudy). 1836, S. 18.
+schlegel_in_deutscher_1836.pdf
+
+Robert Eduard Prutz: Die Musenalmanache und Taschenbücher in Deutschland. in: Neue Schriften. Zur deutschen Literatur- und Kulturgeschichte. Erster Band, Halle, G. Schwetschke'scher Verlag, 1854, S. 105-165.
+prutz_in_musenalmanache.pdf
+
+Anonymus: Woher das Wort Almanach komme. in: Neues Wochenblatt zum Nuzzen und zur Unterhaltung für Kinder und junge Leute. Erstes Bändchen, erstes Stück, Leipzig, in der Sommerschen Buchhandlung 1794, S. 8f.
+allatroia_anonymus_wochenblatt_1794.pdf
+Allatroia
--- a/views/public/Lesekabinett/buerger_in_goettinger_1782.pdf
+++ b/views/public/Lesekabinett/buerger_in_goettinger_1782.pdf
--- a/views/public/Lesekabinett/buerger_in_goettinger_1789.pdf
+++ b/views/public/Lesekabinett/buerger_in_goettinger_1789.pdf
--- a/views/public/Lesekabinett/hirschfeld_in_gartenkalender_1783.pdf
+++ b/views/public/Lesekabinett/hirschfeld_in_gartenkalender_1783.pdf
--- a/views/public/Lesekabinett/nbe_in_hermes_1820.pdf
+++ b/views/public/Lesekabinett/nbe_in_hermes_1820.pdf
--- a/views/public/Lesekabinett/prutz_in_musenalmanache_1854.pdf
+++ b/views/public/Lesekabinett/prutz_in_musenalmanache_1854.pdf
--- a/views/public/Lesekabinett/ratschky_in_wiener_1779.pdf
+++ b/views/public/Lesekabinett/ratschky_in_wiener_1779.pdf
--- a/views/public/Lesekabinett/schlegel_in_deutscher_1836.pdf
+++ b/views/public/Lesekabinett/schlegel_in_deutscher_1836.pdf
--- a/views/public/Lesekabinett/schuetze_in_taschenbuch_1813.pdf
+++ b/views/public/Lesekabinett/schuetze_in_taschenbuch_1813.pdf
--- a/views/public/Lesekabinett/staeudlin_in_schwaebischer_1786.pdf
+++ b/views/public/Lesekabinett/staeudlin_in_schwaebischer_1786.pdf
--- a/views/public/Lesekabinett/voss_in_hamburger_1784.pdf
+++ b/views/public/Lesekabinett/voss_in_hamburger_1784.pdf
--- a/views/public/Lesekabinett/wit_in_politaschenbuch_1831.pdf
+++ b/views/public/Lesekabinett/wit_in_politaschenbuch_1831.pdf
--- a/views/public/css/fonts.css
+++ b/views/public/css/fonts.css
@@ -38,6 +38,14 @@
 	src: url(/assets/fonts/SourceSans3-BoldItalic.ttf) format("truetype");
 }

+@font-face {
+	font-family: "Spectral";
+	font-style: normal;
+	font-weight: 500;
+	font-display: swap;
+	src: url(/assets/fonts/Spectral-Regular.ttf) format("truetype");
+}
+
@font-face {
 	font-family: "Source Sans 3";
 	font-style: normal;
--- a/views/public/fonts/Spectral-Regular.ttf
+++ b/views/public/fonts/Spectral-Regular.ttf
--- a/views/public/musen.png
+++ b/views/public/musen.png
--- a/views/routes/body.gohtml
+++ b/views/routes/body.gohtml
@@ -1 +1,53 @@
-Hello from the root remplate!
+{{- $model := . -}}
+<div id="intropageroot">
+	<image-reel class="hidden lg:block max-w-full my-8 mx-12 relative" id="imagecontainer">
+		<div class="overflow-hidden flex flex-row justify-between">
+			{{- range $i, $img := $model.bilder -}}
+				<div class="shrink-0 shadow-lg primages overflow-hidden w-[200px]">
+					<popup-image
+						data-image-url="{{- $img.BildPath -}}"
+						aria-role="button"
+						tabindex="0"
+						data-hide-dl-button="true">
+						<img
+							class="shadow h-full scale-[1.3]"
+							src="{{ $img.VorschauPath }}?thumb=500x0"
+							alt="musen" />
+						<div class="image-description hidden">
+							{{- Safe $img.Beschreibung -}}
+						</div>
+					</popup-image>
+				</div>
+			{{- end -}}
+		</div>
+	</image-reel>
+
+	<div class="w-full min-h-full mt-8">
+		<div class="text-center relative max-w-screen-xl mx-auto" data-="">
+			<img
+				src="/assets/musen.png"
+				class="max-w-[28rem] mx-auto lg:absolute left-2/3 top-2"
+				alt="Bild von aufsteigenden Musen" />
+			<a href="/reihen" class="block no-underline !font-[Spectral] small-caps text-slate-700">
+				<h1 class="text-2xl lg:text-4xl pt-8 lg:!pt-52 !font-[Spectral]">Willkommen auf der</h1>
+				<h1 class="text-4xl lg:text-8xl !font-[Spectral]">Musenalm</h1>
+				<h2 class="text-2xl lg:text-4xl !font-[Spectral]">Bibliographie deutscher Almanache</h2>
+			</a>
+		</div>
+		<div class="mt-8 lg:text-lg font-medium lg:w-9/12 xl:w-7/12 mx-auto px-4 lg:px-0">
+			<div class="lg:flex gap-x-12 starttext font-serif hyphens-auto indented">
+				<div class="lg:w-2/3">
+					{{- Safe $model.texte.Abs1 -}}
+				</div>
+				<div class="lg:mt-36 lg:w-1/3">
+					{{- Safe $model.texte.Abs2 -}}
+				</div>
+			</div>
+			<div class="text-center mt-8 startlinks font-serif text-xl" data-="">
+				<a href="/redaktion/einfuehrung" class="">Einleitung</a>
+				<div class="inline px-1">|</div>
+				<a href="/reihen" class="font-bold">Alle Bände<i class="ri-arrow-right-double-line"></i></a>
+			</div>
+		</div>
+	</div>
+</div>
--- a/views/routes/redaktion/danksagungen/body.gohtml
+++ b/views/routes/redaktion/danksagungen/body.gohtml
--- a/views/routes/redaktion/danksagungen/head.gohtml
+++ b/views/routes/redaktion/danksagungen/head.gohtml
--- a/views/routes/redaktion/dokumentation/body.gohtml
+++ b/views/routes/redaktion/dokumentation/body.gohtml
--- a/views/routes/redaktion/dokumentation/head.gohtml
+++ b/views/routes/redaktion/dokumentation/head.gohtml
--- a/views/routes/redaktion/einfuehrung/body.gohtml
+++ b/views/routes/redaktion/einfuehrung/body.gohtml
--- a/views/routes/redaktion/einfuehrung/head.gohtml
+++ b/views/routes/redaktion/einfuehrung/head.gohtml
--- a/views/routes/redaktion/kontakt/body.gohtml
+++ b/views/routes/redaktion/kontakt/body.gohtml
--- a/views/routes/redaktion/kontakt/head.gohtml
+++ b/views/routes/redaktion/kontakt/head.gohtml
--- a/views/routes/redaktion/lesekabinett/body.gohtml
+++ b/views/routes/redaktion/lesekabinett/body.gohtml
@@ -0,0 +1,8 @@
+<div class="container-normal relative">
+	<div class="text indented">
+		{{ if .record.Title }}<h1 class="mb-12">{{ .record.Title }}</h1>{{ end }}
+		<div class="text">
+			{{ Safe .record.Text }}
+		</div>
+	</div>
+</div>
--- a/views/routes/redaktion/lesekabinett/head.gohtml
+++ b/views/routes/redaktion/lesekabinett/head.gohtml
--- a/views/routes/redaktion/literatur/body.gohtml
+++ b/views/routes/redaktion/literatur/body.gohtml
@@ -2,10 +2,10 @@


 <div class="container-normal relative">
-	<div class="text indented">
+	<div class="text ">
 		{{ if .record.Title }}<h1 class="mb-12">{{ .record.Title }}</h1>{{ end }}
-		<div class="flex flex-row gap-x-6 justify-between">
-			<div class="jumptext grow shrink-0">
+		<div class="flex flex-row gap-x-6 justify-between ">
+			<div class="grow shrink-0 text indented">
 				{{ Safe .record.Text }}
 			</div>
 			<div>
--- a/views/routes/redaktion/literatur/head.gohtml
+++ b/views/routes/redaktion/literatur/head.gohtml
@@ -0,0 +1 @@
+<title>{{ .site.title }} &ndash; {{ .record.Title }}</title>
--- a/views/routes/reihen/components/hero.gohtml
+++ b/views/routes/reihen/components/hero.gohtml
@@ -10,16 +10,16 @@
 			<div class="px-8">
 				{{ Safe $model.record.Text }}
 				<div class="pt-3">
-					<a href="/edition/einfuehrung">Einführung</i></a>
+					<a href="/redaktion/einfuehrung">Einführung</i></a>
 					<i class="ri-seedling-line px-1.5"></i>
-					<a href="/edition/dokumentation">Dokumentation </a>
+					<a href="/redaktion/dokumentation">Dokumentation </a>
 				</div>

 				<div class="mt-4 py-2 px-3 rounded bg-orange-100 border border-orange-200
 				text-orange-950 font-sans font-bold">
 					Bitte beachten Sie, dass es sich hier noch um eine öffentliche Testversion
 					handelt. Über Rückmeldungen und Anregungen freuen wir uns [&rarr; <a
-						href="/edition//kontakt">Kontakt</a>]
+						href="/redaktion//kontakt">Kontakt</a>]
 				</div>
 			</div>
 		</div>
--- a/views/routes/suche/beitraege/body.gohtml
+++ b/views/routes/suche/beitraege/body.gohtml
@@ -185,7 +185,6 @@
 			{{- else -}}
 				<div class="mt-4">Kein Beitrag gefunden.</div>
 			{{- end -}}
-		</div>

 	<script type="module">
 	let elements = document.querySelectorAll('.search-text');
@@ -197,5 +196,6 @@
 			});
 		}, 200);
 	</script>
+		</div>
 	</div>
 {{- end -}}
--- a/views/routes/suche/beitraege/pills.gohtml
+++ b/views/routes/suche/beitraege/pills.gohtml
@@ -5,7 +5,9 @@
 -}}

 {{- if $isFiltered -}}
-	<div class="flex flex-row gap-x-3" id="searchpills">
+	<div
+		class="flex flex-row gap-x-3 bg-orange-100 items-center py-1 justify-between"
+		id="searchpills">
 		{{- if $model.filters.Agent -}}
 			<filter-pill
 				data-queryparam="agentfilter"
@@ -28,6 +30,7 @@
 			</filter-pill>
 		{{- end -}}
 		{{- if $model.filters.OnlyScans -}}
+			<div class="grow"></div>
 			<filter-pill
 				data-queryparam="onlyscans"
 				data-value="{{ $model.filters.OnlyScans }}"
--- a/views/transform/main.js
+++ b/views/transform/main.js
@@ -18,6 +18,7 @@ const INT_LINK_ELEMENT = "int-link";
 const POPUP_IMAGE_ELEMENT = "popup-image";
 const TABLIST_ELEMENT = "tab-list";
 const FILTER_PILL_ELEMENT = "filter-pill";
+const IMAGE_REEL_ELEMENT = "image-reel";

 class XSLTParseProcess {
 	#processors;
@@ -180,10 +181,8 @@ class FilterPill extends HTMLElement {
 	render() {
 		this.innerHTML = `
 		<a href="${this.getURL()}" class="!no-underline block text-base" hx-target="#searchresults" hx-select="#searchresults" hx-swap="outerHTML show:window:top">
-			<div class="flex flex-row filter-pill rounded-lg bg-orange-100 hover:saturate-50 px-2.5 mt-2">
-			<div href="${this.getURL()}" class="filter-pill-close no-underline font-bold mr-1 text-orange-900 hover:text-orange-800">
-				<i class="ri-close-circle-line"></i>
-			</div>
+			<div class="flex flex-row filter-pill rounded-lg bg-orange-100 hover:saturate-50 px-2.5">
+				${this.renderIcon()}
 				<div class="flex flex-row filter-pill-label-value !items-baseline text-slate-700">
 					<div class="filter-pill-label font-bold mr-1.5 align-baseline">${this.text}</div>
 					${this.renderValue()}
@@ -193,6 +192,23 @@ class FilterPill extends HTMLElement {
 		`;
 	}

+	renderIcon() {
+		const isBool = this.value === "true" || this.value === "false";
+		if (!isBool) {
+			return `<div
+				href="${this.getURL()}"
+				class="filter-pill-close no-underline font-bold mr-1 text-orange-900 hover:text-orange-800">
+				<i class="ri-arrow-left-s-line"></i>
+			</div>
+			`;
+		}
+		return `
+			<div href="${this.getURL()}" class="filter-pill-close no-underline font-bold mr-1 text-orange-900 hover:text-orange-800">
+				<i class="ri-close-circle-line"></i>
+			</div>
+		`;
+	}
+
 	renderValue() {
 		const isBool = this.value === "true" || this.value === "false";
 		if (isBool) return ``;
@@ -713,10 +729,14 @@ class PopupImage extends HTMLElement {
 		this._preview = null;
 		this._description = null;
 		this._imageURL = "";
+		this._hideDLButton = false;
 	}

 	connectedCallback() {
+		this.classList.add("cursor-pointer");
+		this.classList.add("select-none");
 		this._imageURL = this.getAttribute("data-image-url") || "";
+		this._hideDLButton = this.getAttribute("data-hide-dl-button") || false;
 		this._preview = this.querySelector("img");
 		this._description = this.querySelector(".image-description");

@@ -735,7 +755,6 @@ class PopupImage extends HTMLElement {
 	}

 	showOverlay() {
-		const descriptionHtml = this._description ? this._description.innerHTML : "";
 		this.overlay = document.createElement("div");
 		this.overlay.classList.add(
 			"fixed",
@@ -749,26 +768,21 @@ class PopupImage extends HTMLElement {
 		);

 		this.overlay.innerHTML = `
-      <div class="relative w-max max-w-dvw max-h-dvh shadow-lg flex flex-col items-center gap-4">
-				<div class="absolute -right-16 top-0 text-white text-4xl flex flex-col">
+      <div class="relative w-max max-w-dvw max-h-dvh shadow-lg flex flex-col items-center justify-center gap-4">
+				<div>
+				<div class="absolute -right-16 text-white text-4xl flex flex-col">
 					<button class="hover:text-gray-300 cursor-pointer focus:outline-none" aria-label="Close popup">
 						<i class="ri-close-fill text-4xl"></i>
 					</button>
-					<tool-tip position="right">
-					<a href="${this._imageURL}" target="_blank" class="text-white no-underline hover:text-gray-300"><i class="ri-file-download-line"></i></a>
-					<div class="data-tip">Bild herunterladen</div>
-					</tool-tip>
+					${this.downloadButton()}
 				</div>
-
        <img
          src="${this._imageURL}"
          alt="Popup Image"
-          class="full max-h-[90vh] max-w-[80vw] object-contain"
+          class="full max-h-[80vh] max-w-[80vw] object-contain block relative ${this.descriptionImgClass()}"
        />
-
-        <div class="text-center text-gray-700 description-content">
-          ${descriptionHtml}
-        </div>
+				${this.description()}
+					</div>
      </div>
    `;

@@ -788,6 +802,40 @@ class PopupImage extends HTMLElement {
 		document.body.appendChild(this.overlay);
 	}

+	descriptionImgClass() {
+		if (!this.description) {
+			return "0";
+		}
+		return "";
+	}
+
+	description() {
+		if (!this._description) {
+			return "";
+		}
+
+		return `
+        <div class="font-serif text-left description-content mt-3 text-slate-900 ">
+					<div class="max-w-[80ch] hyphens-auto px-6 py-2 bg-stone-50 shadow-lg">
+          ${this._description.innerHTML}
+						</div>
+        </div>
+			`;
+	}
+
+	downloadButton() {
+		if (this._hideDLButton) {
+			return "";
+		}
+
+		return `
+					<tool-tip position="right">
+					<a href="${this._imageURL}" target="_blank" class="text-white no-underline hover:text-gray-300"><i class="ri-file-download-line"></i></a>
+					<div class="data-tip">Bild herunterladen</div>
+					</tool-tip>
+		`;
+	}
+
 	hideOverlay() {
 		this.overlay.parentNode.removeChild(this.overlay);
 		this.overlay = null;
@@ -1167,6 +1215,43 @@ class IntLink extends HTMLElement {
 	}
 }

+class ImageReel extends HTMLElement {
+	#minWidth = 176;
+
+	constructor() {
+		super();
+		this._images = [];
+	}
+
+	connectedCallback() {
+		this._images = Array.from(this.querySelectorAll(".primages"));
+		this.calculateShownImages();
+		const rObs = new ResizeObserver((__, _) => {
+			this.calculateShownImages();
+		});
+
+		this._resizeObserver = rObs;
+		rObs.observe(this);
+	}
+
+	disconnectedCallback() {
+		this._resizeObserver.unobserve(this);
+	}
+
+	calculateShownImages() {
+		const c = this.getBoundingClientRect();
+		console.log(c);
+		const fits = Math.floor(c.width / (this.#minWidth + 10));
+		for (let i = 0; i < this._images.length; i++) {
+			if (i < fits - 1) {
+				this._images[i].classList.remove("hidden");
+			} else {
+				this._images[i].classList.add("hidden");
+			}
+		}
+	}
+}
+
 customElements.define(INT_LINK_ELEMENT, IntLink);
 customElements.define(ABBREV_TOOLTIPS_ELEMENT, AbbreviationTooltips);
 customElements.define(FILTER_LIST_ELEMENT, FilterList);
@@ -1175,5 +1260,6 @@ customElements.define(TOOLTIP_ELEMENT, ToolTip);
 customElements.define(POPUP_IMAGE_ELEMENT, PopupImage);
 customElements.define(TABLIST_ELEMENT, Tablist);
 customElements.define(FILTER_PILL_ELEMENT, FilterPill);
+customElements.define(IMAGE_REEL_ELEMENT, ImageReel);

 export { XSLTParseProcess, FilterList, ScrollButton, AbbreviationTooltips };
--- a/views/transform/site.css
+++ b/views/transform/site.css
@@ -242,6 +242,11 @@
 		@apply -indent-3.5 ml-3.5;
 	}

+	#indexpage {
+		background-image: url("/assets/bg.jpg");
+		@apply h-full w-full;
+	}
+
 	#searchnav > a:nth-of-type(1) {
 		@apply ml-6;
 	}
				`@@ -0,0 +1 @@`
				`<title>{{ .site.title }} – {{ .record.Title }}</title>`