@explorer-1/vue 0.2.103 → 0.3.0

package/src/templates/www/PageInfographicDetail/PageInfographicDetail.vue

@@ -105,21 +105,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.PageInfographicDetail {
-  .BaseImagePlaceholder {
-    @apply select-none;
-
-    min-height: 400px;
-  }
-
-  aside {
-    .BaseButton {
-      max-width: 200px;
-    }
-
-    .BlockText {
-      @apply text-lg;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageInfographicDetail';
 </style>

package/src/templates/www/PageMaintenanceMode/PageMaintenanceMode.vue

@@ -64,31 +64,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.PageMaintenanceMode {
-  .NavSocial {
-    @apply -ml-2; // visually centered due to narrow facebook icon
-    .BaseButton.-social {
-      @apply border-0 bg-none text-gray-dark;
-      &:hover {
-        @apply bg-none bg-transparent;
-
-        &.-facebook {
-          @apply text-facebook;
-        }
-
-        &.-twitter {
-          @apply text-twitter;
-        }
-
-        &.-instagram {
-          @apply text-instagram;
-        }
-
-        &.-youtube {
-          @apply text-youtube;
-        }
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageMaintenanceMode';
 </style>

package/src/templates/www/PagePodcastSeason/PagePodcastSeason.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="ThemeVariantLight"
+    class="ThemeVariantLight PagePodcastSeason"
     :class="{ '-nav-offset': data.featuredEpisode }"
   >
     <!-- hero image -->
@@ -183,9 +183,6 @@ export default defineComponent({
 })
 </script>
 
-<style scoped>
-.flip-horizontal > svg {
-  display: block;
-  transform: scale(-1, 1);
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/templates/PagePodcastSeason';
 </style>

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>