Type tweaks (#632)

* reduce width a smidge

* bump up font size, paragraph margins

* related tweaks

* bump sizes for low res screens

* use same text colours on low and hi res screens

Author: Rich-Harris

apps/svelte.dev/src/routes/_home/Community.svelte

@@ -6,9 +6,9 @@
 	<h2>join our friendly community</h2>
 	<p>
 		Our sister organisation, <a href="https://www.sveltesociety.dev/">Svelte Society</a>, organises
-		events around the globe.
+		events around the globe. Find your chapter and join us in
+		<a href="/chat">our Discord server</a>.
 	</p>
-	<p>Find your chapter and join us in <a href="/chat">our Discord server</a>.</p>
 
 	<figure>
 		<enhanced:img
@@ -49,4 +49,10 @@
 	p {
 		text-align: center;
 	}
+
+	p {
+		max-width: 28em;
+		margin-left: auto;
+		margin-right: auto;
+	}
 </style>

apps/svelte.dev/src/routes/_home/Testimonials.svelte

@@ -188,8 +188,12 @@
 				width: auto;
 			}
 
-			.adjective::after {
-				content: 'adjective';
+			.adjective {
+				margin-right: 0.5rem;
+
+				&::after {
+					content: 'adjective';
+				}
 			}
 		}
 	}
@@ -211,22 +215,8 @@
 	}
 
 	@media (min-width: 1140px) {
-		.outer {
-			grid-template-areas:
-				'definition screenshots'
-				'blurb      screenshots';
-		}
-
-		.definition {
-			grid-area: definition;
-		}
-
-		.blurb {
-			grid-area: blurb;
-		}
-
 		.screenshots {
-			grid-area: screenshots;
+			top: -7em;
 		}
 	}
 </style>

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

@@ -45,7 +45,7 @@ p,
 ul,
 ol {
 	font: var(--sk-font-body);
-	margin: 1em 0;
+	margin: 1lh 0;
 
 	&:first-child {
 		margin-top: 0;

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

@@ -19,7 +19,7 @@
 	--sk-page-padding-side: 1.6rem;
 	--sk-thick-border-width: 0.3rem;
 	--sk-border-radius: 0.4rem;
-	--sk-page-content-width: 84rem;
+	--sk-page-content-width: 76rem;
 	--sk-banner-height: 0px;
 	--sk-pane-controls-height: 4.2rem;
 
@@ -32,8 +32,8 @@
 	--sk-font-size-h1: 3.6rem;
 	--sk-font-size-h2: 3rem;
 	--sk-font-size-h3: 2.4rem;
-	--sk-font-size-body: 1.8rem;
-	--sk-font-size-body-small: 1.6rem;
+	--sk-font-size-body: 2rem;
+	--sk-font-size-body-small: 1.8rem;
 	--sk-font-size-ui-small: 1.3rem;
 	--sk-font-size-ui-medium: 1.6rem;
 	--sk-font-size-ui-large: 3rem;
@@ -65,9 +65,9 @@
 	--sk-back-5: hsl(0, 0%, 92%);
 	--sk-back-6: hsl(0, 0%, 86%);
 
-	--sk-text-1: hsl(0, 0%, 12%);
-	--sk-text-2: hsl(0, 0%, 20%);
-	--sk-text-3: hsl(0, 0%, 30%);
+	--sk-text-1: hsl(0, 0%, 5%);
+	--sk-text-2: hsl(0, 0%, 12%);
+	--sk-text-3: hsl(0, 0%, 27%);
 	--sk-text-4: hsl(0, 0%, 45%);
 	--sk-scrollbar: rgba(0, 0, 0, 0.3);
 	--sk-shadow: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.1));
@@ -122,12 +122,9 @@
 
 	@media (resolution: 2x) {
 		--sk-font-family-body: 'EB Garamond', Georgia, serif;
-		--sk-font-size-body: 2.1rem;
-		--sk-font-size-body-small: 1.8rem;
+		--sk-font-size-body: 2.2rem;
+		--sk-font-size-body-small: 2rem;
 		--sk-line-height-body: 1.5;
-		--sk-text-1: hsl(0, 0%, 5%);
-		--sk-text-2: hsl(0, 0%, 12%);
-		--sk-text-3: hsl(0, 0%, 27%);
 	}
 
 	&.dark {