=Timeline block fixes. Next up: adding article schema classes

Jake Vanderwerf

9 days ago 47e77f9fac1155c536b2b87fec552c7fcce66fa6

 src/timeline/style.scss

@@ -5,6 +5,8 @@
   }
}



#at-a-glance {
   padding: 0 10vw;
   --gap: 0;
@@ -31,8 +33,20 @@
      }
   }
}
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;
@@ -40,7 +54,7 @@
   background-color: rgb(var(--base));
   max-width: 100vw;
   position: relative;
   overflow: hidden;
   //overflow: hidden;
   img {
      width: 40%;
      border-radius: 4px;
@@ -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(--txt-medium);
         position: relative;
         .icon {
            --w: 2.5rem;
            transform: rotate(-90deg);
            position: absolute;
            left: -2.5rem;
            top: .25rem;
            background-color: rgb(var(--action-100));
         }
      }

   }
   .term-list {
      margin: 0;
      font-size: var(--txt-x-small);

      li {
         display: block;
         a {
            vertical-align: top;
         }
      }
   }
   &::before,
   &::after {
      content: '';
@@ -81,7 +106,7 @@
      height: 1rem;
   }
   &::after {
      top: 4rem;
      top: 4.25rem;
   }
   &#before-treatment::before,
   &:last-of-type::after {
@@ -94,7 +119,7 @@
         font-size: var(--txt-x-large);
      }
   }
   .timeline-point.timeline-point {
   .timeline-point.timeline-point.row {
      --gap: 4rem;
      img {
         width: 50%;
@@ -109,6 +134,12 @@
               top: 0;
            }
         }
         small {
            display: inline-flex;
            flex-wrap: wrap;
            gap: .25rem;
            align-items: center;
         }
         a {
            display: flex;
            flex-wrap: wrap;