screwing around with the background

This commit is contained in:
Simon Martens
2025-09-21 22:39:54 +02:00
parent cabc896ae8
commit 163cf5fb34
4 changed files with 486 additions and 421 deletions

View File

@@ -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;

View File

@@ -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