Jake Vanderwerf
5 days ago 266aa37c48222993bf7bdad6834e31bd08736f5e
src/timeline/style.scss
New file
@@ -0,0 +1,135 @@
main {
   --gap: 0;
   section:last-of-type {
      margin-bottom: 0;
   }
}
#at-a-glance {
   padding: 0 10vw;
   --gap: 0;
   img {
      width: 100%;
      height: auto;
      border: 2px solid rgb(var(--action-0));
   }
   h3 {
      font-size: var(--txt-x-small);
   }
   .before {
      img {
         border-right-width: 1px;
         border-left: 0;
         border-top: 0;
      }
   }
   .after {
      img {
         border-left-width: 1px;
         border-right: 0;
         border-bottom: 0;
      }
   }
}
.timeline-point.timeline-point {
   --lineWidth: 1px;
   --gap: 2rem;
   padding: 0;
   margin:0;
   background-color: rgb(var(--base));
   max-width: 100vw;
   position: relative;
   overflow: hidden;
   img {
      width: 40%;
      border-radius: 4px;
      position: sticky;
      padding: .5rem;
   }
   .info {
      padding: 1rem .5rem .5rem;
      width: 60%;
      position: relative;
      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));
         }
      }
   }
   &::before,
   &::after {
      content: '';
      display: block;
      position: absolute;
      left: 45%;
      height: 100%;
      width: var(--lineWidth);
      background-color: rgb(var(--action-0));
      //box-shadow: var(--action-shadow);
   }
   &::before {
      height: 1rem;
   }
   &::after {
      top: 4rem;
   }
   &#before-treatment::before,
   &:last-of-type::after {
      display: none;
   }
}
@media (min-width:768px) {
   #at-a-glance {
      h3  {
         font-size: var(--txt-x-large);
      }
   }
   .timeline-point.timeline-point {
      --gap: 4rem;
      img {
         width: 50%;
      }
      .info {
         width: 50%;
         padding: 25vh 1rem 1rem;
         h2 {
            .icon {
               --w: 4rem;
               left: -6.15rem;
               top: 0;
            }
         }
         a {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
         }
         time {
            text-transform: uppercase;
            font-size: var(--txt-x-small);
         }
      }
      &::before,
      &::after {
         left: calc(50% + 2rem);
      }
      &::before {
         height: calc(25vh - 2rem);
      }
      &::after {
         top: calc(25vh + 6rem);
      }
   }
}