Portrait layout

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -27,7 +27,6 @@ import {
 	ArticleSpecial,
 	Pillar,
 } from '../lib/articleFormat';
-import { getZIndex } from '../lib/getZIndex';
 import { palette as themePalette } from '../palette';
 import type { StarRating as Rating } from '../types/content';
 import type { TagType } from '../types/tag';
@@ -45,6 +44,7 @@ type Props = {
 	hasAvatar?: boolean;
 	isMatch?: boolean;
 	starRating?: Rating;
+	isInverted?: boolean;
 };
 
 const topPadding = css`
@@ -205,30 +205,20 @@ const invertedStyles = css`
 	box-decoration-break: clone;
 `;
 
-const immersiveStyles = css`
-	min-height: 112px;
-	padding-bottom: ${space[6]}px;
-	padding-left: ${space[1]}px;
-
-	${from.mobileLandscape} {
-		padding-left: ${space[3]}px;
-	}
-
-	${from.tablet} {
-		padding-left: ${space[1]}px;
-	}
-
-	margin-right: ${space[5]}px;
-`;
-
 const darkBackground = css`
 	background-color: ${themePalette('--headline-background')};
 `;
 
 const invertedText = css`
-	white-space: pre-wrap;
-	padding-bottom: ${space[1]}px;
-	padding-right: ${space[1]}px;
+	${from.desktop} {
+		color: white;
+		background-color: black;
+		white-space: pre-wrap;
+		padding-bottom: ${space[1]}px;
+		padding-right: ${space[1]}px;
+		margin-left: -10px;
+		padding-left: 10px;
+	}
 `;
 
 const maxWidth = css`
@@ -246,35 +236,6 @@ const invertedWrapper = css`
 	margin-left: 6px;
 `;
 
-const immersiveWrapper = css`
-	/*
-        Make sure we vertically align the headline font with the body font
-    */
-	margin-left: 6px;
-
-	${from.tablet} {
-		margin-left: 16px;
-	}
-
-	${from.leftCol} {
-		margin-left: 25px;
-	}
-
-	/*
-        We need this grow to ensure the headline fills the main content column
-    */
-	flex-grow: 1;
-	/*
-        This z-index is what ensures the headline text shows above the pseudo black
-        box that extends the black background to the right
-    */
-	z-index: ${getZIndex('articleHeadline')};
-
-	${until.mobileLandscape} {
-		margin-right: 40px;
-	}
-`;
-
 // Due to MainMedia using position: relative, this seems to effect the rendering order
 // To mitigate we use z-index
 // TODO: find a cleaner solution
