Upgrade spacing options in split-view

src/back/jdd-components/background-wrapper/background-wrapper.css

@@ -1,4 +1,5 @@
 .background-wrapper {
+	width: 100%;
 	grid-column: screen;
 	display: grid;
 	grid-template-columns: subgrid;
@@ -10,6 +11,10 @@
 		padding: 0;
 	}
 
+	&.background-wrapper--big-padding-yes {
+		padding: 64px;
+	}
+
 	& > * {
 		grid-column: content;
 	}

src/back/jdd-components/background-wrapper/background-wrapper.jdd.tsx

@@ -12,6 +12,7 @@ const component_arguments = {
 	variant: new ComponentArguments.Enum(background_variants),
 	grow_to_screen_height: new ComponentArguments.Boolean(),
 	padding: new ComponentArguments.Boolean(),
+	big_padding: new ComponentArguments.Boolean(),
 	margin: new ComponentArguments.Boolean(),
 	content: new ComponentArguments.NestedComponent(),
 } as const;
@@ -30,7 +31,7 @@ export class BackgroundWrapper extends Component<typeof component_arguments> {
 	}
 
 	async toHTML({
-		args: { variant, content, grow_to_screen_height, padding, margin },
+		args: { variant, content, grow_to_screen_height, padding, margin, big_padding },
 		classes,
 		jdd_context,
 	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
@@ -40,6 +41,7 @@ export class BackgroundWrapper extends Component<typeof component_arguments> {
 					"background-wrapper",
 					`background-wrapper--${variant}`,
 					`background-wrapper--padding-${padding ? "yes" : "no"}`,
+					`background-wrapper--big-padding-${big_padding ? "yes" : "no"}`,
 					{
 						"background-wrapper--grow-height": grow_to_screen_height,
 						"jdd-no-gap": !margin,

src/back/jdd-components/split-view/split-view.css

@@ -1,6 +1,5 @@
 .split-view {
 	width: 100%;
-	border: 1px solid red;
 
 	display: grid;
 	grid-template-columns: subgrid;
@@ -20,8 +19,79 @@
 		align-items: center;
 		justify-content: center;
 
+		&:nth-child(1) {
+			grid-column-start: left-half-start;
+			grid-column-end: left-half-end;
+		}
+
 		&:nth-child(2) {
-			grid-column: right-half;
+			grid-column-start: right-half-start;
+			grid-column-end: right-half-end;
 		}
 	}
+
+	&.split-view--without-column-gap {
+		.split-view__half {
+			&:nth-child(1) {
+				grid-column-end: center;
+			}
+
+			&:nth-child(2) {
+				grid-column-start: center;
+			}
+		}
+	}
+
+	&.split-view--bleed--bleed {
+		grid-column: bleed;
+		.split-view__half {
+			&:nth-child(1) {
+				grid-column-start: bleed-start;
+			}
+
+			&:nth-child(2) {
+				grid-column-end: bleed-end;
+			}
+		}
+	}
+
+	&.split-view--bleed-left--screen {
+		grid-column-start: screen-start;
+		.split-view__half {
+			&:nth-child(1) {
+				grid-column-start: screen-start;
+			}
+		}
+	}
+
+	&.split-view--bleed-right--screen {
+		grid-column-end: screen-end;
+		.split-view__half {
+			&:nth-child(2) {
+				grid-column-end: screen-end;
+			}
+		}
+	}
+
+	&.split-view--bleed-left--bleed {
+		grid-column-start: bleed-start;
+		.split-view__half {
+			&:nth-child(1) {
+				grid-column-start: bleed-start;
+			}
+		}
+	}
+
+	&.split-view--bleed-right--bleed {
+		grid-column-end: bleed-end;
+		.split-view__half {
+			&:nth-child(2) {
+				grid-column-end: bleed-end;
+			}
+		}
+	}
+
+	&.split-view--without-row-gap {
+		row-gap: 0;
+	}
 }

src/back/jdd-components/split-view/split-view.jdd.tsx

@@ -7,6 +7,10 @@ import type {
 import { Component, ComponentArguments } from "@sealcode/jdd";
 
 const component_arguments = {
+	bleed_left: new ComponentArguments.Enum(["none", "bleed", "screen"]),
+	bleed_right: new ComponentArguments.Enum(["none", "bleed", "screen"]),
+	column_gap: new ComponentArguments.Boolean(),
+	row_gap: new ComponentArguments.Boolean(),
 	component1: new ComponentArguments.NestedComponent(),
 	component2: new ComponentArguments.NestedComponent(),
 } as const;
@@ -28,12 +32,22 @@ export class SplitView extends Component<typeof component_arguments> {
 	}
 
 	async toHTML({
-		args: { component1, component2 },
+		args: { component1, component2, bleed_left, bleed_right, column_gap, row_gap },
 		classes,
 		jdd_context,
 	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
 		return (
-			<div class={["split-view", ...classes]}>
+			<div
+				class={[
+					"split-view",
+					`split-view--bleed-left--${bleed_left}`,
+					`split-view--bleed-right--${bleed_right}`,
+					`split-view--with${column_gap ? "" : "out"}-column-gap`,
+					`split-view--with${row_gap ? "" : "out"}-row-gap`,
+
+					...classes,
+				]}
+			>
 				<div class="split-view__half">{component1?.render(jdd_context)}</div>
 				<div class="split-view__half">{component2?.render(jdd_context)}</div>
 			</div>

src/main.css

@@ -23,7 +23,10 @@ body {
 		[totalbleed-start] 1fr [bleed-start] var(--bleed-outer-width)
 		[main-column-start] var(--column-padding)
 		[content-start left-half-start] var(--half-width)
-		[left-half-end] var(--margin-between-halves) [right-half-start] var(--half-width)
+		[left-half-end] calc(var(--margin-between-halves) / 2) [center] calc(
+			var(--margin-between-halves) / 2
+		)
+		[right-half-start] var(--half-width)
 		[content-end right-half-end] var(--column-padding)
 		[main-column-end] var(--bleed-outer-width)
 		[bleed-end] 1fr [totalbleed-end] var(--screen-padding)
@@ -35,7 +38,7 @@ body {
 	--column-padding: 16px;
 	--target-column-width: 800px;
 	--screen-padding: 16px;
-	--margin-between-halves: 8px;
+	--margin-between-halves: 32px;
 	--total-horizontal-spacing: 2 * var(--screen-padding) - 2 * var(--column-padding) -
 		var(--margin-between-halves);
 	--half-width: min(