chore: spacing tweaks (#698)

* chore: spacing tweaks

- make paragraph breaks less spacey
- move `ul` closer to the preceeding paragraph which gives more visual clarity of where it belongs to
- give code blocks a bit more space at the top/bottom on larger screens
- give blockquotes more space at the top/bottom on larger screens

Combined, these changes give more visual clarity of which things belong together, which stand on its own, etc

* Update packages/site-kit/src/lib/styles/base.css

Co-authored-by: Rich Harris <[email protected]>

* line height-dependent top/bubble calculation

* i get best results with this

* rhythm

* we no longer need these, because of the changes to p/ol/ul

* simplify

---------

Co-authored-by: Rich Harris <[email protected]>

Author: dummdidumm

packages/site-kit/src/lib/components/Text.svelte

@@ -116,9 +116,13 @@
 			border: 1px solid var(--sk-back-5);
 			border-radius: var(--sk-border-radius);
 			overflow: hidden;
-			margin: 2rem 0;
+			margin: calc(0.5 * var(--sk-line-height-body)) 0;
 			/* background: var(--sk-back-3); */
 
+			@media (min-width: 767px) {
+				margin: var(--sk-line-height-body) 0;
+			}
+
 			.controls {
 				--height: 3.6rem;
 				display: flex;
@@ -376,11 +380,11 @@
 			li::before {
 				content: '';
 				position: absolute;
-				top: 1.43rem;
+				top: 0.65em;
 				left: -1.8rem;
 				background-color: var(--sk-text-4);
-				width: 0.6rem;
-				height: 0.6rem;
+				width: 0.3em;
+				height: 0.3em;
 				border-radius: 50%;
 				opacity: 0.7;
 			}

packages/site-kit/src/lib/styles/base.css

@@ -45,7 +45,7 @@ p,
 ul,
 ol {
 	font: var(--sk-font-body);
-	margin: 1lh 0;
+	margin: 0.5lh 0;
 
 	&:first-child {
 		margin-top: 0;
@@ -136,8 +136,7 @@ header {
 /*	opinionated styles --------------------- */
 blockquote {
 	position: relative;
-	margin: 2.4rem 0;
-	padding: 2rem 2.4rem 1.8rem 2.4rem;
+	margin: var(--sk-line-height-body) 0;
 	max-width: var(--sk-page-content-width);
 }
 

packages/site-kit/src/lib/styles/tokens.css

@@ -39,7 +39,9 @@
 	--sk-font-size-ui-large: 3rem;
 	--sk-font-size-mono: 1.4rem;
 
-	--sk-line-height-body: 1.5;
+	/* doing it this way (rather than just `1.5`) means it has a unit, and can be used elsewhere */
+	--sk-line-height-body: calc(1.5 * var(--sk-font-size-body));
+	--sk-line-height-body-small: calc(1.5 * var(--sk-font-size-body-small));
 
 	--sk-font-h1: 500 var(--sk-font-size-h1) / 1.2 var(--sk-font-family-heading);
 	--sk-font-h2: 500 var(--sk-font-size-h2) / 1.2 var(--sk-font-family-heading);