@@ -283,59 +244,58 @@ const zIndex = css`
 `;
 
 const ageWarningMargins = (format: ArticleFormat) => {
-	if (format.design === ArticleDesign.Gallery) {
+	if (
+		format.design === ArticleDesign.Gallery ||
+		format.display === ArticleDisplay.Immersive
+	) {
 		return '';
 	}
-	return format.display === ArticleDisplay.Immersive
-		? css`
-				margin-left: 0px;
-				margin-bottom: 0px;
-
-				${from.tablet} {
-					margin-left: 10px;
-				}
+	return css`
+		margin-top: 12px;
+		margin-left: -10px;
+		margin-bottom: 6px;
 
-				${from.leftCol} {
-					margin-left: 20px;
-				}
-		  `
-		: css`
-				margin-top: 12px;
-				margin-left: -10px;
-				margin-bottom: 6px;
-
-				${from.tablet} {
-					margin-left: -20px;
-				}
+		${from.tablet} {
+			margin-left: -20px;
+		}
 
-				${from.leftCol} {
-					margin-left: -10px;
-					margin-top: 0;
-				}
-		  `;
+		${from.leftCol} {
+			margin-left: -10px;
+			margin-top: 0;
+		}
+	`;
 };
 
-const backgroundStyles = css`
-	background-color: ${themePalette('--age-warning-wrapper-background')};
-`;
-
 const WithAgeWarning = ({
 	tags,
 	webPublicationDateDeprecated,
 	format,
 	children,
+	snapToInverted = false,
 }: {
 	tags: TagType[];
 	webPublicationDateDeprecated: string;
 	format: ArticleFormat;
 	children: React.ReactNode;
+	snapToInverted?: boolean;
 }) => {
 	const age = getAgeWarning(tags, webPublicationDateDeprecated);
 
 	if (age) {
 		return (
 			<>
-				<div css={[backgroundStyles, ageWarningMargins(format)]}>
+				<div
+					css={[
+						ageWarningMargins(format),
+						snapToInverted
+							? css`
+									${from.desktop} {
+										margin-left: -10px;
+									}
+							  `
+							: '',
+					]}
+				>
 					<AgeWarning age={age} />
 				</div>
 				{children}
@@ -430,6 +390,7 @@ export const ArticleHeadline = ({
 	hasAvatar,
 	isMatch,
 	starRating,
+	isInverted = false,
 }: Props) => {
 	switch (format.display) {
 		case ArticleDisplay.Immersive: {
@@ -456,12 +417,13 @@ export const ArticleHeadline = ({
 										format.theme === ArticleSpecial.Labs
 											? labsFont
 											: headlineFont(format),
-										invertedText,
-										css`
-											color: ${themePalette(
-												'--headline-colour',
-											)};
-										`,
+										isInverted
+											? [invertedText, darkBackground]
+											: css`
+													color: ${themePalette(
+														'--headline-colour',
+													)};
+											  `,
 									]}
 								>
 									{headlineString}
@@ -487,16 +449,17 @@ export const ArticleHeadline = ({
 								webPublicationDateDeprecated
 							}
 							format={format}
+							snapToInverted={true}
 						>
 							<h1
 								css={[
-									immersiveWrapper,
-									darkBackground,
-									css`
-										color: ${themePalette(
-											'--headline-colour',
-										)};
-									`,
+									isInverted
+										? [invertedText, darkBackground]
+										: css`
+												color: ${themePalette(
+													'--headline-colour',
+												)};
+										  `,
 								]}
 							>
 								<span
@@ -505,8 +468,6 @@ export const ArticleHeadline = ({
 											? jumboLabsFont
 											: headlineFont(format),
 										maxWidth,
-										invertedStyles,
-										immersiveStyles,
 										displayBlock,
 									]}
 								>

dotcom-rendering/src/components/Standfirst.tsx

@@ -264,7 +264,6 @@ const standfirstStyles = ({ display, design, theme }: ArticleFormat) => {
 					`;
 				default:
 					return css`
-						max-width: 280px;
 						${from.tablet} {
 							max-width: 460px;
 						}

dotcom-rendering/src/grid.ts

@@ -88,35 +88,55 @@ const paddedContainer = `
 // ----- Vertical Rules ----- //
 
 type VerticalRuleOptions = {
-	centre?: boolean;
+	plusChild?: number;
 };
 
 /**
  * Render Guardian grid vertical rules.
  *
  * Left and right rules are always present.
- * A centre rule can optionally be enabled.
+ * A centre rule can optionally be enabled, anchored to the top of the first
+ * child by default, or to the nth child if a number is passed.
  *
  * Usage:
  * css([grid.container, grid.verticalRules()])
  * css([grid.container, grid.verticalRules({ centre: true })])
+ * css([grid.container, grid.verticalRules({ centre: 3 })])
  */
-const optionalCentreRule = `/* CENTRE RULE */
-    & > *:first-child::before {
-      grid-column: centre-column-start;
-      transform: translateX(-${columnGap});
-	  ${fromBreakpoint.leftCol} {
-		transform: translateX(calc(-${columnGap} / 2));
-	  }
+
+// The centre rule is self-contained on the nth child element rather than on
+// the grid container, so that `top: 0` aligns to that element's top edge.
+// `bottom` uses a large negative value to extend the rule down to the
+// container's bottom; ensure `overflow: hidden` is set on the container
+const optionalCentreRule = (nth: number): string => `/* CENTRE RULE */
+    & > *:nth-child(${nth}) {
+      position: relative;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        bottom: -9999px;
+        width: 1px;
+        background-color: ${palette('--article-border')};
+        content: '';
+        grid-column: centre-column-start;
+        transform: translateX(-${columnGap});
+
+        ${fromBreakpoint.leftCol} {
+          transform: translateX(calc(-${columnGap} / 2));
+        }
+      }
     }`;
 
-const verticalRules = (options: VerticalRuleOptions = {}): string => `
+const verticalRules = (options: VerticalRuleOptions = {}): string => {
+	const { plusChild: centreChild } = options;
+
+	return `
   ${fromBreakpoint.tablet} {
     position: relative;
 
     &::before,
-    &::after
-    ${options.centre ? ', & > *:first-child::before' : ''} {
+    &::after {
       position: absolute;
       top: 0;
       bottom: 0;
@@ -145,8 +165,9 @@ const verticalRules = (options: VerticalRuleOptions = {}): string => `
       }
     }
 
-    ${options.centre ? optionalCentreRule : ''}
-`;
+    ${centreChild !== undefined ? optionalCentreRule(centreChild) : ''}
+  }`;
+};
 
 // ----- API ----- //
 
@@ -251,6 +272,10 @@ const grid = {
 	verticalRules,
 } as const;
 
+// ----- Types ----- //
+type ColumnPreset = keyof typeof grid.column;
+
 // ----- Exports ----- //
 
+export type { Line, ColumnPreset };
 export { grid };

dotcom-rendering/src/layouts/DecideLayout.tsx

@@ -10,7 +10,6 @@ import { GalleryLayout } from './GalleryLayout';
 import { HostedArticleLayout } from './HostedArticleLayout';
 import { HostedGalleryLayout } from './HostedGalleryLayout';
 import { HostedVideoLayout } from './HostedVideoLayout';
-import { ImmersiveLayout } from './ImmersiveLayout';
 import { InteractiveLayout } from './InteractiveLayout';
 import { LiveLayout } from './LiveLayout';
 import { NewsletterSignupLayout } from './NewsletterSignupLayout';
@@ -58,7 +57,7 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => {
 				}
 				default: {
 					return (
-						<ImmersiveLayout
+						<StandardLayout
 							article={article.frontendData}
 							format={format}
 							renderingTarget={renderingTarget}
@@ -237,7 +236,7 @@ const DecideLayoutWeb = ({ article, NAV, renderingTarget }: WebProps) => {
 				}
 				default: {
 					return (
-						<ImmersiveLayout
+						<StandardLayout
 							article={article.frontendData}
 							format={format}
 							NAV={NAV}