MediaWiki:Common.css

/*
<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-header {
  align-self: center;
}

.timeline-header hr {
  width: 75%;
  background-color: #ffffff;
  border: 1px solid #ffffff;
}

.timeline-entry--box {
  counter-increment: timeline-number;
  width: 45%;
  display: flex;
  flex-direction: column;
  padding: 1em;
  margin: 0.25em;
  /* 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) {
  --timeline-entry-title-order: 2;
  --timeline-entry-time-order: 1;
  align-self: end;
}

.timeline-entry--header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0.25em;
}

.timeline-entry--time {
  order: var(--timeline-entry-time-order);
}

.timeline-entry--title {
  order: var(--timeline-entry-title-order);
  flex-grow: 1;
  text-align: center;
}

.timeline-entry--quotebox {
  width: 100%;
  padding: 0.25em;
}

.timeline-entry--quote {

}

.timeline-entry--author {

}

.timeline-entry--source {

}

.timeline-story--body {
  width: 100%;
  padding: 0.25em;
}

.timeline-entry--event {

}