Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/*
<div class='timeline-entry--box'>
<div class='timeline-entry--header'>
<div class='timeline-entry--time'>Almost 50,000 Years Ago</div>
<div class='timeline-entry--title'>The Event In Question</div>
</div>
<div class='timeline-entry--quotebox'>
<div class='timeline-entry--quote'>Something Terrible Happened Today (and I'm making it your problem)</div>
<div class='timeline-entry--author'>The Last Remaining Gyaru Auril</div>
<div class='timeline-entry--source'>SoleAdmirers</div>
</div>
<div class='timeline-entry--body'>
<div class='timeline-entry--event'>(insert 50 pages of tragic OC species backstory here)</div>
</div>
</div>
*/
.timeline-container {
counter-reset: timeline-number;
display: flex;
flex-direction: column;
}
.timeline-entry--box {
counter-increment: timeline-number;
width: 45%;
display: flex;
flex-direction: column;
padding: 1em;
margin: 1em;
/* todo: lightmode */
background-color: rgba(55, 55, 55, 0.1);
--timeline-entry-title-order: 1;
--timeline-entry-time-order: 2;
}
.timeline-entry--box:nth-of-type(even) {
align-self: end;
--timeline-entry-title-order: 2;
--timeline-entry-time-order: 1;
}
.timeline-entry--header {
width: 100%;
display: flex;
justify-content: space-between;
}
.timeline-entry--time {
order: var(--timeline-entry-time-order);
}
.timeline-entry--title {
order: var(--timeline-entry-title-order);
}
.timeline-entry--quotebox {
width: 100%;
}
.timeline-entry--quote {
}
.timeline-entry--author {
}
.timeline-entry--source {
}
.timeline-story--body {
width: 100%;
}
.timeline-entry--event {
}