=Jakevan edits done?

Jake Vanderwerf

10 days ago 97e7c319d656a5f05489ca996e249e7359303d4d

 build/timeline/style-index-rtl.css

@@ -1 +1,121 @@
main{--gap:0}main section:last-of-type{margin-bottom:0}#at-a-glance{padding:0 10vw;--gap:0}#at-a-glance img{border:2px solid var(--action-0);height:auto;width:100%}#at-a-glance h3{font-size:var(--txt-x-small)}#at-a-glance .before img{border-right:0;border-left-width:1px;border-top:0}#at-a-glance .after img{border-bottom:0;border-right-width:1px;border-left:0}.timeline-point.timeline-point{--lineWidth:1px;--gap:2rem;background-color:var(--base);margin:0;max-width:100vw;overflow:hidden;padding:0;position:relative}.timeline-point.timeline-point img{border-radius:4px;padding:.5rem;position:sticky;width:40%}.timeline-point.timeline-point .info{padding:1rem .5rem .5rem;position:relative;width:60%}.timeline-point.timeline-point .info h2{font-size:var(--txt-medium);margin:0 0 .5rem;position:relative}.timeline-point.timeline-point .info h2 .icon{--w:2.5rem;background-color:var(--action-100);right:-2.5rem;position:absolute;top:.25rem;transform:rotate(90deg)}.timeline-point.timeline-point:after,.timeline-point.timeline-point:before{background-color:var(--action-0);content:"";display:block;height:100%;right:45%;position:absolute;width:var(--lineWidth)}.timeline-point.timeline-point:before{height:1rem}.timeline-point.timeline-point:after{top:4rem}.timeline-point.timeline-point#before-treatment:before,.timeline-point.timeline-point: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}.timeline-point.timeline-point img{width:50%}.timeline-point.timeline-point .info{padding:25vh 1rem 1rem;width:50%}.timeline-point.timeline-point .info h2 .icon{--w:4rem;right:-6.15rem;top:0}.timeline-point.timeline-point .info a{align-items:center;display:flex;flex-wrap:wrap}.timeline-point.timeline-point .info time{font-size:var(--txt-x-small);text-transform:uppercase}.timeline-point.timeline-point:after,.timeline-point.timeline-point:before{right:calc(50% + 2rem)}.timeline-point.timeline-point:before{height:calc(25vh - 2rem)}.timeline-point.timeline-point:after{top:calc(25vh + 6rem)}}
/*!************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/timeline/style.scss ***!
  \************************************************************************************************************************************************************************************************************************************************/
main {
  --gap: 0;
}
main section:last-of-type {
  margin-bottom: 0;
}
#at-a-glance {
  padding: 0 10vw;
  --gap: 0;
}
#at-a-glance img {
  width: 100%;
  height: auto;
  border: 2px solid rgb(var(--action-0));
}
#at-a-glance h3 {
  font-size: var(--txt-x-small);
}
#at-a-glance .before img {
  border-left-width: 1px;
  border-right: 0;
  border-top: 0;
}
#at-a-glance .after img {
  border-right-width: 1px;
  border-left: 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;
}
.timeline-point.timeline-point img {
  width: 40%;
  border-radius: 4px;
  position: sticky;
  padding: 0.5rem;
}
.timeline-point.timeline-point .info {
  padding: 1rem 0.5rem 0.5rem;
  width: 60%;
  position: relative;
}
.timeline-point.timeline-point .info h2 {
  margin: 0 0 0.5rem;
  font-size: var(--txt-medium);
  position: relative;
}
.timeline-point.timeline-point .info h2 .icon {
  --w: 2.5rem;
  transform: rotate(90deg);
  position: absolute;
  right: -2.5rem;
  top: 0.25rem;
  background-color: rgb(var(--action-100));
}
.timeline-point.timeline-point::before, .timeline-point.timeline-point::after {
  content: "";
  display: block;
  position: absolute;
  right: 45%;
  height: 100%;
  width: var(--lineWidth);
  background-color: rgb(var(--action-0));
}
.timeline-point.timeline-point::before {
  height: 1rem;
}
.timeline-point.timeline-point::after {
  top: 4rem;
}
.timeline-point.timeline-point#before-treatment::before, .timeline-point.timeline-point: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;
  }
  .timeline-point.timeline-point img {
    width: 50%;
  }
  .timeline-point.timeline-point .info {
    width: 50%;
    padding: 25vh 1rem 1rem;
  }
  .timeline-point.timeline-point .info h2 .icon {
    --w: 4rem;
    right: -6.15rem;
    top: 0;
  }
  .timeline-point.timeline-point .info a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .timeline-point.timeline-point .info time {
    text-transform: uppercase;
    font-size: var(--txt-x-small);
  }
  .timeline-point.timeline-point::before, .timeline-point.timeline-point::after {
    right: calc(50% + 2rem);
  }
  .timeline-point.timeline-point::before {
    height: calc(25vh - 2rem);
  }
  .timeline-point.timeline-point::after {
    top: calc(25vh + 6rem);
  }
}