Osterpassion Slevogt

{source}<style>
#calendar {
max-width: 1000px;
}

#calendar .calendar-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
max-width: 120rem;
}

html {
--bgcolor: #e6f2f7;
--linkcolor: #6f0303;
--bordercolor: #6f0303;
}

#calendar .calendar-container {
padding: 0;
}

#calendar .day-container {
position: relative;
height: 160px;
background-color: inherit;
transition: background-color 0.5s linear;
background-size: cover;
background-position: center;
display: table;
overflow: hidden;
width: 100%;
}

@media (min-width: 1000px) {
#calendar .day-container {
height: 180px;
}
}

#calendar .day-container:hover, #calendar .day-container:focus {
background-color: rgba(255, 255, 255, 0.8);
transition: background-color 0.5s linear;
}

#calendar .day-container > h3 {
opacity: 0;
transition: opacity 0.5s linear;
display: table-cell;
vertical-align: middle;
text-shadow: 0 0 2px white, 0 0 4px white;
text-align: center;
}

#calendar .day-container:hover > *, #calendar .day-container:focus > * {
opacity: 1;
transition: opacity 0.5s linear;
}

#calendar .calendar-container a {
text-decoration: none;
}

#calendar .calendar-container a, #calendar .calendar-container span {
padding: 20px;
}

<?php
$order = array();
for ($i = 1; $i <= 24; $i++) {
array_push($order, $i);
}

shuffle($order);

for ($i = 0; $i < 24; $i++) {
echo "#calendar li:nth-of-type(" . ($i + 1) . ") { order: " . $order[$i] . "; }\n";
}
?>
</style>

<div id="calendar">

<?php

$calendar = '{
"passionCalendar" : [
{
"date" : "2021-03-28",
"headline" : "Slevogt Einführung",
"picture" : "images/stories/kirchspiel/bilder/2021/slevogt/Deckblatt.jpg",
"link" : "index.php?option=com_content&view=article&id=561:slevogt-einfuehrung&catid=115:osterpassion"
}, {
"date" : "2021-03-29",
"headline" : "Die Versuchung",
"picture" : "images/stories/kirchspiel/bilder/2021/slevogt/1_Die_Versuchung.jpg",
"link" : "index.php?option=com_content&view=article&id=562:die-versuchung&catid=115:osterpassion"
}, {
"date" : "2021-03-29",
"headline" : "Gethsemane",
"picture" : "images/stories/kirchspiel/bilder/2021/slevogt/2_Gethsemane.jpg",
"link" : "index.php?option=com_content&view=article&id=563:gethsemane&catid=115:osterpassion"
}, {
"date" : "2021-03-30",
"headline" : "In der Todesangst",
"picture" : "images/stories/kirchspiel/bilder/2021/slevogt/3_In_der_Todesangst.jpg",
"link" : "index.php?option=com_content&view=article&id=564:in-der-todesangst&catid=115:osterpassion"
}, {
"date" : "2021-03-30",
"headline" : "Die Verspottung",
"picture" : "images/stories/kirchspiel/bilder/2021/slevogt/4_Die_Verspottung.jpg",
"link" : "index.php?option=com_content&view=article&id=565:die-verspottung&catid=115:osterpassion"
}, {
"date" : "2021-03-31",
"headline" : "Ecce homo",
"picture" : "images/stories/kirchspiel/bilder/2021/slevogt/5_Ecce_homo.jpg",
"link" : "index.php?option=com_content&view=article&id=566:ecce-homo&catid=115:osterpassion"
}, {
"date" : "2021-03-31",
"headline" : "Die Kreuztragung",
"picture" : "images/stories/kirchspiel/bilder/2021/slevogt/6_Die_Kreuztragung.jpg",
"link" : "index.php?option=com_content&view=article&id=567:die-kreuztragung&catid=115:osterpassion"
}, {
"date" : "2021-04-01",
"headline" : "Die Annagelung",
"picture" : "images/stories/kirchspiel/bilder/2021/slevogt/7_Die_Annagelung.jpg",
"link" : "index.php?option=com_content&view=article&id=568:die-annagelung&catid=115:osterpassion"
}, {
"date" : "2021-04-01",
"headline" : "Das Sterben am Kreuz",
"picture" : "images/stories/kirchspiel/bilder/2021/slevogt/8_Das_Sterben_am_Kreuz.jpg",
"link" : "index.php?option=com_content&view=article&id=569:das-sterben-am-kreuz&catid=115:osterpassion"
}, {
"date" : "2021-04-02",
"headline" : "Schwankende Kreuze",
"picture" : "images/stories/kirchspiel/bilder/2021/slevogt/9_Schwankende_Kreuze.jpg",
"link" : "index.php?option=com_content&view=article&id=570:die-schwankenden-kreuze&catid=115:osterpassion"
}, {
"date" : "2021-04-02",
"headline" : "Die Kreuzabnahme",
"picture" : "images/stories/kirchspiel/bilder/2021/slevogt/10_Die_Kreuzabnahme.jpg",
"link" : "index.php?option=com_content&view=article&id=571:die-kreuzabnahme&catid=115:osterpassion"
}, {
"date" : "2021-04-03",
"headline" : "Die Grablegung",
"picture" : "images/stories/kirchspiel/bilder/2021/slevogt/11_Die_Grablegung.jpg",
"link" : "index.php?option=com_content&view=article&id=572:die-grablegung&catid=115:osterpassion"
}, {
"date" : "2021-04-03",
"headline" : "Die Auferstehung",
"picture" : "images/stories/kirchspiel/bilder/2021/slevogt/12_Die_Auferstehung.jpg",
"link" : "index.php?option=com_content&view=article&id=573:die-auferstehung&catid=115:osterpassion"
}, {
"date" : "2021-04-04",
"headline" : "Am lerren Grab",
"picture" : "images/stories/kirchspiel/bilder/2021/slevogt/13_Am_leeren_Grab.jpg",
"link" : "index.php?option=com_content&view=article&id=574:am-leeren-grab&catid=115:osterpassion"
}
]
}';

function CreateCalendar($calendar) {
$days = json_decode($calendar)->passionCalendar;
echo "<div class=\"calendar-container\">";
foreach ($days as $day) {
CreateInfoDiv($day);
}
echo "</div>";
}

function CreateInfoDiv($day) {
$published = (((new DateTime())->setTime(0, 0, 0)) >= DateTime::createFromFormat('Y-m-d', $day->date)->setTime(0, 0, 0));
echo ($published) ? "<a href=\"$day->link\">" : "<span>" ;
echo "<div class=\"day-container\" style=\"background-image: url(/$day->picture); ";
echo ($published) ? "" : "filter: blur(10px); -webkit-filter: blur(10px);";
echo "\">";
echo "<h3>$day->headline</h3>";
echo "</div>";
echo ($published) ? "</a>" : "</span>" ;
return;
}

CreateCalendar($calendar);

?>

</div>{/source}