more

Author: Rich-Harris

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

@@ -72,7 +72,7 @@
 	}
 
 	strong {
-		font-size: var(--sk-text-l);
+		font-size: var(--sk-font-size-h2);
 		text-align: center;
 		font-family: var(--sk-font-heading);
 		text-transform: lowercase;
@@ -142,7 +142,6 @@
 
 		strong {
 			text-align: left;
-			font-size: calc(0.04 * var(--width));
 		}
 
 		.hero {

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

@@ -5,7 +5,7 @@
 <section class="hero">
 	<div class="hero-contents">
 		<div class="hero-text">
-			<div class="tagline">Go full-stack with</div>
+			<h3 class="tagline">Go full-stack with</h3>
 			<div class="logotype" role="img" aria-label="SvelteKit">
 				<Logotype />
 			</div>
@@ -78,14 +78,9 @@
 	}
 
 	.hero .tagline {
-		font-size: var(--sk-text-l);
-		font-weight: 200;
-		line-height: 1.2;
+		font-size: var(--sk-font-size-h2);
 		color: var(--sk-text-2);
-		font-family: var(--sk-font-body);
 		margin-bottom: 2rem;
-		/* max-width: 12em; */
-		/* margin: 0 auto; */
 	}
 
 	.logotype :global(svg) {

apps/svelte.dev/src/routes/_home/Supporters/index.svelte

@@ -58,12 +58,11 @@
 <style>
 	h3 {
 		color: var(--sk-text-2);
-		font-size: var(--sk-text-l);
 	}
 
 	.intro {
-		max-width: 28em; /* text balancing */
 		margin: 1em 0 3.2rem 0;
+		text-wrap: balance;
 	}
 
 	.supporters-grid {

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

@@ -5,8 +5,10 @@
 
 <Section --background="var(--background-1)">
 	<p class="definition">
-		<em>/ˈsvɛlt/</em> <span class="adjective">adjective</span>
-		<span class="description">attractively thin, graceful and stylish</span>
+		<em>/ˈsvɛlt/</em>
+		<span class="description">
+			<span class="adjective">adjective</span> attractively thin, graceful and stylish
+		</span>
 	</p>
 
 	<div class="grid" style="--columns: 3">
@@ -73,37 +75,39 @@
 	}
 
 	.definition {
-		font-size: var(--sk-text-l);
-	}
+		display: flex;
+		align-items: baseline;
 
-	.definition em {
-		font-style: normal;
-		font-size: var(--sk-font-size-h1);
-		color: var(--sk-theme-1);
-	}
+		em {
+			font-style: normal;
+			font-size: var(--sk-font-size-h1);
+			color: var(--sk-theme-1);
+		}
 
-	.definition .adjective {
-		position: relative;
-		top: -0.15em;
-		padding: 0.25em 0.5em 0.1em;
-		line-height: 1;
-		margin: 0 1em;
-		text-transform: uppercase;
-		font-size: var(--sk-text-s);
-		background: var(--sk-text-2);
-		border-radius: var(--sk-border-radius);
-		color: var(--sk-back-2);
-	}
+		.description {
+			position: relative;
+			font-family: var(--sk-font-ui);
+			display: flex;
+			align-items: center;
+			bottom: 0.2em;
 
-	.definition .description {
-		display: block;
+			.adjective {
+				position: relative;
+				/* top: -0.15em; */
+				padding: 0.25em 0.5em 0.1em;
+				line-height: 1;
+				margin: 0 1em;
+				text-transform: uppercase;
+				font-size: var(--sk-text-s);
+				background: var(--sk-text-2);
+				border-radius: var(--sk-border-radius);
+				font-family: var(--sk-font-ui);
+				color: var(--sk-back-2);
+			}
+		}
 	}
 
 	@media (min-width: 900px) {
-		.definition .description {
-			display: inline;
-		}
-
 		.video-container {
 			order: 2;
 			grid-column: 2 / 4;

packages/site-kit/src/lib/search/SearchBox.svelte

@@ -302,7 +302,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	}
 
 	input {
-		font-size: var(--sk-text-l);
+		font-size: var(--sk-font-size-ui-large);
 		width: 100%;
 		padding: var(--padding) 5rem var(--padding) var(--padding);
 		height: 6rem;

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

@@ -71,7 +71,7 @@ h2 {
 }
 
 h3 {
-	font-size: var(--sk-text-h3);
+	font-size: var(--sk-font-size-h3);
 }
 
 :where(h1, h2, h3) {

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

@@ -31,7 +31,6 @@
 	--sk-font-size-h1: 3.6rem;
 	--sk-font-size-h2: 3rem;
 	--sk-font-size-h3: 2.4rem;
-	--sk-text-l: 2.4rem;
 	--sk-text-m: 2.1rem;
 	--sk-text-s: 1.8rem;
 	--sk-text-xs: 1.4rem;