<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Timeline</title>
<style>
body {
margin: 0;
font-family: "Schibsted Grotesk";
font-weight: 400;
}
* {
box-sizing: border-box;
}
#page {
width: 9.25in;
height: 12.25in;
/*background-color: lightblue;*/
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
/*background-image: url(../assets/back-cover-splat-only-grayscale.png);*/
background-image: url(../assets/black-star-clean-lightened-grayscale.jpeg);
background-size: 90%;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
.vert-line {
width: 0.25em;
background-color: black;
}
.main-height {
height: 75%;
}
.timeline {
display: flex;
height: 12in;
justify-content: center;
align-items: center;
position: relative;
}
.markers {
position: relative;
left: -0.65em;
}
.marker {
width: 1em;
height: 1em;
border-radius: 100%;
border: 0.25em solid black;
background-color: white;
position: absolute;
left: 0;
}
.date-span {
position: absolute;
margin-left: 0.75em;
}
.info {
position: relative;
left: -2.5em;
}
.title {
position: relative;
}
.bracket-container {
position: absolute;
top: 1.5in;
}
.title-container {
position: absolute;
top: 0;
left: -20em;
width: 16.5em;
text-align: right;
}
.date {
position: absolute;
white-space: nowrap;
padding-left: 1.3em;
margin-top: -0.2em;
}
.song {
position: absolute;
}
.box {
white-space: pre;
position: absolute;
font-family: monospace;
font-size: 0.13in;
top: -0.9em;
left: 0;
}
:root {
--calling-start: -1em;
--calling-end: 1.053658536585366in;
--haunted-start: 1.3829268292682926in;
--haunted-end: 2.0195121951219512in;
--friend-start: 2.282926829268293in;
--friend-end: 2.5253048780487806in;
--stars-start: 2.7887195121951223in;
--stars-end: 4.32530487804878in;
--castles-start: 5.049695121951219in;
--castles-end: 5.575609756097561in;
--alive-start: 5.817073170731708in;
--alive-end: 6.278048780487804in;
--without-start: 6.760975609756097in;
--without-end: 8.517073170731706in;
--shine-start: 8.78048780487805in;
--shine-end: 9in;
}
.calling-out-a-name-start {
top: var(--calling-start);
}
.calling-out-a-name-end {
top: var(--calling-end);
}
.haunted-house-start {
top: var(--haunted-start);
}
.haunted-house-end {
top: var(--haunted-end);
}
.fair-weather-friend-start {
top: var(--friend-start);
}
.fair-weather-friend-end {
top: var(--friend-end);
}
.waiting-for-the-stars-to-fall-start {
top: var(--stars-start);
}
.waiting-for-the-stars-to-fall-end {
top: var(--stars-end);
}
.castles-in-the-sky-start {
top: var(--castles-start);
}
.castles-in-the-sky-end {
top: var(--castles-end);
}
.still-alive-start {
top: var(--alive-start);
}
.still-alive-end {
top: var(--alive-end);
}
.without-you-start {
top: var(--without-start);
}
.without-you-end {
top: var(--without-end);
}
.shine-start {
top: var(--shine-start);
}
.shine-end {
top: var(--shine-end);
}
.bracket {
position: absolute;
margin-top: 0.48em;
}
.bracket .top, .bracket .vert, .bracket .middle, .bracket .bottom {
position: absolute;
border: 0 solid black;
}
.bracket .top, .bracket .bottom {
width: 0.75em;
}
.bracket .top {
top: 0;
border-bottom-width: .15em;
}
.bracket .vert {
border-right-width: .15em;
height: 100%;
}
.bracket .middle {
border-bottom-width: .15em;
width: 1.5em;
left: -1.5em;
top: 50%;
}
.bracket .bottom {
border-bottom-width: .15em;
bottom: 0;
}
</style>
</head>
<body>
<div id="page">
<div class="timeline">
<div class="vert-line main-height"></div>
<div class="main-height">
<div class="markers">
<div class="song calling-out-a-name-start">
<div class="marker"></div>
<div class="date">July 20, 2023</div>
</div>
<div class="song calling-out-a-name-end">
<div class="marker"></div>
<div class="date">September 6, 2023</div>
</div>
<div class="song haunted-house-start">
<div class="marker"></div>
<div class="date">September 21, 2023</div>
</div>
<div class="song haunted-house-end">
<div class="marker"></div>
<div class="date">October 20, 2023</div>
</div>
<div class="song fair-weather-friend-start">
<div class="marker"></div>
<div class="date">November 1, 2023</div>
</div>
<div class="song fair-weather-friend-end">
<div class="marker"></div>
<div class="date">November 12, 2023</div>
</div>
<div class="song waiting-for-the-stars-to-fall-start">
<div class="marker"></div>
<div class="date">November 24, 2023</div>
</div>
<div class="song waiting-for-the-stars-to-fall-end">
<div class="marker"></div>
<div class="date">February 2, 2024</div>
</div>
<div class="song castles-in-the-sky-start">
<div class="marker"></div>
<div class="date">March 6, 2024</div>
</div>
<div class="song castles-in-the-sky-end">
<div class="marker"></div>
<div class="date">March 30, 2024</div>
</div>
<div class="song still-alive-start">
<div class="marker"></div>
<div class="date">April 10, 2024</div>
</div>
<div class="song still-alive-end">
<div class="marker"></div>
<div class="date">May 1, 2024</div>
</div>
<div class="song without-you-start">
<div class="marker"></div>
<div class="date">May 23, 2024</div>
</div>
<div class="song without-you-end">
<div class="marker"></div>
<div class="date">August 11, 2024</div>
</div>
<div class="song shine-start">
<div class="marker"></div>
<div class="date">August 23, 2024</div>
</div>
<div class="song shine-end">
<div class="marker"></div>
<div class="date">September 2, 2024</div>
</div>
</div>
<div class="bracket-container">
<div class="title-container">
<div class="title" style="top: 0.42in">Calling Out a Name</div>
<div class="title" style="top: 1.47in">The Haunted House</div>
<div class="title" style="top: 1.96in">Fair-weather Friend</div>
<div class="title" style="top: 2.905in;">Waiting for the Stars to Fall</div>
<div class="title" style="top: 4.46in;">Castles in the Sky</div>
<div class="title" style="top: 4.975in;">Still Alive</div>
<div class="title" style="top: 6.36in;">Without You</div>
<div class="title" style="top: 7.405in;">Shine</div>
</div>
<div class="date-span calling-out-a-name-start">
<div class="info">
<div class="bracket" style="height: calc(var(--calling-end) - var(--calling-start));">
<div class="top"></div>
<div class="vert"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
</div>
<div class="date-span haunted-house-start">
<div class="info">
<div class="bracket" style="height: calc(var(--haunted-end) - var(--haunted-start));">
<div class="top"></div>
<div class="vert"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
</div>
<div class="date-span fair-weather-friend-start">
<div class="info">
<div class="bracket" style="height: calc(var(--friend-end) - var(--friend-start));">
<div class="top"></div>
<div class="vert"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
</div>
<div class="date-span waiting-for-the-stars-to-fall-start">
<div class="info">
<div class="bracket" style="height: calc(var(--stars-end) - var(--stars-start));">
<div class="top"></div>
<div class="vert"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
</div>
<div class="date-span castles-in-the-sky-start">
<div class="info">
<div class="bracket" style="height: calc(var(--castles-end) - var(--castles-start));">
<div class="top"></div>
<div class="vert"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
</div>
<div class="date-span still-alive-start">
<div class="info">
<div class="bracket" style="height: calc(var(--alive-end) - var(--alive-start));">
<div class="top"></div>
<div class="vert"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
</div>
<div class="date-span without-you-start">
<div class="info">
<div class="bracket" style="height: calc(var(--without-end) - var(--without-start));">
<div class="top"></div>
<div class="vert"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
</div>
<div class="date-span shine-start">
<div class="info">
<div class="bracket" style="height: calc(var(--shine-end) - var(--shine-start));">
<div class="top"></div>
<div class="vert"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>