use EB Garamond for headers as well

Rich-Harris · Rich-Harris · commit 9df888310fa5 · 2024-09-29T13:37:14.000-04:00
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -288,7 +288,7 @@ export default app;`
 		padding: 0.2em;
 		opacity: 0.7;
 		transition: opacity 0.3s;
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 		font-size: 1.6rem;
 		color: var(--sk-text-1);
 		line-height: 1;
@@ -310,7 +310,7 @@ export default app;`
 		background: transparent;
 		border: none;
 		color: currentColor;
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 		font-size: var(--sk-text-m);
 		opacity: 0.7;
 		outline: none;
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte
@@ -63,7 +63,7 @@
 	.name {
 		line-height: 1;
 		display: none;
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 		font-size: 1.6rem;
 	}
 
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -54,7 +54,7 @@
 
 	h1 {
 		font-size: 4rem;
-		font-weight: 400;
+		font-weight: 500;
 	}
 
 	.standfirst {
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -73,7 +73,7 @@
 		line-height: 1;
 		z-index: 2;
 		margin: 6rem 0 2rem 0;
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 
 		a {
 			text-decoration: none;
@@ -111,7 +111,7 @@
 		font-size: var(--sk-text-s);
 		text-transform: uppercase;
 		font-weight: 400;
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 		color: var(--sk-text-3);
 	}
 
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
@@ -10,7 +10,7 @@
 
 <style>
 	.breadcrumbs {
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 		font-size: var(--sk-text-xs);
 		color: var(--sk-text-4);
 		text-transform: uppercase;
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte
@@ -134,7 +134,7 @@
 		justify-content: center;
 		background: var(--sk-back-2);
 		user-select: none;
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 	}
 
 	.progress-container {
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
@@ -194,7 +194,7 @@
 
 	footer .edit {
 		color: var(--sk-text-2);
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 		font-size: var(--sk-text-s);
 		padding: 0 0 0 1.4em;
 		background: url($lib/icons/file-edit.svg) no-repeat 0 calc(50% - 0.1em);
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Item.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Item.svelte
@@ -119,7 +119,7 @@
 		background-size: 1.2rem 1.2rem;
 		background-position: 0 45%;
 		background-repeat: no-repeat;
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 		font-size: var(--sk-text-s);
 	}
 
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -304,7 +304,7 @@
 	.add-new {
 		position: relative;
 		display: inline-block;
-		font: 300 var(--sk-text-s) / 1.8rem var(--sk-font-heading);
+		font: 300 var(--sk-text-s) / 1.8rem var(--sk-font-ui);
 		background: var(--sk-back-1);
 		border: none;
 		border-bottom: 3px solid transparent;
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
@@ -118,7 +118,7 @@
 		background: var(--sk-back-1, white);
 		text-align: left;
 		position: relative;
-		font: 300 var(--sk-text-s) / 1.8rem var(--sk-font-heading);
+		font: 300 var(--sk-text-s) / 1.8rem var(--sk-font-ui);
 		border: none;
 		border-bottom: 3px solid transparent;
 		padding: 12px 12px 8px 12px;
diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte
@@ -69,7 +69,7 @@
 	}
 
 	.panel-heading {
-		font: 400 var(--sk-text-s) / 1.8rem var(--sk-font-heading);
+		font: 400 var(--sk-text-s) / 1.8rem var(--sk-font-ui);
 		text-transform: uppercase;
 		color: var(--sk-text-1, #333);
 		flex: 1;
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
@@ -301,7 +301,7 @@
 	button {
 		color: var(--sk-text-2, #999);
 		font-size: var(--sk-text-s);
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 		text-transform: uppercase;
 		display: block;
 	}
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -146,7 +146,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		transition: 0.4s var(--quint-out);
 		transition-property: transform, background;
 		isolation: isolate;
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 	}
 
 	nav::after {
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
@@ -85,7 +85,7 @@ h1 {
 :where(h1, h2, h3, h4, h5, h6) {
 	position: relative;
 	font-family: var(--sk-font-heading);
-	font-weight: 400;
+	font-weight: 500;
 	line-height: 1.35;
 	color: var(--sk-text-1);
 }
@@ -147,7 +147,7 @@ blockquote :last-child {
 
 /*  buttons -------------------------------- */
 button {
-	font-family: var(--sk-font-heading);
+	font-family: var(--sk-font-ui);
 	font-size: inherit;
 	background-color: transparent;
 	border: none;
diff --git a/packages/site-kit/src/lib/styles/index.css b/packages/site-kit/src/lib/styles/index.css
@@ -1,4 +1,5 @@
 @import '@fontsource/eb-garamond';
+@import '@fontsource/eb-garamond/500.css';
 @import '@fontsource/eb-garamond/400-italic.css';
 @import '@fontsource/fira-mono';
 
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
@@ -22,9 +22,10 @@
 	--sk-banner-bottom-height: 0px;
 
 	/* typography */
-	--sk-font-heading: 'Yantramanav', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+	--sk-font-ui: 'Yantramanav', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 		Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 	--sk-font-body: 'EB Garamond', 'Big Caslon', Palatino, 'Book Antiqua', Cambria, serif;
+	--sk-font-heading: var(--sk-font-body);
 	--sk-font-mono: 'Fira Mono', monospace;
 	--sk-text-xxl: 3.6rem;
 	--sk-text-xl: 3rem;

Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@`
`63`	`63`	`.name {`
`64`	`64`	`line-height: 1;`
`65`	`65`	`display: none;`
`66`		`- font-family: var(--sk-font-heading);`
	`66`	`+ font-family: var(--sk-font-ui);`
`67`	`67`	`font-size: 1.6rem;`
`68`	`68`	`}`
`69`	`69`
Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@`
`54`	`54`
`55`	`55`	`h1 {`
`56`	`56`	`font-size: 4rem;`
`57`		`- font-weight: 400;`
	`57`	`+ font-weight: 500;`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`.standfirst {`
Original file line number	Diff line number	Diff line change
`@@ -134,7 +134,7 @@`
`134`	`134`	`justify-content: center;`
`135`	`135`	`background: var(--sk-back-2);`
`136`	`136`	`user-select: none;`
`137`		`- font-family: var(--sk-font-heading);`
	`137`	`+ font-family: var(--sk-font-ui);`
`138`	`138`	`}`
`139`	`139`
`140`	`140`	`.progress-container {`
Original file line number	Diff line number	Diff line change
`@@ -119,7 +119,7 @@`
`119`	`119`	`background-size: 1.2rem 1.2rem;`
`120`	`120`	`background-position: 0 45%;`
`121`	`121`	`background-repeat: no-repeat;`
`122`		`- font-family: var(--sk-font-heading);`
	`122`	`+ font-family: var(--sk-font-ui);`
`123`	`123`	`font-size: var(--sk-text-s);`
`124`	`124`	`}`
`125`	`125`