fix: add body padding-block and edge-margin trimming for vertical breathing room

Leftium · Leftium · commit f7e12da0ce6d · 2026-03-28T08:58:14.000+09:00
- Add padding-block: var(--nc-spacing) to body for top/bottom page spacing - Strip margin from first/last visible body children to prevent doubling - Use :nth-last-child(1 of :not(script, style)) to skip trailing <script> tags - Place edge-trimming rules inside @scope so they beat scoped typography margins
diff --git a/src/_document.scss b/src/_document.scss
@@ -32,6 +32,7 @@
       var(#{$prefix}content-shadow-gap)
       1fr;
     min-height: 100dvh;
+    padding-block: var(#{$prefix}spacing);
     position: relative;
   }
 
diff --git a/src/_grid-columns.scss b/src/_grid-columns.scss
@@ -15,6 +15,7 @@
     min-width: 0; // Allow grid children to shrink below intrinsic content width
   }
 
+
   // Fix for frameworks (SvelteKit, etc.) that insert a
   // <div style="display: contents"> wrapper between <body> and content.
   // display: contents removes the element from the box tree for layout,
diff --git a/src/_typography.scss b/src/_typography.scss
@@ -62,6 +62,19 @@ $_heading-phone: (
     margin-bottom: var(#{$prefix}spacing);
   }
 
+  // Prevent double spacing at page edges: body has padding-block,
+  // so strip margins that would stack with it.
+  // Must live inside @scope so it beats the scoped margin rules above.
+  // Uses :nth-child/:nth-last-child(of ...) to skip <script>/<style>.
+  body > :first-child,
+  body > :first-child > :first-child {
+    margin-top: 0;
+  }
+  body > :nth-last-child(1 of :not(script, style)),
+  body > :nth-last-child(1 of :not(script, style)) > :last-child {
+    margin-bottom: 0;
+  }
+
 
 
   // ----- Lists -----

Original file line number	Diff line number	Diff line change
`@@ -32,6 +32,7 @@`
`32`	`32`	`var(#{$prefix}content-shadow-gap)`
`33`	`33`	`1fr;`
`34`	`34`	`min-height: 100dvh;`
	`35`	`+ padding-block: var(#{$prefix}spacing);`
`35`	`36`	`position: relative;`
`36`	`37`	`}`
`37`	`38`
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@`
`15`	`15`	`min-width: 0; // Allow grid children to shrink below intrinsic content width`
`16`	`16`	`}`
`17`	`17`
	`18`	`+`
`18`	`19`	`// Fix for frameworks (SvelteKit, etc.) that insert a`
`19`	`20`	`// <div style="display: contents"> wrapper between <body> and content.`
`20`	`21`	`// display: contents removes the element from the box tree for layout,`