@explorer-1/vue 0.2.104 → 0.3.0

package/src/templates/www/PageTimeline/PageTimeline.vue

@@ -307,104 +307,5 @@ export default defineComponent({
 </template>
 
 <style lang="scss">
-$line-width: 2px;
-$column-gap-width: 1.5rem;
-
-// makes the years able to have a lowercase 's' in the decade
-select {
-  &#select_jumpTo {
-    text-transform: none;
-  }
-}
-
-.NavSecondary {
-  @apply block;
-}
-
-.MilestoneList {
-  @apply gap-y-0 max-w-screen-4xl mx-auto;
-
-  // Offset the list up so the vertical line starts from the secondary nav.
-  @screen md {
-    margin-top: -200px;
-
-    > :first-child {
-      margin-top: 400px;
-    }
-  }
-}
-
-.MilestoneImageWrapper {
-  @apply hidden md:block absolute w-full h-full overflow-visible;
-
-  // Background images should always be below milestone cards, above the vertical line.
-  z-index: -20;
-}
-
-.MilestoneImage {
-  @apply md:transform md:-translate-y-full rounded-full bg-gray-light;
-
-  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent);
-  mask-image: linear-gradient(to bottom, black 60%, transparent);
-
-  @screen md {
-    --tw-translate-x: var(--x-translate);
-  }
-}
-
-.MilestoneListItem {
-  @apply flex relative lg:col-span-5 mb-12 md:mb-40 lg:mb-80 col-start-3 col-end-12;
-
-  scroll-margin-top: 20vh;
-  transform: translateX($line-width);
-  grid-row: var(--row);
-
-  &:nth-of-type(1) {
-    @apply md:pt-20;
-  }
-
-  &:nth-of-type(even) {
-    @apply md:justify-start md:col-start-7;
-
-    @screen md {
-      transform: translateX(calc(-1 * ($column-gap-width - $line-width)));
-    }
-  }
-
-  &:nth-of-type(odd) {
-    @screen md {
-      @apply md:justify-end md:col-start-2 md:col-end-7;
-
-      transform: none;
-
-      .BlockCircleImageCard {
-        flex-direction: row-reverse;
-      }
-    }
-  }
-}
-
-.VerticalLine {
-  @apply border-l border-r border-jpl-red top-5 md:top-2 bottom-0 col-start-3 md:col-start-7 mb-12;
-
-  // Use CSS grid positioning rather than position absolute within relative,
-  // so we don’t create a new stacking context within the ParallaxContainer.
-  // This makes it possible for the year ticker to alternate above and below images.
-  grid-row: 1 / span var(--rows);
-  z-index: -10;
-  width: 0;
-
-  @screen md {
-    border-image-source: linear-gradient(to bottom, theme('colors.jpl-red') 97%, rgba(0, 0, 0, 0));
-    border-image-width: $line-width;
-    border-image-slice: 1;
-    transform: translateX(-1 * $column-gap-width);
-  }
-
-  &::before {
-    @apply absolute -top-px -left-2px w-1 h-30 bg-gradient-to-b from-white to-transparent;
-
-    content: '';
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageTimeline';
 </style>