Rough first pass

Author: frederickobrien

dotcom-rendering/src/layouts/StandardLayout.tsx

@@ -171,7 +171,8 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 
 	const renderAds = canRenderAds(article);
 
-	const layoutType: LayoutType = isMedia ? 'media' : 'standard';
+	// TODO: Determine layout type based on article properties
+	const layoutType: LayoutType = 'portrait';
 
 	return (
 		<>
@@ -258,8 +259,15 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 						`,
 						grid.container,
 						grid.verticalRules({
-							centre: isLabs ? false : true,
+							centre:
+								isLabs || layoutType === 'portrait'
+									? false
+									: true,
 						}),
+						layoutType === 'portrait' &&
+							css`
+								grid-template-rows: 0.25fr 1fr auto;
+							`,
 					]}
 				>
 					<GridItem area="main-media" layoutType={layoutType}>
@@ -318,18 +326,20 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 						layoutType={layoutType}
 						element="aside"
 					>
-						<div css={stretchLines}>
-							{isWeb &&
-							format.theme === ArticleSpecial.Labs &&
-							format.design !== ArticleDesign.Video ? (
-								<GuardianLabsLines />
-							) : (
-								<DecideLines
-									format={format}
-									color={themePalette('--article-border')}
-								/>
-							)}
-						</div>
+						{layoutType !== 'portrait' && (
+							<div css={stretchLines}>
+								{isWeb &&
+								format.theme === ArticleSpecial.Labs &&
+								format.design !== ArticleDesign.Video ? (
+									<GuardianLabsLines />
+								) : (
+									<DecideLines
+										format={format}
+										color={themePalette('--article-border')}
+									/>
+								)}
+							</div>
+						)}
 						{isApps ? (
 							<>
 								<Hide from="leftCol">

dotcom-rendering/src/layouts/lib/furnitureArrangements.ts

@@ -1,7 +1,7 @@
 import { css, type SerializedStyles } from '@emotion/react';
 import { from, until } from '@guardian/source/foundations';
 
-export type LayoutType = 'standard' | 'media';
+export type LayoutType = 'standard' | 'media' | 'portrait';
 
 export type Area =
 	| 'title'
@@ -106,9 +106,37 @@ const mediaCss: LayoutCssMap = {
 	},
 };
 
+const portraitCss: LayoutCssMap = {
+	title: {
+		mobile: 'grid-row: 1;',
+		leftCol: 'grid-row: 1; grid-column: left-column-start / 9;',
+	},
+	headline: {
+		mobile: 'grid-row: 2;',
+		leftCol: 'grid-row: 2; grid-column: left-column-start / 9;',
+	},
+	'main-media': {
+		mobile: 'grid-row: 3;',
+		leftCol: 'grid-row: 1 / span 3; grid-column: 10 / right-column-end;',
+	},
+	standfirst: {
+		mobile: 'grid-row: 4;',
+		leftCol: 'grid-row: 3; grid-column: centre-column-start / 9;',
+	},
+	meta: {
+		mobile: 'grid-row: 5;',
+		leftCol:
+			'grid-row: 3; grid-column: left-column-start / left-column-end;',
+	},
+	body: {
+		mobile: 'grid-row: 6;',
+	},
+};
+
 const layoutCssMaps: Record<LayoutType, LayoutCssMap> = {
 	standard: standardCss,
 	media: mediaCss,
+	portrait: portraitCss,
 };
 
 /**