@explorer-1/vue 0.2.104 → 0.3.0

package/src/templates/PageAudioDetail/PageAudioDetail.vue

@@ -306,71 +306,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.PageAudioDetail {
-  .transcript-overlay {
-    // necessary for safari to interpolate the gradient correctly
-    // see https://stackoverflow.com/a/56548711
-    background-image: linear-gradient(to top, white, rgba(255, 255, 255, 0));
-    @apply absolute bottom-0 inset-x-0 h-24 pointer-events-none;
-  }
-
-  .audio-aside {
-    // .BaseButton {
-    //   max-width: 200px;
-    //   @screen md {
-    //     max-width: none;
-    //   }
-    // }
-    .BlockText {
-      @apply text-lg;
-    }
-  }
-
-  .audio-transcript {
-    p {
-      @apply mb-4;
-    }
-  }
-
-  .SubscribeModal {
-    ul {
-      @apply mb-5;
-      @screen lg {
-        @apply mb-8;
-      }
-
-      &:last-child {
-        @apply mb-0;
-      }
-
-      li {
-        @apply mb-2 pl-8 relative;
-        @screen lg {
-          @apply pl-12;
-        }
-
-        &:last-child {
-          @apply mb-0;
-        }
-
-        &::before {
-          content: '';
-          width: 24px;
-          height: 2px;
-          @apply bg-jpl-red block absolute top-0 left-0 mt-3;
-          @screen sm {
-            @apply mt-3;
-          }
-          @screen lg {
-            width: 30px;
-          }
-
-          .ThemeVariantDark & {
-            @apply bg-jpl-red-light;
-          }
-        }
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageAudioDetail';
 </style>

package/src/templates/PageEventDetail/PageEventDetail.vue

@@ -293,34 +293,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.PageEventDetail {
-  .PageEventDetail__Metadata {
-    @apply flex;
-    @apply items-baseline;
-    @apply mr-12;
-    @apply md:mr-8;
-    @apply lg:mr-12;
-    @apply mb-5;
-
-    span {
-      max-width: 230px;
-      min-width: 110px;
-      @apply text-gray-dark;
-    }
-
-    svg {
-      min-width: 1.25rem;
-      @apply top-0.5;
-    }
-  }
-
-  .PageEventDetail__Buttons {
-    @apply text-base;
-    @apply lg:ml-auto;
-    @apply mt-10;
-    @apply lg:mt-0;
-
-    max-width: 260px;
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageEventDetail';
 </style>

package/src/templates/PageImageDetail/PageImageDetail.vue

@@ -380,39 +380,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.PageImageDetail {
-  .PageImageDetail-image-container {
-    .BaseImagePlaceholder {
-      @apply select-none;
-
-      min-height: 400px;
-
-      img {
-        -webkit-user-drag: none;
-      }
-    }
-    @screen sm {
-      &::before {
-        content: '';
-        @apply absolute inset-0;
-      }
-    }
-  }
-
-  .TopicTabs {
-    button {
-      @apply select-none;
-    }
-  }
-
-  aside {
-    .BaseButton {
-      max-width: 200px;
-    }
-
-    .BlockText {
-      @apply text-lg;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageImageDetail';
 </style>

package/src/templates/PageVideoDetail/PageVideoDetail.vue

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

package/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue

@@ -326,33 +326,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.PageEduEventDetail {
-  .PageEduEventDetail__Metadata {
-    @apply flex;
-    @apply items-baseline;
-    @apply mr-4 md:mr-4 xl:mr-12;
-    @apply mb-5 lg:mb-7;
-    @apply lg:max-w-[17rem] lg:min-w-[10rem];
-
-    span {
-      @apply text-gray-dark;
-    }
-
-    svg {
-      min-width: 1.25rem;
-      @apply top-0.5;
-    }
-  }
-
-  .PageEduEventDetail__Buttons {
-    @apply text-base;
-    @apply lg:ml-auto;
-    @apply mt-10;
-    @apply lg:mt-0;
-    @apply text-center;
-  }
-  .bg-stars .MixinCarousel__Heading {
-    @apply text-white;
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageEduEventDetail';
 </style>

package/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue

@@ -230,15 +230,5 @@ export default defineComponent({
   </div>
 </template>
 <style lang="scss">
-.PageEduExplainerArticle {
-  .BlockText {
-    ul {
-      li {
-        &::marker {
-          @apply text-secondary;
-        }
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageEduExplainerArticle';
 </style>

package/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue

@@ -243,29 +243,5 @@ const { data } = reactive(props)
   </div>
 </template>
 <style lang="scss">
-.PageEduGalleryDetail {
-  .bg-stars .MixinCarousel__Heading {
-    @apply text-white;
-  }
-  .MixinFancybox + .p-4 {
-    @apply px-0;
-  }
-  .PageEduGalleryDetailItem {
-    &:target {
-      @apply scroll-mt-14;
-      @screen lg {
-        @apply scroll-mt-[8rem];
-      }
-    }
-  }
-  .BlockText {
-    ul {
-      li {
-        &::marker {
-          @apply text-secondary;
-        }
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageEduGalleryDetail';
 </style>

package/src/templates/edu/PageEduHome/PageEduHome.vue

@@ -127,28 +127,5 @@ const submitSearch = () => {
   </div>
 </template>
 <style lang="scss">
-.PageEduHome {
-  .EduHero {
-    .content-wrapper {
-      @screen lg {
-        min-height: 548px; // maintains 1440x770 aspect ratio
-      }
-
-      @screen xl {
-        min-height: 684px; // maintains 1440x770 aspect ratio
-      }
-
-      @screen 2xl {
-        min-height: 770px; // 1440x770
-      }
-
-      @screen 3xl {
-        min-height: 963px; // maintains 1440x770 aspect ratio
-      }
-      input::placeholder {
-        @apply font-medium text-gray-dark opacity-80;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageEduHome';
 </style>

package/src/templates/edu/PageEduLesson/PageEduLessonSection.vue

@@ -118,69 +118,5 @@ const { heading, blocks, image, procedures, text } = reactive(props)
   </section>
 </template>
 <style lang="scss">
-@use 'sass:math';
-@function pxToRem($pxValue) {
-  // Assumes font-size for body element is a constant 16px
-  @return math.div($pxValue, 16) * 1rem;
-}
-.PageEduLessonSection {
-  .PageEduProcedureSection {
-    .PageEduProcedureSectionSteps {
-      counter-reset: step;
-    }
-    .PageEduProcedureSectionSingleStep {
-      li:not(:last-of-type) .BlockStreamfield {
-        @apply -mb-5;
-      }
-    }
-    ol.PageEduProcedureSectionSingleStep {
-      @apply list-none pl-7;
-      text-wrap: pretty;
-      @screen lg {
-        @apply pl-0;
-      }
-      > li {
-        @apply relative w-full;
-        counter-increment: step;
-        &::before {
-          @apply relative block w-[45rem] mx-auto h-0 pl-1;
-          content: counter(step) '. ';
-          // mimicking .text-body-lg
-          font-size: pxToRem(18);
-          line-height: 1.6667;
-        }
-
-        @screen sm {
-          &::before {
-            @apply w-[47rem];
-            font-size: pxToRem(19);
-          }
-        }
-        @screen md {
-          &::before {
-            @apply w-[51.5rem];
-            font-size: pxToRem(20);
-          }
-        }
-        @screen lg {
-          &::before {
-            @apply w-[46rem] pl-0;
-            font-size: pxToRem(21);
-          }
-        }
-        @screen xl {
-          &::before {
-            @apply w-[59rem];
-            font-size: pxToRem(22);
-          }
-        }
-        @screen 2xl {
-          &::before {
-            // @apply w-[58.5rem];
-          }
-        }
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageEduLessonSection';
 </style>

package/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue

@@ -424,18 +424,5 @@ const { data } = reactive(props)
   </div>
 </template>
 <style lang="scss">
-.PageEduMultimediaDetail {
-  .bg-stars .MixinCarousel__Heading {
-    @apply text-white;
-  }
-  .BlockVideo,
-  .BlockVideoEmbed {
-    .BaseImageCaption {
-      @apply px-4 sm:px-5;
-      @screen 3xl {
-        @apply px-0;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageEduMultimediaDetail';
 </style>

package/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue

@@ -447,16 +447,5 @@ const computedClass = computed((): string => {
   </div>
 </template>
 <style lang="scss">
-.PageEduStudentProject {
-  .BlockText {
-    ul {
-      li {
-        &::marker {
-          // intentionally using a specific red
-          @apply text-jpl-red;
-        }
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageEduStudentProject';
 </style>

package/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue

@@ -167,63 +167,5 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
   </section>
 </template>
 <style lang="scss">
-@use 'sass:math';
-@function pxToRem($pxValue) {
-  // Assumes font-size for body element is a constant 16px
-  @return math.div($pxValue, 16) * 1rem;
-}
-.PageEduStudentProjectSection {
-  @apply overflow-x-hidden;
-  .PageEduStudentProjectStep {
-    &:target {
-      @apply scroll-mt-14;
-    }
-    .BlockStreamfield {
-      div:last-child {
-        @apply mb-0 #{!important};
-      }
-    }
-    .caption-area {
-      @apply px-0;
-    }
-    .steps-numbering {
-      // intentionally overriding correction that occurs within ThemeVariantGray
-      @apply text-jpl-red;
-    }
-    .LayoutHelper > div > .BlockText {
-      .richtext-image {
-        &.right,
-        &.left {
-          @apply lg:max-w-md;
-        }
-        &.right {
-          @apply mr-0;
-        }
-        &.left {
-          @apply ml-0;
-        }
-      }
-    }
-
-    .PageEduStudentProjectStep__fullWidth {
-      .LayoutHelper > div > .BlockText {
-        p,
-        li {
-          @screen lg {
-            @apply pr-[9rem];
-          }
-          @screen xl {
-            @apply pr-[13rem];
-          }
-        }
-        table {
-          p,
-          li {
-            @apply pr-0;
-          }
-        }
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageEduStudentProjectSection';
 </style>

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>