409 lines
15 KiB
HTML
409 lines
15 KiB
HTML
<!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>
|