mirror of
https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git
synced 2025-10-29 17:15:31 +00:00
365 lines
7.4 KiB
CSS
365 lines
7.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--font-script: Rancho, ui-serif;
|
|
--font-sans: "Source Sans 3", "Merriweather Sans", ui-sans-serif;
|
|
--font-serif: "Merriweather", ui-serif;
|
|
|
|
/* Custom breakpoint for 4K+ screens */
|
|
--breakpoint-3xl: 120.0625rem; /* 1921px */
|
|
|
|
/* Custom Black Colors */
|
|
--color-abyss: #0b1215;
|
|
--color-shadow: #0f171f;
|
|
--color-eclipse: #0b0b0b;
|
|
--color-storm: #020c1a;
|
|
--color-deep: #011122;
|
|
--color-obsidian: #161616;
|
|
}
|
|
/* Alternative approach using pseudo-element for better browser support */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
/* Extend beyond viewport to ensure full coverage after transformations */
|
|
top: -50%;
|
|
left: -50%;
|
|
right: -50%;
|
|
bottom: -50%;
|
|
z-index: -1;
|
|
|
|
/* Your WebP pattern */
|
|
background-image: url("skyscraper.webp");
|
|
background-size: 100px 100px;
|
|
background-repeat: repeat;
|
|
background-position: center;
|
|
|
|
/* Apply transformations here */
|
|
transform: rotate(15deg) skew(25deg) scale(4);
|
|
opacity: 0.4;
|
|
animation: backdrop-drift 60s linear infinite;
|
|
transition: transform 1.5s ease-in-out;
|
|
}
|
|
|
|
/* Backdrop animation */
|
|
@keyframes backdrop-drift {
|
|
0% {
|
|
transform: rotate(15deg) skew(25deg) scale(4);
|
|
}
|
|
25% {
|
|
transform: rotate(20deg) skew(30deg) scale(4.1);
|
|
}
|
|
50% {
|
|
transform: rotate(10deg) skew(20deg) scale(3.9);
|
|
}
|
|
75% {
|
|
transform: rotate(18deg) skew(28deg) scale(4.05);
|
|
}
|
|
100% {
|
|
transform: rotate(15deg) skew(25deg) scale(4);
|
|
}
|
|
}
|
|
|
|
/* Page-specific backdrop variations with animations */
|
|
body.page-akteure::before {
|
|
animation: backdrop-drift-akteure 45s ease-in-out infinite;
|
|
}
|
|
|
|
body.page-ausgabe::before {
|
|
animation: backdrop-drift-ausgabe 55s ease-in-out infinite;
|
|
}
|
|
|
|
body.page-search::before {
|
|
animation: backdrop-drift-search 40s ease-in-out infinite;
|
|
}
|
|
|
|
body.page-ort::before {
|
|
animation: backdrop-drift-ort 65s ease-in-out infinite;
|
|
}
|
|
|
|
body.page-kategorie::before {
|
|
animation: backdrop-drift-kategorie 50s ease-in-out infinite;
|
|
}
|
|
|
|
body.page-piece::before {
|
|
animation: backdrop-drift-piece 58s ease-in-out infinite;
|
|
}
|
|
|
|
body.page-edition::before {
|
|
animation: backdrop-drift-edition 42s ease-in-out infinite;
|
|
}
|
|
|
|
/* Page-specific keyframes */
|
|
@keyframes backdrop-drift-akteure {
|
|
0% {
|
|
transform: rotate(-35deg) skew(-40deg) scale(4.2);
|
|
}
|
|
25% {
|
|
transform: rotate(-30deg) skew(-35deg) scale(4);
|
|
}
|
|
50% {
|
|
transform: rotate(-40deg) skew(-45deg) scale(4.4);
|
|
}
|
|
75% {
|
|
transform: rotate(-32deg) skew(-38deg) scale(4.1);
|
|
}
|
|
100% {
|
|
transform: rotate(-35deg) skew(-40deg) scale(4.2);
|
|
}
|
|
}
|
|
|
|
@keyframes backdrop-drift-ausgabe {
|
|
0% {
|
|
transform: rotate(40deg) skew(15deg) scale(4.5);
|
|
}
|
|
25% {
|
|
transform: rotate(45deg) skew(20deg) scale(4.3);
|
|
}
|
|
50% {
|
|
transform: rotate(35deg) skew(10deg) scale(4.7);
|
|
}
|
|
75% {
|
|
transform: rotate(42deg) skew(18deg) scale(4.4);
|
|
}
|
|
100% {
|
|
transform: rotate(40deg) skew(15deg) scale(4.5);
|
|
}
|
|
}
|
|
|
|
@keyframes backdrop-drift-search {
|
|
0% {
|
|
transform: rotate(0deg) skew(45deg) scale(3.8);
|
|
}
|
|
25% {
|
|
transform: rotate(5deg) skew(50deg) scale(3.6);
|
|
}
|
|
50% {
|
|
transform: rotate(-5deg) skew(40deg) scale(4);
|
|
}
|
|
75% {
|
|
transform: rotate(2deg) skew(48deg) scale(3.7);
|
|
}
|
|
100% {
|
|
transform: rotate(0deg) skew(45deg) scale(3.8);
|
|
}
|
|
}
|
|
|
|
@keyframes backdrop-drift-ort {
|
|
0% {
|
|
transform: rotate(60deg) skew(-30deg) scale(4.8);
|
|
}
|
|
25% {
|
|
transform: rotate(65deg) skew(-25deg) scale(4.6);
|
|
}
|
|
50% {
|
|
transform: rotate(55deg) skew(-35deg) scale(5);
|
|
}
|
|
75% {
|
|
transform: rotate(62deg) skew(-28deg) scale(4.7);
|
|
}
|
|
100% {
|
|
transform: rotate(60deg) skew(-30deg) scale(4.8);
|
|
}
|
|
}
|
|
|
|
@keyframes backdrop-drift-kategorie {
|
|
0% {
|
|
transform: rotate(-25deg) skew(50deg) scale(4.1);
|
|
}
|
|
25% {
|
|
transform: rotate(-20deg) skew(55deg) scale(3.9);
|
|
}
|
|
50% {
|
|
transform: rotate(-30deg) skew(45deg) scale(4.3);
|
|
}
|
|
75% {
|
|
transform: rotate(-22deg) skew(52deg) scale(4);
|
|
}
|
|
100% {
|
|
transform: rotate(-25deg) skew(50deg) scale(4.1);
|
|
}
|
|
}
|
|
|
|
@keyframes backdrop-drift-piece {
|
|
0% {
|
|
transform: rotate(45deg) skew(-25deg) scale(4.3);
|
|
}
|
|
25% {
|
|
transform: rotate(50deg) skew(-20deg) scale(4.1);
|
|
}
|
|
50% {
|
|
transform: rotate(40deg) skew(-30deg) scale(4.5);
|
|
}
|
|
75% {
|
|
transform: rotate(47deg) skew(-22deg) scale(4.2);
|
|
}
|
|
100% {
|
|
transform: rotate(45deg) skew(-25deg) scale(4.3);
|
|
}
|
|
}
|
|
|
|
@keyframes backdrop-drift-edition {
|
|
0% {
|
|
transform: rotate(-50deg) skew(35deg) scale(3.9);
|
|
}
|
|
25% {
|
|
transform: rotate(-45deg) skew(40deg) scale(3.7);
|
|
}
|
|
50% {
|
|
transform: rotate(-55deg) skew(30deg) scale(4.1);
|
|
}
|
|
75% {
|
|
transform: rotate(-48deg) skew(38deg) scale(3.8);
|
|
}
|
|
100% {
|
|
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
|
|
looks the same as it did with Tailwind CSS v3.
|
|
|
|
If we ever want to remove these styles, we need to add an explicit border
|
|
color utility to any element that depends on these defaults.
|
|
*/
|
|
@layer base {
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: var(--color-gray-200, currentColor);
|
|
}
|
|
}
|
|
|
|
@utility font-variant-small-caps {
|
|
font-variant-caps: small-caps;
|
|
}
|
|
|
|
@layer components {
|
|
html {
|
|
font-size: 17px;
|
|
}
|
|
|
|
body {
|
|
@apply bg-slate-50;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
@apply font-serif font-bold;
|
|
}
|
|
|
|
a {
|
|
@apply hyphens-none underline decoration-dotted hover:decoration-solid text-slate-700 hover:text-slate-900;
|
|
}
|
|
|
|
ul {
|
|
@apply my-2;
|
|
}
|
|
|
|
li {
|
|
@apply ml-14 list-disc;
|
|
}
|
|
|
|
a[aria-current="page"] {
|
|
@apply text-red-500!;
|
|
}
|
|
|
|
main {
|
|
@apply grow shrink-0;
|
|
}
|
|
|
|
/* =============================
|
|
NEWSPAPER LAYOUT STYLES
|
|
============================= */
|
|
|
|
/* Essential styles that cannot be represented in Tailwind */
|
|
.newspaper-page-container {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* Page header backdrop blur */
|
|
.newspaper-page-container .absolute .page-indicator {
|
|
pointer-events: auto;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
/* Responsive header scaling */
|
|
@media (max-width: 768px) {
|
|
.newspaper-page-container .absolute {
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
|
|
/* Image size constraints with Tailwind utilities */
|
|
.single-page {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.single-page .newspaper-page-image {
|
|
max-width: min(400px, 100%);
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Larger screens */
|
|
@media (min-width: 1280px) {
|
|
.single-page .newspaper-page-image {
|
|
max-width: min(600px, 100%);
|
|
}
|
|
}
|
|
|
|
/* Very wide screens */
|
|
@media (min-width: 1536px) {
|
|
.single-page .newspaper-page-image {
|
|
max-width: min(700px, 100%);
|
|
}
|
|
}
|
|
|
|
/* Mobile constraints */
|
|
@media (max-width: 640px) {
|
|
.single-page .newspaper-page-image {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Navigation button hover styles */
|
|
button#prevPageBtn:hover:not([style*="display: none"]),
|
|
button#nextPageBtn:hover,
|
|
button#beilageBtn:hover {
|
|
background-color: rgb(209 213 219) !important; /* gray-300 */
|
|
color: rgb(55 65 81) !important; /* gray-700 */
|
|
}
|
|
|
|
button#beilageBtn:hover {
|
|
background-color: rgb(254 215 170) !important; /* amber-200 */
|
|
color: rgb(146 64 14) !important; /* amber-800 */
|
|
}
|
|
|
|
/* Scrollspy hover effect - only when not active */
|
|
.scrollspy-hover:hover:not(.font-medium) {
|
|
background-color: rgb(254 242 242); /* red-50 */
|
|
}
|
|
|
|
/* =============================
|
|
INHALTSVERZEICHNIS SCROLLSPY STYLES
|
|
============================= */
|
|
|
|
/* Remove default spacing from custom element */
|
|
inhaltsverzeichnis-scrollspy {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Simple transition for entry visibility */
|
|
.inhalts-entry {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
}
|