diff --git a/dotcom-rendering/src/components/ArticleHeadline.tsx b/dotcom-rendering/src/components/ArticleHeadline.tsx index 3c81c5b575c..a256e39e51e 100644 --- a/dotcom-rendering/src/components/ArticleHeadline.tsx +++ b/dotcom-rendering/src/components/ArticleHeadline.tsx @@ -123,7 +123,7 @@ const decideMobileHeadlineFont = (format: ArticleFormat) => { } }; -const headlineFont = (format: ArticleFormat) => { +const headlineFont = (format: ArticleFormat, layoutType?: LayoutType) => { if (format.design === ArticleDesign.Gallery) { return css` ${decideMobileHeadlineFont(format)} @@ -132,6 +132,17 @@ const headlineFont = (format: ArticleFormat) => { } `; } + if ( + layoutType === 'immersivePortraitDefault' || + layoutType === 'immersivePortraitFeature' + ) { + return css` + ${decideMobileHeadlineFont(format)} + ${from.leftCol} { + ${decideHeadlineFont(format)} + } + `; + } return css` ${decideMobileHeadlineFont(format)} ${from.tablet} { @@ -292,6 +303,45 @@ const gridHeadlineText = css` color: ${themePalette('--immersive-grid-headline-colour')}; `; +/** Headline colour specific to the immersive portrait grid layout */ +const immersivePortraitHeadlineText = css` + color: ${themePalette('--immersive-portrait-headline-text')}; +`; + +const gridColumns = css` + ${from.desktop} { + grid-column: 1 / 6; + } + ${from.leftCol} { + grid-column: 1 / 7; + } + ${from.wide} { + grid-column: 1 / 8; + } +`; + +const displayGrid = css` + ${from.desktop} { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-gap: 0.25fr; + } + ${from.leftCol} { + grid-template-columns: repeat(7, 1fr); + } + ${from.wide} { + grid-template-columns: repeat(8, 1fr); + } +`; + +const paddingBottom = css` + padding-bottom: ${space[6]}px; + + ${from.desktop} { + padding-bottom: 0; + } +`; + const maxWidth = css` ${from.desktop} { max-width: 620px; @@ -488,6 +538,9 @@ export const ArticleHeadline = ({ starRating, }: Props) => { const isInverted = layoutType === 'immersiveLandscapeDefault'; + const isImmersivePortrait = + layoutType === 'immersivePortraitDefault' || + layoutType === 'immersivePortraitFeature'; const isLegacyImmersive = layoutType == null; switch (format.display) { case ArticleDisplay.Immersive: { @@ -568,20 +621,27 @@ export const ArticleHeadline = ({ ] : isInverted ? [invertedText, darkBackground] - : gridHeadlineText, + : isImmersivePortrait + ? immersivePortraitHeadlineText + : gridHeadlineText, + isImmersivePortrait && [ + displayGrid, + paddingBottom, + ], ]} > {headlineString} diff --git a/dotcom-rendering/src/components/ArticleMeta.web.tsx b/dotcom-rendering/src/components/ArticleMeta.web.tsx index e165c0b6636..11a0d277871 100644 --- a/dotcom-rendering/src/components/ArticleMeta.web.tsx +++ b/dotcom-rendering/src/components/ArticleMeta.web.tsx @@ -289,6 +289,22 @@ const metaNumbersExtrasLiveBlog = css` } `; +const borderTop = css` + border-top: 1px solid ${themePalette('--article-border')}; + + ${from.desktop} { + border-top: none; + } +`; + +const paddingTop = css` + padding-top: ${space[3]}px; + + ${from.leftCol} { + padding-top: 0; + } +`; + export const ArticleMeta = ({ branding, format, @@ -343,7 +359,11 @@ export const ArticleMeta = ({ className={ isInteractive ? interactiveLegacyClasses.metaContainer : '' } - css={metaContainer(format)} + css={[ + metaContainer(format), + isImmersiveGrid && borderTop, + isImmersiveGrid && paddingTop, + ]} >
{branding && ( diff --git a/dotcom-rendering/src/components/ArticleTitle.tsx b/dotcom-rendering/src/components/ArticleTitle.tsx index 78b1de7ce82..6b08bc1182f 100644 --- a/dotcom-rendering/src/components/ArticleTitle.tsx +++ b/dotcom-rendering/src/components/ArticleTitle.tsx @@ -7,6 +7,7 @@ import { ArticleDisplay, type ArticleFormat, } from '../lib/articleFormat'; +import { palette as themePalette } from '../palette'; import type { TagType } from '../types/tag'; import { SeriesSectionLink } from './SeriesSectionLink'; @@ -63,6 +64,21 @@ const galleryStyles = css` } `; +const immersivePortraitStyles = css` + ${from.leftCol} { + height: 100%; + justify-content: flex-end; + } +`; + +const immersivePortraitSeriesSectionWrapperStyles = css` + padding: 3px 6px 4px; + margin-bottom: 0; + background-color: ${themePalette('--immersive-portrait-title-background')}; + width: fit-content; + min-width: unset; +`; + export const ArticleTitle = ({ format, layoutType, @@ -77,6 +93,9 @@ export const ArticleTitle = ({ [ArticleDesign.Gallery, ArticleDesign.HostedGallery].includes( format.design, ) && galleryStyles, + (layoutType === 'immersivePortraitDefault' || + layoutType === 'immersivePortraitFeature') && + immersivePortraitStyles, sectionStyles, ]} > @@ -85,7 +104,13 @@ export const ArticleTitle = ({ format.display === ArticleDisplay.Immersive ? layoutType == null ? legacyImmersiveMargins - : immersiveGridMargins + : layoutType === 'immersivePortraitDefault' || + layoutType === 'immersivePortraitFeature' + ? [ + immersiveGridMargins, + immersivePortraitSeriesSectionWrapperStyles, + ] + : immersiveGridMargins : undefined } > diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx index 2a2c70ede75..8c4cf783e76 100644 --- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx +++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx @@ -285,8 +285,12 @@ export const StandardLayoutArticleGrid = ({ `, isImmersivePortrait && css` - align-self: end; - margin-bottom: 2px; + ${from.desktop} { + margin: auto 0 0; + } + ${from.leftCol} { + margin: 0; + } `, ]} > diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index e7fee10daec..88f10d170dc 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -182,7 +182,7 @@ const immersivePortraitDefaultCss: LayoutCssMap = { standfirst: { mobile: 'grid-row: 4;', tablet: 'grid-row: 4;', - desktop: `grid-row: 3; ${grid.between('centre-column-start', 7)};`, + desktop: `grid-row: 3; ${grid.between('centre-column-start', 8)};`, leftCol: `grid-row: 3; ${grid.between('centre-column-start', 8)};`, wide: `grid-row: 3; ${grid.between('centre-column-start', 9)};`, }, @@ -231,7 +231,7 @@ const immersivePortraitFeatureCss: LayoutCssMap = { standfirst: { mobile: 'grid-row: 4;', tablet: 'grid-row: 4;', - desktop: `grid-row: 3; ${grid.between('centre-column-start', 7)};`, + desktop: `grid-row: 3; ${grid.between('centre-column-start', 8)};`, leftCol: `grid-row: 3; ${grid.between('centre-column-start', 8)};`, wide: `grid-row: 3; ${grid.between('centre-column-start', 9)};`, }, diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts index 01a0a040eb6..71b651778e9 100644 --- a/dotcom-rendering/src/paletteDeclarations.ts +++ b/dotcom-rendering/src/paletteDeclarations.ts @@ -218,6 +218,40 @@ const immersiveGridHeadlineTextLight: PaletteFunction = () => const immersiveGridHeadlineTextDark: PaletteFunction = () => sourcePalette.neutral[97]; +/** Headline colour for the immersive portrait grid layout specifically */ +const immersivePortraitHeadlineLight: PaletteFunction = () => + sourcePalette.neutral[0]; + +const immersivePortraitHeadlineDark: PaletteFunction = () => + sourcePalette.neutral[100]; + +/** Background for the series/section label on the immersive portrait grid layout */ +const immersivePortraitTitleBackgroundLight: PaletteFunction = (format) => { + switch (format.theme) { + case Pillar.News: + case Pillar.Opinion: + case Pillar.Sport: + case Pillar.Lifestyle: + case Pillar.Culture: + return pillarPalette(format.theme, 400); + default: + return sourcePalette.neutral[100]; + } +}; + +const immersivePortraitTitleBackgroundDark: PaletteFunction = (format) => { + switch (format.theme) { + case Pillar.News: + case Pillar.Opinion: + case Pillar.Sport: + case Pillar.Lifestyle: + case Pillar.Culture: + return pillarPalette(format.theme, 500); + default: + return sourcePalette.neutral[7]; + } +}; + const headlineBackgroundLight: PaletteFunction = ({ display, design, @@ -7575,6 +7609,14 @@ const paletteColours = { light: immersiveGridHeadlineTextLight, dark: immersiveGridHeadlineTextDark, }, + '--immersive-portrait-headline-text': { + light: immersivePortraitHeadlineLight, + dark: immersivePortraitHeadlineDark, + }, + '--immersive-portrait-title-background': { + light: immersivePortraitTitleBackgroundLight, + dark: immersivePortraitTitleBackgroundDark, + }, '--interactive-atom-background': { light: interactiveAtomBackgroundLight, dark: interactiveAtomBackgroundDark,