diff --git a/packages/common/src/scss/components/_BlockKeyPoints.scss b/packages/common/src/scss/components/_BlockKeyPoints.scss index b85c0a62..35d497b1 100644 --- a/packages/common/src/scss/components/_BlockKeyPoints.scss +++ b/packages/common/src/scss/components/_BlockKeyPoints.scss @@ -1,21 +1,14 @@ .BlockKeyPoints { @media not print { + ul { + @apply ml-6; + } ul li { - &::before { - @apply bg-primary; - @apply inline-block; - @apply relative; - @apply mr-4; - @apply shrink-0; - @apply mt-3; - @apply print:hidden; - - content: ''; - width: 30px; - height: 2px; - vertical-align: middle; + &::marker { + content: '—'; + @apply leading-none text-primary font-medium text-[22px] lg:text-[24px]; } - + @apply pl-2 lg:pl-4; .BlockText { p { @apply mb-2; diff --git a/packages/common/src/scss/components/_BlockText.scss b/packages/common/src/scss/components/_BlockText.scss index 0a8ac28e..a6001d52 100644 --- a/packages/common/src/scss/components/_BlockText.scss +++ b/packages/common/src/scss/components/_BlockText.scss @@ -55,7 +55,7 @@ ol, ul { - @apply mb-5; + @apply mb-5 relative left-14 pr-14; @screen lg { @apply mb-8; @@ -75,7 +75,7 @@ } ol { - @apply pl-12 list-decimal; + @apply list-decimal pl-2 lg:pl-4; ol { list-style-type: lower-alpha; ol { @@ -86,20 +86,12 @@ } } } - ul { li { - @apply pl-12 relative; - - &::before { - content: ''; - width: 30px; - height: 2px; - @apply bg-primary block absolute top-0 left-0 mt-3; - - @screen sm { - @apply mt-4; - } + @apply pl-2 lg:pl-4; + &::marker { + content: '—'; + @apply leading-none text-primary font-medium text-[22px] lg:text-[28px]; } } } @@ -113,7 +105,7 @@ } &.left, &.right { - @apply mb-5 lg:mb-5 mx-5 lg:mx-8; + @apply mt-[.25rem] mb-5 lg:mb-5 mx-5 lg:mx-8; @apply inline max-w-full sm:max-w-[50%]; img { @apply max-w-full h-auto; @@ -123,26 +115,20 @@ @apply sm:float-left ml-0; // mimics offset in BlockInlineImage @apply ml-0 lg:-ml-[5.3rem] xl:-ml-[6.8rem]; - // uncomment if floating images become unwieldy - // + p, - // + div { - // clear: right; - // } } &.right { @apply sm:float-right mr-0; // mimics offset in BlockInlineImage @apply mr-0 lg:-mr-[5.3rem] xl:-mr-[6.8rem]; - // uncomment if floating images become unwieldy - // + p, - // + div { - // clear: left; - // } } &:last-child { @apply mb-0; } } + // subsequent floating images + .richtext-image ~ .richtext-image { + clear: both; + } .richtext-caption { // mimic BaseImageCaption @apply pt-3 text-gray-mid-dark text-sm lg:text-base; @@ -178,11 +164,8 @@ &.-medium { ul { li { - &::before { - @apply mt-3; - @screen lg { - @apply mt-3.5; - } + &::marker { + @apply lg:text-[24px]; } } } @@ -257,11 +240,8 @@ } ul { li { - &::before { - @apply mt-2.5; - @screen lg { - @apply mt-3; - } + &::marker { + @apply lg:text-[22px]; } } } diff --git a/packages/vue/src/components/BlockKeyPoints/BlockKeyPoints.vue b/packages/vue/src/components/BlockKeyPoints/BlockKeyPoints.vue index 56ceecb6..dfabdab9 100644 --- a/packages/vue/src/components/BlockKeyPoints/BlockKeyPoints.vue +++ b/packages/vue/src/components/BlockKeyPoints/BlockKeyPoints.vue @@ -11,7 +11,7 @@
  • ({ template: '
    ' }) - ] + ], + excludeStories: /.*Data$/ } +export const RichTextMediaData = `

    Description for it.

    Perseverance Looks Back at 'Bright Angel' +
    +
    One of the navigation cameras aboard NASAs Perseverance Mars rover captured this view looking back at the Bright Angel area on July 30, 2024.
    + Credit: NASA/JPL-Caltech + Full Image Details +
    +

    More text and another image that's full width (above)

    Carbon Mapper Coalition's Tanager Satellite +
    +
    This artists concept depicts one of the Carbon Mapper Coalitions Tanager satellites, the first of which launched on Aug. 16, 2024. Tanager-1 will use imaging spectrometer technology developed at JPL to measure greenhouse gas point-source emissions.
    + Credit: Planet Labs PBC + Full Image Details +
    +
    + +

    More text and something that's right-aligned.

    Lecture Brings Galileo's Travels into Final Focus +
    +
    Lecture Brings Galileo's Travels into Final Focus
    +
    +
    +
    1. Item one in the list
    2. Aliquam erat volutpat. Nam et lorem purus. Pellentesque placerat, lorem eget ultrices bibendum, lorem dolor finibus metus, consectetur mattis lorem sapien id felis. Cras scelerisque lacus et tristique luctus.
    3. Third item in the list
    +

    Pellentesque euismod, metus et vehicula tincidunt, magna velit viverra enim, non efficitur elit enim ut ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum massa est, aliquam sed volutpat quis, tempor vitae felis. Quisque suscipit in purus non rhoncus. Vestibulum commodo gravida nibh. Quisque imperdiet lacus rhoncus malesuada elementum. Mauris tempor purus quis sollicitudin ornare. Suspendisse eget gravida neque. Etiam gravida, sapien ac condimentum placerat, tellus eros volutpat elit, non viverra lectus turpis ut lectus. Praesent varius porttitor eros eu efficitur. Etiam nec neque semper, facilisis leo non, tempor enim. Etiam a sodales lacus. Aenean a nibh ipsum.

    + +
    1. Item one in the list
    2. Aliquam erat volutpat. Nam et lorem purus. Pellentesque placerat, lorem eget ultrices bibendum, lorem dolor finibus metus, consectetur mattis lorem sapien id felis. Cras scelerisque lacus et tristique luctus.
    3. Third item in the list
    +

    Nunc molestie aliquet nunc, ut viverra risus elementum bibendum. Cras metus metus, sagittis sed ex at, rutrum dictum leo. Cras sodales, urna id aliquam scelerisque, neque sem venenatis justo, a feugiat lorem ligula molestie orci. Vestibulum in suscipit diam. Phasellus pulvinar quis diam ullamcorper sagittis. Praesent a risus leo. Etiam tempor dolor eu turpis laoreet fermentum. Sed turpis risus, interdum ut bibendum ut, ornare a augue. Donec condimentum odio non lectus efficitur sodales. Vivamus posuere ligula a eros molestie, semper porttitor augue interdum. Cras et facilisis ligula, nec malesuada velit.

    ` + export const BaseStory = { name: 'BlockText', args: { @@ -27,6 +53,12 @@ export const BaseStory = { } export const RichTextMedia = { + args: { + variant: 'large', + text: RichTextMediaData + } +} +export const SubsequentFloatingImages = { args: { variant: 'large', text: `

    Description for it.

    Perseverance Looks Back at 'Bright Angel' @@ -45,6 +77,23 @@ export const RichTextMedia = {
    Lecture Brings Galileo's Travels into Final Focus
    -

    More text and something that's left-aligned

    ` +

    More text and something that's right-aligned.

    Lecture Brings Galileo's Travels into Final Focus +
    +
    Lecture Brings Galileo's Travels into Final Focus
    +
    +
    +
    Lecture Brings Galileo's Travels into Final Focus +
    +
    Lecture Brings Galileo's Travels into Final Focus
    +
    +
    +
    Lecture Brings Galileo's Travels into Final Focus +
    +
    Lecture Brings Galileo's Travels into Final Focus
    +
    +
    +

    More text and two subsequent left-aligned images

    +

    Pellentesque euismod, metus et vehicula tincidunt, magna velit viverra enim, non efficitur elit enim ut ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum massa est, aliquam sed volutpat quis, tempor vitae felis. Quisque suscipit in purus non rhoncus. Vestibulum commodo gravida nibh. Quisque imperdiet lacus rhoncus malesuada elementum. Mauris tempor purus quis sollicitudin ornare. Suspendisse eget gravida neque. Etiam gravida, sapien ac condimentum placerat, tellus eros volutpat elit, non viverra lectus turpis ut lectus. Praesent varius porttitor eros eu efficitur. Etiam nec neque semper, facilisis leo non, tempor enim. Etiam a sodales lacus. Aenean a nibh ipsum.

    +

    Nunc molestie aliquet nunc, ut viverra risus elementum bibendum. Cras metus metus, sagittis sed ex at, rutrum dictum leo. Cras sodales, urna id aliquam scelerisque, neque sem venenatis justo, a feugiat lorem ligula molestie orci. Vestibulum in suscipit diam. Phasellus pulvinar quis diam ullamcorper sagittis. Praesent a risus leo. Etiam tempor dolor eu turpis laoreet fermentum. Sed turpis risus, interdum ut bibendum ut, ornare a augue. Donec condimentum odio non lectus efficitur sodales. Vivamus posuere ligula a eros molestie, semper porttitor augue interdum. Cras et facilisis ligula, nec malesuada velit.

    ` } } diff --git a/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue b/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue index 254b9e1b..31ac692b 100644 --- a/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue +++ b/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue @@ -231,8 +231,8 @@ export default defineComponent({ .BlockText { ul { li { - &::before { - @apply bg-secondary; + &::marker { + @apply text-secondary; } } } diff --git a/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue b/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue index 301786cc..e138564a 100644 --- a/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue +++ b/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue @@ -260,8 +260,8 @@ const { data } = reactive(props) .BlockText { ul { li { - &::before { - @apply bg-secondary; + &::marker { + @apply text-secondary; } } } diff --git a/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.stories.js b/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.stories.js index f98c4d51..cb4dd4dc 100644 --- a/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.stories.js +++ b/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.stories.js @@ -9,6 +9,7 @@ import { BaseVideoData } from './../../../components/BaseVideo/BaseVideo.stories import { BlockVideoEmbedData } from './../../../components/BlockVideoEmbed/BlockVideoEmbed.stories' import { BlockRelatedLinksData } from './../../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js' import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js' +import { RichTextMediaData } from './../../../components/BlockText/BlockText.stories.js' import { BlockRichTableData } from './../../../components/BlockRichTable/BlockRichTable.stories' import { BlockStreamfieldTruncatedData, @@ -144,7 +145,11 @@ export const BaseStory = { BlockImageData, ...BlockStreamfieldMinimalData.body, BlockRichTableData, - BlockInlineImageData.block + BlockInlineImageData.block, + { + blockType: 'RichTextBlock', + value: RichTextMediaData + } ] }, { diff --git a/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue b/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue index c81be0de..35a8251f 100644 --- a/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue +++ b/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue @@ -451,9 +451,9 @@ const computedClass = computed((): string => { .BlockText { ul { li { - &::before { + &::marker { // intentionally using a specific red - @apply bg-jpl-red; + @apply text-jpl-red; } } } diff --git a/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue b/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue index 054ddde4..4936df27 100644 --- a/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue +++ b/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue @@ -186,13 +186,34 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props) // intentionally overriding correction that occurs within ThemeVariantGray @apply text-jpl-red; } + .richtext-image { + &.right, + &.left { + @apply lg:max-w-md; + } + &.right { + @apply mr-0; + } + &.left { + @apply ml-0; + } + } .PageEduStudentProjectStep__fullWidth { - .LayoutHelper > div > .BlockText:not(.BlockRichTable.BlockText) { - @screen lg { - @apply mr-[10rem]; + .LayoutHelper > div > .BlockText { + p, + li { + @screen lg { + @apply mr-[10rem]; + } + @screen xl { + @apply mr-[14rem]; + } } - @screen xl { - @apply mr-[14rem]; + table { + p, + li { + @apply mr-0; + } } } }