Jake Vanderwerf
9 days ago ed57c386db34d8693ca75311972d0929ebe5f488
src/timeline/style.scss
@@ -5,16 +5,18 @@
   }
}
#at-a-glance {
   max-width: var(--alignWide);
   padding: 0 10vw;
   --gap: 0;
   img {
      width: 100%;
      height: auto;
      border: 2px solid var(--action-0);
      border: 2px solid rgb(var(--action-0));
   }
   h3 {
      font-size: var(--small);
      font-size: var(--txt-x-small);
   }
   .before {
      img {
@@ -31,17 +33,29 @@
      }
   }
}
main > header {
   grid-column: wider;
.timeline-point.timeline-point {
   ul.timeline.terms {
      max-width: none;
      margin: 0;
      font-size: var(--txt-x-small);
   }
   .buttons {
      margin-bottom: 0;
   }
}
.timeline-point.timeline-point.row {
   --lineWidth: 1px;
   --gap: 2rem;
   padding: 0;
   margin:0;
   background-color: var(--base);
   background-color: rgb(var(--base));
   max-width: 100vw;
   position: relative;
   overflow: hidden;
   .open-gallery {
   //overflow: hidden;
   img {
      width: 40%;
      border-radius: 4px;
      position: sticky;
@@ -51,21 +65,32 @@
      padding: 1rem .5rem .5rem;
      width: 60%;
      position: relative;
      .icon-logo-triangle {
         --w: 2.2rem;
         transform: rotate(-90deg);
         position: absolute;
         left: -3rem;
         top: .25rem;
         background-color: rgb(var(--action-100));
      }
      h2 {
         margin: 0 0 .5rem;
         font-size: var(--medium);
         font-size: var(--txt-medium);
         position: relative;
         .icon {
            --w: 2.5rem;
            transform: rotate(-90deg);
            position: absolute;
            left: -2.5rem;
            top: .25rem;
            background-color: var(--action-100);
         }
      }
   }
   .term-list {
      margin: 0;
      font-size: var(--txt-x-small);
      li {
         display: block;
         a {
            vertical-align: top;
         }
      }
   }
   &::before,
   &::after {
      content: '';
@@ -74,14 +99,14 @@
      left: 45%;
      height: 100%;
      width: var(--lineWidth);
      background-color: var(--action-0);
      background-color: rgb(var(--action-0));
      //box-shadow: var(--action-shadow);
   }
   &::before {
      height: 1rem;
   }
   &::after {
      top: 4rem;
      top: 4.25rem;
   }
   &#before-treatment::before,
   &:last-of-type::after {
@@ -91,12 +116,12 @@
@media (min-width:768px) {
   #at-a-glance {
      h3  {
         font-size: var(--xlarge);
         font-size: var(--txt-x-large);
      }
   }
   .timeline-point.timeline-point {
   .timeline-point.timeline-point.row {
      --gap: 4rem;
      .open-gallery {
      img {
         width: 50%;
      }
      .info {
@@ -105,10 +130,16 @@
         h2 {
            .icon {
               --w: 4rem;
               left: -4.15rem;
               left: -6.15rem;
               top: 0;
            }
         }
         small {
            display: inline-flex;
            flex-wrap: wrap;
            gap: .25rem;
            align-items: center;
         }
         a {
            display: flex;
            flex-wrap: wrap;
@@ -117,7 +148,7 @@
         time {
            text-transform: uppercase;
            font-size: var(--small);
            font-size: var(--txt-x-small);
         }
      }
      &::before,