@charset "UTF-8";

html,
body,
section,
article {
  display: grid;
}

:root {
  --color-theme: rgb(7, 109, 241);
}

/* display: grid on html & body + min-height: 100% on html
 * avoids the 100vh height mobile problem
 * https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
	* AND has better support than 100dvh height */
html {
  min-height: 100%;
}

/* avoid pure white text on pure black background
 * https://graphicdesign.stackexchange.com/questions/25356/why-not-use-pure-black-000-and-pure-white-fff
 * https://uxplanet.org/alternatives-to-using-pure-black-000000-for-text-and-backgrounds-54ef0e733cdb
 * https://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/ */
 
.timeline {
  /* middle align along both axes */
  place-self: center;
  /* limit width */
  max-width: 50em;
}

.timeline article {
  /* commonly used length value ¯\_(ツ)_/¯ */
  --size: .625em;
  /* timeline bar and markers */
  --highlight: var(--color-theme);
  /* default marker */
  --marker:
    radial-gradient(circle closest-side,
      var(--highlight) calc(100% - 1px), transparent) 0 0/ 100% var(--size);
  /* spacing between the two columns (text content and image) */
  grid-gap: 2em;
  /* equally sized columns */
  grid-template-columns: 1fr 1fr;
  /* tiny correction, avoid subpixel rounding issues */
  margin-top: -1px;
  background: var(--marker), linear-gradient(var(--highlight) 0 0) 50%/2px;
  background-repeat: no-repeat;
  /* different marker for the first item */
}

.timeline article:first-child {
  --marker:
    linear-gradient(var(--highlight) 0 0) 50% 0/ var(--size) calc(.5*var(--size));
}

.timeline article {
  /* for the odd items */
}

.timeline article:nth-child(odd) img {
  /* on the 1st row, 1st column */
  grid-area: 1/1;
  /* right-aligned */
  justify-self: end;
}

.timeline article {
  /* spacing in between items */
}

.timeline article:not(:last-child) {
  padding-bottom: 1em;
}

.timeline article {
  /* direct article children, text content box + img */
}

.timeline article>* {
  border-radius: var(--size);
}

.timeline__content {
  padding: 1em;
  background: rgba(255, 255, 255, 0.07);
}

.timeline h1 {
  margin: 0 0 var(--size);
  color: var(--color-theme);
  font: italic 1.375em/1 rosario, sans-serif;
  text-transform: capitalize;
}

.timeline time {
  font: 700 2.5em/1.25;
}

.timeline hr {
  opacity: 0.3;
}

.timeline p {
  margin: 0;
  padding-top: 0.5em;
}

.timeline img {
  width: min(100%, 13em);
  padding: 15px;
}

/*# sourceMappingURL=sampletimeline.css.map */