screwing around with the background

views/transform/main.js

@@ -1330,11 +1330,40 @@ window.generateCitation = generateCitation;
 window.copyPagePermalink = copyPagePermalink;
 window.generatePageCitation = generatePageCitation;
 
+// Apply page-specific backdrop styling based on URL
+function applyPageBackdrop() {
+	const path = window.location.pathname;
+	const body = document.body;
+
+	// Remove any existing page-specific classes
+	body.classList.remove('page-akteure', 'page-ausgabe', 'page-search', 'page-ort', 'page-kategorie', 'page-piece', 'page-edition');
+
+	// Determine page type from URL path and apply appropriate class
+	if (path.includes('/akteure/') || path.includes('/autoren')) {
+		body.classList.add('page-akteure');
+	} else if (path.match(/\/\d{4}\/\d+/)) { // Issue URLs like /1771/42 or /1771/42/166
+		body.classList.add('page-ausgabe');
+	} else if (path.includes('/search') || path.includes('/suche')) {
+		body.classList.add('page-search');
+	} else if (path.includes('/ort/')) {
+		body.classList.add('page-ort');
+	} else if (path.includes('/kategorie/')) {
+		body.classList.add('page-kategorie');
+	} else if (path.includes('/beitrag/')) {
+		body.classList.add('page-piece');
+	} else if (path.includes('/edition')) {
+		body.classList.add('page-edition');
+	}
+}
+
 // INFO: This is intended to be called once on website load
 function setup() {
 	setup_xslt();
 	setup_templates();
 
+	// Apply page-specific backdrop styling
+	applyPageBackdrop();
+
 	// Initialize newspaper layout if present
 	if (document.querySelector(".newspaper-page-container")) {
 		initializeNewspaperLayout();
@@ -1354,6 +1383,9 @@ function setup() {
 
 	// HTMX event handling for newspaper layout, scrollspy, and scroll-to-top button
 	document.body.addEventListener("htmx:afterSwap", function (event) {
+		// Apply page-specific backdrop styling after navigation
+		applyPageBackdrop();
+
 		// Prevent auto-scrolling during HTMX navigation
 		window.htmxNavigating = true;
 

views/transform/site.css

@@ -31,10 +31,39 @@ body::before {
 	background-position: center;
 
 	/* Apply transformations here */
-	transform: rotate(15deg) skew(10deg) scale(3);
+	transform: rotate(15deg) skew(25deg) scale(4);
 	opacity: 0.4;
 }
 
+/* Page-specific backdrop variations */
+body.page-akteure::before {
+	transform: rotate(-35deg) skew(-40deg) scale(4.2);
+}
+
+body.page-ausgabe::before {
+	transform: rotate(40deg) skew(15deg) scale(4.5);
+}
+
+body.page-search::before {
+	transform: rotate(0deg) skew(45deg) scale(3.8);
+}
+
+body.page-ort::before {
+	transform: rotate(60deg) skew(-30deg) scale(4.8);
+}
+
+body.page-kategorie::before {
+	transform: rotate(-25deg) skew(50deg) scale(4.1);
+}
+
+body.page-piece::before {
+	transform: rotate(45deg) skew(-25deg) scale(4.3);
+}
+
+body.page-edition::before {
+	transform: rotate(-50deg) skew(35deg) scale(3.9);
+}
+
 /*
   The default border color has changed to `currentColor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still