Feature specific styling

Author: frederickobrien

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -44,7 +44,6 @@ type Props = {
 	hasAvatar?: boolean;
 	isMatch?: boolean;
 	starRating?: Rating;
-	isInverted?: boolean;
 };
 
 const topPadding = css`
@@ -390,8 +389,10 @@ export const ArticleHeadline = ({
 	hasAvatar,
 	isMatch,
 	starRating,
-	isInverted = false,
 }: Props) => {
+	const isInverted =
+		format.design === ArticleDesign.Standard &&
+		format.display === ArticleDisplay.Immersive;
 	switch (format.display) {
 		case ArticleDisplay.Immersive: {
 			switch (format.design) {

dotcom-rendering/src/components/Figure.tsx

@@ -1,6 +1,18 @@
 import { css } from '@emotion/react';
-import { breakpoints, from, space, until } from '@guardian/source/foundations';
-import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
+import {
+	breakpoints,
+	from,
+	palette as sourcePalette,
+	space,
+	until,
+} from '@guardian/source/foundations';
+import {
+	ArticleDesign,
+	ArticleDisplay,
+	type ArticleFormat,
+} from '../lib/articleFormat';
+import { transparentColour } from '../lib/transparentColour';
+import { palette } from '../palette';
 import type { FEElement, RoleType } from '../types/content';
 
 type Props = {
@@ -14,6 +26,32 @@ type Props = {
 	isTimeline?: boolean;
 };
 
+const overlayMaskGradientStyles = (angle: string) => css`
+	mask-image: linear-gradient(
+		${angle},
+		rgb(0, 0, 0) 0%,
+		rgba(0, 0, 0, 0.9619) 12.5%,
+		rgba(0, 0, 0, 0.8536) 25%,
+		rgba(0, 0, 0, 0.6913) 37.5%,
+		rgba(0, 0, 0, 0.5) 50%,
+		rgba(0, 0, 0, 0.3087) 62.5%,
+		rgba(0, 0, 0, 0.1464) 75%,
+		rgba(0, 0, 0, 0.0381) 87.5%,
+		transparent 100%
+	);
+`;
+
+const blurStyles = css`
+	position: absolute;
+	inset: 0;
+	background-color: ${palette('--article-background')};
+	backdrop-filter: blur(12px) brightness(0.5);
+	@supports not (backdrop-filter: blur(12px)) {
+		background-color: ${transparentColour(sourcePalette.neutral[10], 0.7)};
+	}
+	${overlayMaskGradientStyles('0deg')};
+`;
+
 const roleCss = {
 	inline: css`
 		margin-top: ${space[3]}px;
@@ -273,6 +311,17 @@ export const Figure = ({
 		return (
 			<figure id={id} key={id} css={mainMediaFigureStyles}>
 				{children}
+				{format.display === ArticleDisplay.Immersive && (
+					<div
+						css={[
+							blurStyles,
+							css`
+								height: 40%;
+								top: 60%;
+							`,
+						]}
+					/>
+				)}
 			</figure>
 		);
 	}

dotcom-rendering/src/components/MainMedia.tsx

@@ -12,6 +12,7 @@ import type { ServerSideTests, Switches } from '../types/config';
 import type { FEElement } from '../types/content';
 
 const mainMedia = css`
+	position: relative;
 	height: 100%;
 
 	${until.tablet} {

dotcom-rendering/src/grid.ts

@@ -159,6 +159,7 @@ const outerRules = (color?: string): string => `
     &::before {
       grid-column: centre-column-start;
       transform: translateX(-${columnGap});
+	  z-index: 10;
 
       ${fromBreakpoint.leftCol} {
         grid-column: left-column-start;
@@ -169,6 +170,7 @@ const outerRules = (color?: string): string => `
     &::after {
       grid-column: right-column-end;
       transform: translateX(-1px);
+      z-index: 10;
 
       ${betweenBreakpoint.tablet.and.desktop} {
         grid-column: centre-column-end;

dotcom-rendering/src/layouts/StandardLayout.tsx

@@ -282,7 +282,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 				<AdSlot position="survey" display={format.display} />
 			)}
 
-			<main data-layout="StandardLayout">
+			<main data-layout={`${ArticleDisplay[format.display]}Layout`}>
 				{isApps && renderAds && (
 					<Island priority="critical">
 						<AdPortals />
@@ -356,7 +356,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							hideCaption={isMedia}
 							shouldHideAds={article.shouldHideAds}
 							contentType={article.contentType}
-							contentLayout="StandardLayout"
+							contentLayout={`${ArticleDisplay[format.display]}Layout`}
 						/>
 					</GridItem>
 					<GridItem
@@ -407,7 +407,6 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 								article.webPublicationDateDeprecated
 							}
 							starRating={article.starRating}
-							isInverted={layoutType === 'immersiveLandscape'}
 						/>
 					</GridItem>
 					<GridItem area="standfirst" layoutType={layoutType}>