diff --git a/src/system-layout.css b/src/system-layout.css index 86389d5..e851166 100644 --- a/src/system-layout.css +++ b/src/system-layout.css @@ -1,22 +1,21 @@ @layer --system { - @container --system (width > 1rem) { - 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]; - margin: unset; - } + grid-template-columns: + [--viewport-start] var(--viewport-padding) [--content-start] var(--content-width) [--content-end] var( + --viewport-padding + ) + [--viewport-end]; + } - body > :is(header, footer) { + @container --system (width > 1rem) { + header:is(body > header), + footer:is(body > footer) { display: grid; grid-template-columns: subgrid; grid-column: --viewport-start / --viewport-end; @@ -29,7 +28,7 @@ } } - body > header { + header:is(body > header) { background: var(--system-surface-color); & > :is(h1, h2, h3), @@ -52,11 +51,11 @@ } } - body > :is(header, main, footer):not(:has(*)) { + :is(header, main, footer):not(:has(*)) { display: none; } - body > main { + main:is(body > main) { /* Center main in page */ grid-column: --content-start / --content-end; container: --content / inline-size; @@ -76,14 +75,10 @@ } } - body > header > nav { + header:is(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; - } } } diff --git a/src/system-selectors.css b/src/system-selectors.css index 72da3aa..c908383 100644 --- a/src/system-selectors.css +++ b/src/system-selectors.css @@ -5,8 +5,6 @@ box-sizing: border-box; } html { - container-name: var(--system-enhanced, --system); - container-type: var(--system-enhanced, inline-size); font-family: var(--system-font-family-body); /** * DO NOT EDIT! @@ -18,6 +16,12 @@ } body { + /* Container needs to be on body due to a bug on Safari :( */ + container-name: var(--system-enhanced, --system); + container-type: var(--system-enhanced, inline-size); + + display: var(--system-enhanced, grid); + margin: var(--system-enhanced, unset); color: var(--system-canvas-text); background-color: var(--system-canvas); }