2010
2019
2019
2018
2018
2017
2017
2016
2016
2015
2015
2014
2014
2013
2013
2012
2012
2011
2011
2010
2010
1970
1979
1979
1978
1977
1976
1975
1974
1973
1972
1971
1970
#content {
–s: 60px; /* control the size*/
–c1: #691d11;
–c2: #56160c;
–_g: #0000 83%,var(–c1) 85% 99%,#0000 101%;
background:
radial-gradient(27% 29% at right ,var(–_g)) calc(var(–s)/ 2) var(–s),
radial-gradient(27% 29% at left ,var(–_g)) calc(var(–s)/-2) var(–s),
radial-gradient(29% 27% at top ,var(–_g)) 0 calc(var(–s)/ 2),
radial-gradient(29% 27% at bottom,var(–_g)) 0 calc(var(–s)/-2)
var(–c2);
background-size: calc(2*var(–s)) calc(2*var(–s));
}
.sticky {
position: sticky;
top: 40%;
pointer-events: auto; /* Ensure it can be clicked */
}
.year {
margin-left: 20px;
font-size: 1.5rem;
color: rgb(255,255,255);
}
.box-image {
box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.4); /* Adds a shadow */
}
.placeholder-poster {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.placeholder-content {
color: white;
padding: 20px;
}
.timeline-tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 10px 15px;
border-radius: 5px;
font-size: 14px;
max-width: 250px;
z-index: 1000;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.timeline-tooltip.show {
opacity: 1;
}
@media (min-width: 1024px) { /* Adjust breakpoint as needed */
.top {
margin-top: -400px;
}
}
document.addEventListener(”DOMContentLoaded”, function() {
const tooltip = document.createElement(”div”);
tooltip.className = ”timeline-tooltip”;
document.body.appendChild(tooltip);
const timelineEntries = document.querySelectorAll(”.timeline-entry”);
timelineEntries.forEach(entry => {
const shortText = entry.getAttribute(”data-short-text”);
if (shortText && shortText.trim() !== ””) {
entry.addEventListener(”mouseenter”, function(e) {
tooltip.textContent = shortText;
tooltip.classList.add(”show”);
});
entry.addEventListener(”mousemove”, function(e) {
tooltip.style.left = e.pageX + 10 + ”px”;
tooltip.style.top = e.pageY + 10 + ”px”;
});
entry.addEventListener(”mouseleave”, function() {
tooltip.classList.remove(”show”);
});
}
});
});
