diff --git a/assets/css/style.css b/assets/css/style.css index 67f42c2..a25296e 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -814,8 +814,109 @@ body.calendar-tv-dark { --secondary-color: #1e293b; } +/* Photo collage behind TV calendar (fixed full viewport) */ +.calendar-tv-collage-bg { + position: fixed; + inset: 0; + z-index: 0; + pointer-events: none; + overflow: hidden; +} + +.calendar-tv-collage-grid { + display: grid; + width: 100%; + height: 100%; + gap: clamp(6px, 1vw, 14px); + padding: clamp(6px, 1vw, 14px); + box-sizing: border-box; +} + +.calendar-tv-collage-grid--mosaic { + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(4, 1fr); +} + +.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(1) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} + +.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(2) { + grid-column: 3 / 4; + grid-row: 1 / 2; +} + +.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(3) { + grid-column: 4 / 5; + grid-row: 1 / 2; +} + +.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(4) { + grid-column: 5 / 6; + grid-row: 1 / 2; +} + +.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(5) { + grid-column: 3 / 4; + grid-row: 2 / 3; +} + +.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(6) { + grid-column: 4 / 5; + grid-row: 2 / 3; +} + +.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(7) { + grid-column: 5 / 6; + grid-row: 2 / 3; +} + +.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(8) { + grid-column: 1 / 3; + grid-row: 3 / 5; +} + +.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(9) { + grid-column: 3 / 5; + grid-row: 3 / 5; +} + +.calendar-tv-collage-grid--mosaic .calendar-tv-collage-tile:nth-child(10) { + grid-column: 5 / 6; + grid-row: 3 / 5; +} + +.calendar-tv-collage-grid--even .calendar-tv-collage-tile { + min-height: 0; + min-width: 0; +} + +.calendar-tv-collage-tile { + min-height: 0; + min-width: 0; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + border-radius: 6px; + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); +} + +.calendar-tv-collage-scrim { + position: absolute; + inset: 0; + background: linear-gradient( + 160deg, + rgba(15, 23, 42, 0.78) 0%, + rgba(15, 23, 42, 0.62) 45%, + rgba(15, 23, 42, 0.75) 100% + ); +} + body.calendar-tv-dark main { - background-color: #0f172a; + position: relative; + z-index: 1; + background-color: transparent; } body.calendar-tv-dark .calendar-tv-view h2, diff --git a/assets/images/calendar-tv-collage/collage-01.png b/assets/images/calendar-tv-collage/collage-01.png new file mode 100644 index 0000000..5658509 Binary files /dev/null and b/assets/images/calendar-tv-collage/collage-01.png differ diff --git a/assets/images/calendar-tv-collage/collage-02.png b/assets/images/calendar-tv-collage/collage-02.png new file mode 100644 index 0000000..c4f100d Binary files /dev/null and b/assets/images/calendar-tv-collage/collage-02.png differ diff --git a/assets/images/calendar-tv-collage/collage-03.png b/assets/images/calendar-tv-collage/collage-03.png new file mode 100644 index 0000000..45601f4 Binary files /dev/null and b/assets/images/calendar-tv-collage/collage-03.png differ diff --git a/assets/images/calendar-tv-collage/collage-04.png b/assets/images/calendar-tv-collage/collage-04.png new file mode 100644 index 0000000..0d064ff Binary files /dev/null and b/assets/images/calendar-tv-collage/collage-04.png differ diff --git a/assets/images/calendar-tv-collage/collage-05.png b/assets/images/calendar-tv-collage/collage-05.png new file mode 100644 index 0000000..9b59442 Binary files /dev/null and b/assets/images/calendar-tv-collage/collage-05.png differ diff --git a/assets/images/calendar-tv-collage/collage-06.png b/assets/images/calendar-tv-collage/collage-06.png new file mode 100644 index 0000000..5063956 Binary files /dev/null and b/assets/images/calendar-tv-collage/collage-06.png differ diff --git a/assets/images/calendar-tv-collage/collage-07.png b/assets/images/calendar-tv-collage/collage-07.png new file mode 100644 index 0000000..98026a4 Binary files /dev/null and b/assets/images/calendar-tv-collage/collage-07.png differ diff --git a/assets/images/calendar-tv-collage/collage-08.png b/assets/images/calendar-tv-collage/collage-08.png new file mode 100644 index 0000000..bcf605b Binary files /dev/null and b/assets/images/calendar-tv-collage/collage-08.png differ diff --git a/assets/images/calendar-tv-collage/collage-09.png b/assets/images/calendar-tv-collage/collage-09.png new file mode 100644 index 0000000..c043d5d Binary files /dev/null and b/assets/images/calendar-tv-collage/collage-09.png differ diff --git a/assets/images/calendar-tv-collage/collage-10.png b/assets/images/calendar-tv-collage/collage-10.png new file mode 100644 index 0000000..2473851 Binary files /dev/null and b/assets/images/calendar-tv-collage/collage-10.png differ diff --git a/includes/calendar_tv_collage_bg.php b/includes/calendar_tv_collage_bg.php new file mode 100644 index 0000000..4fca48b --- /dev/null +++ b/includes/calendar_tv_collage_bg.php @@ -0,0 +1,35 @@ + +
diff --git a/includes/header.php b/includes/header.php index 1ad3e7d..4567334 100644 --- a/includes/header.php +++ b/includes/header.php @@ -73,6 +73,7 @@ $bodyStyle = implode('; ', $bodyStyleParts) . ';'; ?> +