fix header left padding and border

Author: marjisound

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import {
+	between,
 	from,
 	headlineBold28,
 	headlineBold34,
@@ -116,13 +117,24 @@ const decideMobileHeadlineFont = (format: ArticleFormat) => {
 	}
 };
 
-const headlineFont = (format: ArticleFormat) => css`
-	${decideMobileHeadlineFont(format)}
+const headlineFont = (format: ArticleFormat) => {
+	if (format.design === ArticleDesign.Gallery) {
+		return css`
+			${decideMobileHeadlineFont(format)}
 
-	${from.tablet} {
-		${decideHeadlineFont(format)}
+			${from.desktop} {
+				${decideHeadlineFont(format)}
+			}
+		`;
 	}
-`;
+	return css`
+		${decideMobileHeadlineFont(format)}
+
+		${from.tablet} {
+			${decideHeadlineFont(format)}
+		}
+	`;
+};
 
 const invertedFontLineHeight = css`
 	line-height: 2.1875rem;
@@ -371,6 +383,16 @@ const decideBottomPadding = ({
 	}
 };
 
+const galleryStyles = css`
+	${grid.between('centre-column-start', 'grid-end')};
+	grid-row: 7/9;
+
+	${until.tablet} {
+		${grid.column.all}
+		max-width: 620px;
+	}
+`;
+
 export const ArticleHeadline = ({
 	headlineString,
 	format,
@@ -825,15 +847,7 @@ export const ArticleHeadline = ({
 					);
 				case ArticleDesign.Gallery: {
 					return (
-						<div
-							css={[
-								darkBackground,
-								grid.between('centre-column-start', 'grid-end'),
-								css`
-									grid-row: 7/9;
-								`,
-							]}
-						>
+						<div css={galleryStyles}>
 							<WithAgeWarning
 								tags={tags}
 								webPublicationDateDeprecated={
@@ -850,9 +864,16 @@ export const ArticleHeadline = ({
 											color: ${themePalette(
 												'--headline-colour',
 											)};
+											${darkBackground};
+											min-height: 84px;
 											padding-bottom: ${space[6]}px;
 											padding-left: ${space[3]}px;
 											padding-right: ${space[3]}px;
+
+											${between.mobileLandscape.and
+												.tablet} {
+												padding-left: ${space[5]}px;
+											}
 										`,
 									]}
 								>

dotcom-rendering/src/components/ArticleMeta.web.tsx

@@ -190,9 +190,13 @@ export const metaContainer = (format: ArticleFormat) => {
 				case ArticleDesign.Gallery:
 					return css`
 						${grid.column.centre}
-						margin-bottom: ${space[3]}px;
-						margin-left: ${space[3]}px;
+						padding-bottom: ${space[3]}px;
+						padding-left: ${space[3]}px;
 						margin-right: ${space[3]}px;
+						${from.tablet} {
+							border-left: 1px solid
+								${themePalette('--article-border')};
+						}
 					`;
 				default:
 					return defaultMargins;

dotcom-rendering/src/components/ArticleTitle.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { from } from '@guardian/source/foundations';
+import { from, until } from '@guardian/source/foundations';
 import { grid } from '../../src/grid';
 import {
 	ArticleDesign,
@@ -47,6 +47,10 @@ const galleryStyles = css`
 	grid-row: 6/7;
 	max-width: 400px;
 	min-width: 200px;
+
+	${until.tablet} {
+		${grid.column.all}
+	}
 `;
 
 export const ArticleTitle = ({

dotcom-rendering/src/components/SeriesSectionLink.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import {
+	between,
 	from,
 	headlineBold17,
 	headlineBold20,
@@ -169,6 +170,10 @@ const sectionPadding = (design: ArticleDesign) => {
 	if (design === ArticleDesign.Gallery) {
 		return css`
 			padding: 0 ${space[2]}px 0 ${space[3]}px;
+
+			${between.mobileLandscape.and.tablet} {
+				padding-left: ${space[5]}px;
+			}
 		`;
 	}
 	return css`

dotcom-rendering/src/components/Standfirst.tsx

@@ -322,16 +322,19 @@ const standfirstStyles = ({ display, design, theme }: ArticleFormat) => {
 						color: ${palette('--standfirst-text')};
 						background-color: ${palette('--standfirst-background')};
 
+						padding-left: ${space[0]}px;
+						margin-right: ${space[3]}px;
+
 						${from.tablet} {
 							${grid.span('centre-column-start', 7)}
+							padding-left: 12px;
+							border-left: 1px solid
+								${palette('--article-border')};
 						}
 
 						${from.desktop} {
 							${grid.span('centre-column-start', 6)}
 						}
-						margin-bottom: ${space[3]}px;
-						margin-left: ${space[3]}px;
-						margin-right: ${space[3]}px;
 					`;
 				default:
 					switch (theme) {

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -1,5 +1,8 @@
 import { css } from '@emotion/react';
-import { from } from '@guardian/source/foundations';
+import {
+	between,
+	from,
+} from '@guardian/source/foundations';
 import { ArticleHeadline } from '../components/ArticleHeadline';
 import { ArticleMetaApps } from '../components/ArticleMeta.apps';
 import { ArticleMeta } from '../components/ArticleMeta.web';
@@ -39,6 +42,10 @@ const border = css({
 const headerStyles = css`
 	${grid.container}
 	background-color: ${palette('--article-inner-background')};
+
+	${from.tablet} {
+		border-bottom: 1px solid ${palette('--article-border')};
+	}
 `;
 
 export const GalleryLayout = (props: WebProps | AppProps) => {
@@ -158,16 +165,29 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 								${from.leftCol} {
 									${grid.column.left}
 								}
+								${between.tablet.and.leftCol} {
+									border-left: 1px solid
+										${palette('--article-border')};
+								}
+								${from.leftCol} {
+									position: relative; /* allows the ::after to be positioned relative to this */
+									&::after {
+										content: '';
+										position: absolute;
+										right: -21px;
+										top: 0;
+										bottom: 0;
+										width: 1px;
+										background-color: ${palette(
+											'--article-border',
+										)};
+									}
+								}
 							`,
 						]}
 					>
 						Main media caption
 					</div>
-					<div
-						css={[grid.between('centre-column-start', 'grid-end')]}
-					>
-						Meta
-					</div>
 				</header>
 				{gallery.images.map((element, idx) => (
 					<GalleryImage