Extract main padding to CSS custom property (#3282)

Co-authored-by: Chris Swithinbank <[email protected]>

Author: alvinometric

.changeset/neat-steaks-cry.md

@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Moves padding of `<main>` element to a `--sl-main-pad` CSS custom property to simplify setting custom values

packages/starlight/components/Page.astro

@@ -63,7 +63,7 @@ if (pagefindEnabled) mainDataAttributes['data-pagefind-body'] = '';
 				scroll-padding-top: calc(1.5rem + var(--sl-nav-height) + var(--sl-mobile-toc-height));
 			}
 			main {
-				padding-bottom: 3vh;
+				padding: var(--sl-main-pad);
 			}
 			@media (min-width: 50em) {
 				[data-has-sidebar] {

packages/starlight/style/props.css

@@ -101,6 +101,7 @@
 		--sl-sidebar-pad-x: 1rem;
 		--sl-content-width: 45rem;
 		--sl-content-pad-x: 1rem;
+		--sl-main-pad: 0 0 3vh 0;
 		--sl-menu-button-size: 2rem;
 		--sl-nav-gap: var(--sl-content-pad-x);
 		/* Offset required to show outline inside an element instead of round the outside */