| New file |
| | |
| | | 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); |
| | | } |
| | | } |
| | | } |