@explorer-1/vue 0.2.104 → 0.3.1

package/src/templates/www/PageCuratedGallery/PageCuratedGallery.vue

@@ -264,90 +264,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.PageCuratedGallery {
-  // sharebuttons fix TODO: make better
-  @screen lg {
-    .ShareButtons {
-      transform: scale(0.75);
-      top: -1.8rem;
-      z-index: 999;
-    }
-  }
-  .CuratedGallery-thumbnails,
-  .CuratedGallery-carousel {
-    @apply block;
-
-    &.hidden {
-      @apply h-0 overflow-hidden;
-    }
-
-    &.shown {
-      @apply relative;
-    }
-  }
-
-  .BaseGalleryImage {
-    .MixinFancybox {
-      img {
-        @apply can-hover:hover:opacity-95 transition-opacity duration-75;
-      }
-    }
-
-    @apply text-gray-mid-dark col-span-12 mx-5;
-    @screen md {
-      @apply col-span-6 mx-3;
-    }
-    @screen lg {
-      @apply col-span-6 mx-0;
-
-      .BaseImagePlaceholder {
-        @apply transition-shadow duration-200 rounded-sm;
-      }
-      &:hover {
-        .BaseImagePlaceholder {
-          @apply duration-300 shadow-md;
-        }
-
-        .the-caption-text {
-          @apply text-jpl-red-light transition-colors duration-200;
-        }
-      }
-    }
-    @screen lg {
-      @apply col-span-4 mx-1.5;
-    }
-    @screen xl {
-      @apply mx-0;
-    }
-
-    .the-caption-text {
-      @apply cursor-pointer text-gray-mid-dark text-lg my-3 leading-tight inline-block h-auto mb-14 transition-colors duration-150;
-      &:hover {
-        @apply text-jpl-red-dark transition-colors duration-200;
-      }
-
-      .ThemeVariantDark & {
-        @apply text-gray-light-mid;
-        &:hover {
-          @apply text-jpl-red-dark;
-        }
-      }
-    }
-
-    .ThemeVariantLight & {
-      @apply text-gray-mid;
-    }
-
-    .ThemeVariantDark & {
-      @apply text-gray-mid;
-    }
-  }
-
-  .StreamField {
-    @apply pb-4;
-    @screen lg {
-      @apply pb-12;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageCuratedGallery';
 </style>

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

@@ -282,6 +282,7 @@ export default defineComponent({
               '--x-translate': `${(index % 2 === 0 ? 180 : -130) + 10 * (index % 3)}%`
             }"
             alt=""
+            data-chromatic="ignore"
           />
         </ParallaxElement>
         <BlockMilestone
@@ -307,104 +308,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>

package/tailwind.config.js

@@ -6,19 +6,9 @@
  */
 
 // import explorer 1's tailwind config
-import explorer1Config from '@explorer-1/common/tailwind.config';
+import explorer1Config from '@explorer-1/common/tailwind.config'
 
 export default {
   ...explorer1Config,
-  content: [
-    './index.html',
-    './src/App.vue',
-    './src/components/**/*.vue',
-    './.www-frontend_temp/components/!(_docs)/**/*.vue',
-    './.www-frontend_temp/layouts/**/*.vue',
-    './.www-frontend_temp/pages/**/*.vue',
-    './.www-frontend_temp/mixins/**/*.vue',
-    './.www-frontend_temp/plugins/**/*.js',
-    './.www-frontend_temp/nuxt.config.js',
-  ],
-};
+  content: ['./index.html', './src/App.vue', './src/components/**/*.vue']
+}

package/dist/explorer-1-vue.d.ts

@@ -1 +0,0 @@
-export * from './lib/main'