Portrait layout

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 };