From 595432cac026f3ac6ebd0f2f546780f2f273b04f Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Sat, 10 Oct 2026 22:43:24 +0100 Subject: [PATCH] Immersive landscape tablet layout and main media blur refactor --- .../src/components/ArticleHeadline.tsx | 19 ++++-- dotcom-rendering/src/components/Figure.tsx | 2 +- .../src/components/SeriesSectionLink.tsx | 23 ++++++++ .../src/layouts/StandardLayoutArticleGrid.tsx | 59 +++++++------------ .../src/layouts/lib/articleArrangements.ts | 24 ++++---- 5 files changed, 72 insertions(+), 55 deletions(-) diff --git a/dotcom-rendering/src/components/ArticleHeadline.tsx b/dotcom-rendering/src/components/ArticleHeadline.tsx index c2334546810..581e4837e5f 100644 --- a/dotcom-rendering/src/components/ArticleHeadline.tsx +++ b/dotcom-rendering/src/components/ArticleHeadline.tsx @@ -271,21 +271,27 @@ const darkBackground = css` `; const immersiveDarkBackground = css` - background-color: ${themePalette('--headline-background-immersive')}; - ${from.desktop} { + ${from.tablet} { + background-color: ${themePalette('--headline-background-immersive')}; + } + ${from.tablet} { padding-bottom: ${space[6]}px; } `; const invertedText = css` color: white; - background-color: black; white-space: pre-wrap; padding-bottom: ${space[1]}px; padding-left: 12px; padding-right: 18px; - ${from.desktop} { + ${from.tablet} { + margin-left: -20px; + padding-left: 20px; + } + + ${from.leftCol} { margin-left: -10px; padding-left: 10px; padding-right: ${space[1]}px; @@ -427,7 +433,10 @@ const WithAgeWarning = ({ `, snapToInverted && !isLegacyImmersive ? css` - ${from.desktop} { + ${from.tablet} { + margin-left: -20px; + } + ${from.leftCol} { margin-left: -10px; } ` diff --git a/dotcom-rendering/src/components/Figure.tsx b/dotcom-rendering/src/components/Figure.tsx index 8aa12616efa..93519df2d1e 100644 --- a/dotcom-rendering/src/components/Figure.tsx +++ b/dotcom-rendering/src/components/Figure.tsx @@ -284,7 +284,7 @@ const mainMediaFigureStyles = ( height: 100%; ${isImmersiveLandscape && css` - ${from.desktop} { + ${from.tablet} { height: calc(100vh - ${navAndLabsHeaderHeight}); min-height: calc(31.25rem - ${navAndLabsHeaderHeight}); } diff --git a/dotcom-rendering/src/components/SeriesSectionLink.tsx b/dotcom-rendering/src/components/SeriesSectionLink.tsx index fca69059b3a..3af813da98b 100644 --- a/dotcom-rendering/src/components/SeriesSectionLink.tsx +++ b/dotcom-rendering/src/components/SeriesSectionLink.tsx @@ -198,6 +198,27 @@ const immersiveGridTitleBelowDesktop = css` } `; +const immersiveLandscapeTitle = css` + ${from.tablet} { + margin-left: -29px; + } + ${from.desktop} { + margin-left: -10px; + } + ${from.leftCol} { + margin-left: 0; + } + + span { + ${from.tablet} { + padding-left: 10px; + } + ${from.leftCol} { + padding-left: 0; + } + } +`; + const immersiveGridTitleWrapperBelowDesktop = css` ${until.desktop} { padding-left: 9px; @@ -381,6 +402,8 @@ export const SeriesSectionLink = ({ format.display === ArticleDisplay.Immersive && layoutType !== undefined && immersiveGridTitleBelowDesktop, + layoutType === 'immersiveLandscape' && + immersiveLandscapeTitle, format.design === ArticleDesign.Gallery && css` position: relative; diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx index 6fed5f71084..443167139f4 100644 --- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx +++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx @@ -60,45 +60,37 @@ const stretchLines = css` } `; -const immersiveMediaBelowDesktop = ( - headlineBackground: string, - isMainMediaImage: boolean, - hasMinimumImageHeight: boolean, -) => css` +const immersiveMediaBelowDesktop = css` ${until.tablet} { - aspect-ratio: 4 / 5; - } - ${until.desktop} { position: relative; + aspect-ratio: 4 / 5; + overflow: hidden; > div { height: 100%; } - ${!isMainMediaImage && 'overflow: hidden;'} - &::after { content: ''; position: absolute; left: 0; right: 0; - bottom: ${hasMinimumImageHeight ? '-1px' : '0'}; - height: ${hasMinimumImageHeight - ? '180px' - : isMainMediaImage - ? 'min(20%, calc(200% - 120vw + 30px))' - : 'min(60%, 144px)'}; + bottom: 0; + height: 250px; z-index: ${getZIndex('mediaOverlay')}; - background: linear-gradient( - to bottom, - rgba(0, 0, 0, ${hasMinimumImageHeight ? '0' : '0.08'}), - ${headlineBackground} ${hasMinimumImageHeight ? '100%' : '72%'} - ); + background: linear-gradient(180deg, #1a1a1a00, #1a1a1a 120px 100%); backdrop-filter: blur(12px); mask-image: linear-gradient( - to bottom, - transparent ${hasMinimumImageHeight ? '0%' : '40%'}, - black 60% + 180deg, + #1a1a1a00, + #1a1a1a0a, + #1a1a1a25, + #1a1a1a4f, + #1a1a1a80, + #1a1a1ab0, + #1a1a1ada, + #1a1a1af5 56px, + #1a1a1a 70px ); pointer-events: none; } @@ -323,7 +315,7 @@ export const StandardLayoutArticleGrid = ({ css={[ isImmersive ? css` - ${from.desktop} { + ${from.tablet} { align-self: start; ${mainMediaAspectRatio != null && `aspect-ratio: ${mainMediaAspectRatio.replace(':', ' / ')};`} @@ -337,15 +329,11 @@ export const StandardLayoutArticleGrid = ({ aspect-ratio: 4/5; `} - ${immersiveMediaBelowDesktop( - headlineBackgroundImmersive, - isMainMediaImage, - hasMinimumImageHeight, - )} + ${immersiveMediaBelowDesktop} ${hasMinimumImageHeight && css` - ${until.desktop} { + ${until.tablet} { position: relative; width: 100%; min-width: 0; @@ -405,10 +393,6 @@ export const StandardLayoutArticleGrid = ({ isImmersive && css` z-index: ${getZIndex('articleHeadline')}; - - ${until.desktop} { - padding-bottom: ${space[2]}px; - } `, layoutType === 'immersivePortrait' && css` @@ -446,9 +430,6 @@ export const StandardLayoutArticleGrid = ({ z-index: ${getZIndex('articleHeadline')}; ${until.desktop} { - margin-top: -3px; - background-color: ${headlineBackgroundImmersive}; - padding-top: 1px; padding-bottom: ${space[8]}px; } `, @@ -524,7 +505,7 @@ export const StandardLayoutArticleGrid = ({ css={[ isImmersive && css` - ${until.desktop} { + ${until.tablet} { padding-top: ${space[2]}px; } `, diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index a6268a5a5db..b2ffe72f5dc 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -321,34 +321,38 @@ const immersivePortraitCss: LayoutCssMap = { const immersiveLandscapeCss: LayoutCssMap = { title: { - belowDesktop: `${grid.column.all} grid-row: 2; align-self: end;`, + mobile: `${grid.column.all} grid-row: 2; align-self: end;`, + tablet: `grid-row: 2; ${grid.between('centre-column-start', 'centre-column-end')};`, desktop: 'grid-row: 2;', }, headline: { - belowDesktop: `${grid.column.all} grid-row: 3;`, + mobile: `${grid.column.all} grid-row: 3;`, + tablet: `grid-row: 3 / span 2; ${grid.between('centre-column-start', 'centre-column-end')};`, desktop: 'grid-row: 3 / span 2;', wide: `${grid.between('centre-column-start', 14)};`, }, media: { - belowDesktop: `${grid.column.all} grid-row: 1 / span 2;`, + mobile: `${grid.column.all} grid-row: 1 / span 3;`, + tablet: `grid-row: 1 / span 3; ${grid.between('centre-column-start', 'centre-column-end')};`, desktop: `grid-row: 1 / span 3; ${grid.between('centre-column-start', 'right-column-end')};`, leftCol: `grid-row: 1 / span 3; ${grid.between('left-column-start', 'right-column-end')};`, }, standfirst: { - belowDesktop: 'grid-row: 4;', - desktop: 'grid-row: 5;', + mobile: 'grid-row: 4;', + tablet: 'grid-row: 5;', }, caption: { - belowDesktop: 'grid-row: 5;', - desktop: 'grid-row: 6;', + mobile: 'grid-row: 5;', + tablet: 'grid-row: 6;', }, meta: { - belowDesktop: 'grid-row: 6;', - desktop: `grid-row: 7;`, + mobile: 'grid-row: 6;', + tablet: `grid-row: 7;`, leftCol: `grid-row: 5 / span 2; ${grid.column.left};`, }, body: { - belowDesktop: 'grid-row: 7;', + mobile: 'grid-row: 7;', + tablet: 'grid-row: 8;', leftCol: 'grid-row: 6;', }, 'right-column': {