use baskervville on non-mac

Author: Rich-Harris

apps/svelte.dev/src/app.html

@@ -47,6 +47,10 @@
 				);
 
 				div.remove();
+
+				if (/Macintosh/.test(navigator.userAgent)) {
+					document.documentElement.classList.add('mac');
+				}
 			}
 		</script>
 

packages/site-kit/package.json

@@ -22,6 +22,7 @@
 	},
 	"homepage": "https://github.com/sveltejs/svelte.dev/tree/main/packages/site-kit#readme",
 	"dependencies": {
+		"@fontsource/baskervville": "^5.1.0",
 		"@fontsource/eb-garamond": "^5.1.0",
 		"@fontsource/fira-mono": "^5.1.0",
 		"@fontsource/yantramanav": "^5.1.0",

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

@@ -1,6 +1,8 @@
 @import '@fontsource/eb-garamond';
 @import '@fontsource/eb-garamond/500.css';
 @import '@fontsource/eb-garamond/400-italic.css';
+@import '@fontsource/baskervville';
+@import '@fontsource/baskervville/400-italic.css';
 @import '@fontsource/fira-mono';
 
 /* TODO figure out which weights we actually need */

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

@@ -24,8 +24,8 @@
 	/* typography */
 	--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-body: 'Baskervville', 'Big Caslon', Palatino, 'Book Antiqua', Cambria, serif;
+	--sk-font-heading: 'EB Garamond', var(--sk-font-body);
 	--sk-font-mono: 'Fira Mono', monospace;
 	--sk-text-xxl: 3.6rem;
 	--sk-text-xl: 3rem;
@@ -35,6 +35,10 @@
 	--sk-text-xs: 1.4rem;
 	--sk-line-max-width: 84rem;
 
+	&.mac {
+		--sk-font-body: 'EB Garamond';
+	}
+
 	--sk-focus-outline: 0 0 0 2px hsla(var(--sk-theme-1-hsl), 0.6);
 
 	/* Base colors */