From ea4799b84ed9cbcdd7c16994e424a92874bbe932 Mon Sep 17 00:00:00 2001
From: Egor Kloos <egor.kloos@ns.nl>
Date: Wed, 10 Jan 2024 15:31:24 +0100
Subject: [PATCH] bug in safari 17!

---
 src/system-layout.css | 94 +++++++++++++++++++++----------------------
 1 file changed, 46 insertions(+), 48 deletions(-)

diff --git a/src/system-layout.css b/src/system-layout.css
index 87d8256..c9f6970 100644
--- a/src/system-layout.css
+++ b/src/system-layout.css
@@ -1,60 +1,58 @@
 @layer --system {
-	:root {
-		body {
-			--viewport-padding: minmax(var(--system-spacing-page-inline), 1fr);
-			--content-width: minmax(
-				calc(var(--system-dimension-min-width) - (var(--system-spacing-page-inline) * 2)),
-				var(--system-dimension-content-width)
-			);
+	body {
+		--viewport-padding: minmax(var(--system-spacing-page-inline), 1fr);
+		--content-width: minmax(
+			calc(var(--system-dimension-min-width) - (var(--system-spacing-page-inline) * 2)),
+			var(--system-dimension-content-width)
+		);
 
-			display: grid;
-			grid-template-columns:
-				[--viewport-start] var(--viewport-padding) [--content-start] var(--content-width) [--content-end] var(
-					--viewport-padding
-				)
-				[--viewport-end];
-		}
-		body > :is(header, footer) {
-			display: grid;
-			grid-template-columns: subgrid;
-			grid-column: --viewport-start / --viewport-end;
-			padding-block: var(--system-spacing-main);
-
-			& > * {
-				grid-column: --content-start / --content-end;
-				margin: 0;
-				padding: 0;
-			}
-		}
+		display: grid;
+		grid-template-columns:
+			[--viewport-start] var(--viewport-padding) [--content-start] var(--content-width) [--content-end] var(
+				--viewport-padding
+			)
+			[--viewport-end];
+	}
+	body > :is(header, footer) {
+		display: grid;
+		grid-template-columns: subgrid;
+		grid-column: --viewport-start / --viewport-end;
+		padding-block: var(--system-spacing-main);
 
-		main {
-			/* Center main in page */
+		& > * {
 			grid-column: --content-start / --content-end;
-			container: --content / inline-size;
-			padding-block: clamp(
-				var(--system-spacing-main) * 2,
-				var(--system-spacing-page-inline),
-				var(--system-spacing-main) * 4
-			);
-			/* Waiting on margin-trim */
+			margin: 0;
+			padding: 0;
+		}
+	}
 
-			& > *:first-child {
-				margin-block-start: unset;
-			}
+	main {
+		/* Center main in page */
+		grid-column: --content-start / --content-end;
+		container: --content / inline-size;
+		padding-block: clamp(
+			var(--system-spacing-main) * 2,
+			var(--system-spacing-page-inline),
+			var(--system-spacing-main) * 4
+		);
+		/* Waiting on margin-trim */
 
-			& > *:last-child {
-				margin-block-end: unset;
-			}
+		& > *:first-child {
+			margin-block-start: unset;
 		}
 
-		body > header > nav {
-			display: flex;
-			column-gap: var(--system-spacing-column-gap);
-			margin-block-start: var(--system-spacing-single);
+		& > *:last-child {
+			margin-block-end: unset;
 		}
+	}
 
-		body > :is(header, main, footer):not(:has(*)) {
-			display: none;
-		}
+	body > header > nav {
+		display: flex;
+		column-gap: var(--system-spacing-column-gap);
+		margin-block-start: var(--system-spacing-single);
+	}
+
+	body > :is(header, main, footer):not(:has(*)) {
+		display: none;
 	}
 }