diff --git a/site/css/grid.scss b/site/css/grid.scss index 98c90e484c6..7ef6d82772e 100644 --- a/site/css/grid.scss +++ b/site/css/grid.scss @@ -157,3 +157,14 @@ $grid-responsive: (lg, md, sm); } } } + +// Custom helpers +.grid-row-start-2 { + grid-row-start: 2; +} + +.grid-md-row-start-auto { + @include breakpoint-max(md) { + grid-row-start: auto; + } +} diff --git a/site/gdocs/components/ArticleBlock.tsx b/site/gdocs/components/ArticleBlock.tsx index 4318807642b..564e04d5c23 100644 --- a/site/gdocs/components/ArticleBlock.tsx +++ b/site/gdocs/components/ArticleBlock.tsx @@ -8,7 +8,7 @@ import PullQuote from "./PullQuote.js" import Recirc from "./Recirc.js" import List from "./List.js" import NumberedList from "./NumberedList.js" -import Image from "./Image.js" +import Image, { ImageParentContainer } from "./Image.js" import { get, OwidEnrichedGdocBlock, @@ -46,6 +46,7 @@ import { Socials } from "./Socials.js" export type Container = | "default" | "sticky-right-left-column" + | "sticky-right-left-heading-column" | "sticky-right-right-column" | "sticky-left-left-column" | "sticky-left-right-column" @@ -124,6 +125,9 @@ const layouts: { [key in Container]: Layouts} = { ["default"]: "span-cols-5 col-start-1 span-md-cols-12", ["prominent-link"]: "grid grid-cols-5 span-cols-5 span-md-cols-10 grid-md-cols-10 span-sm-cols-12 grid-sm-cols-12", }, + ["sticky-right-left-heading-column"]: { + ["default"]: "span-cols-5 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1" + }, ["sticky-right-right-column"]: { ["chart"]: "span-cols-7 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1", ["explorer"]: "span-cols-7 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1", @@ -255,7 +259,7 @@ export default function ArticleBlock({ smallFilename={block.smallFilename} alt={block.alt} hasOutline={block.hasOutline} - containerType={containerType} + containerType={containerType as ImageParentContainer} /> {block.caption ? (
)) - .with({ type: "sticky-right" }, (block) => ( -
-
- {block.left.map((item, i) => ( + .with({ type: "sticky-right" }, (block) => { + const firstBlock = block.left[0] + let separateHeading = null + let left = block.left + if ( + firstBlock?.type === "heading" && + block.right[0]?.type !== "chart-story" + ) { + separateHeading = firstBlock + left = block.left.slice(1) + } + return ( +
+ {separateHeading && ( - ))} -
-
-
- {block.right.map((item, i) => ( +
+ {left.map((item, i) => ( ))}
+
+
+ {block.right.map((item, i) => ( + + ))} +
+
-
- )) + ) + }) .with({ type: "sticky-left" }, (block) => (
| "thumbnail" | "full-width" | "span-5"