Tidy up a few CSS details (#222)

Rich-Harris · web-flow · commit 2614cd9979c7 · 2024-10-02T22:29:02.000-04:00
* remove playfair display

* only load yantramanav 400

* tweak

* tweaks

* smart quotes everywhere

* tidy up blog pages a little bit

* more

* banish --sk-theme-3

* tidy up
diff --git a/apps/svelte.dev/src/routes/_home/Video.svelte b/apps/svelte.dev/src/routes/_home/Video.svelte
@@ -246,6 +246,5 @@
 	.video-player input:focus-visible ~ img {
 		outline: 2px solid var(--sk-theme-1);
 		outline-offset: 2px;
-		border-radius: var(--sk-border-radius);
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -21,7 +21,7 @@
 	{#each data.posts as post}
 		{#if !post.metadata.draft}
 			<article class="post" data-pubdate={post.date}>
-				<a class="no-underline" href="/{post.slug}" title="Read the article »">
+				<a href="/{post.slug}" title="Read the article »">
 					<h2>{post.metadata.title}</h2>
 					<p>{post.metadata.description}</p>
 				</a>
@@ -42,51 +42,53 @@
 
 	h2 {
 		display: inline-block;
-		margin: 3.2rem 0 0.4rem 0;
+		/* margin: 3.2rem 0 0.4rem 0; */
 		color: var(--sk-text-2);
 		max-width: 18em;
 		font-size: var(--sk-text-m);
 		font-weight: 400;
 	}
 
-	.post:first-child {
-		margin: 0 0 2rem 0;
-		padding: 0 0 4rem 0;
-		border-bottom: var(--sk-thick-border-width) solid #6767785b; /* based on --second */
-	}
+	.post {
+		margin: 2em 0;
 
-	.post:first-child h2 {
-		font-size: 4rem;
-		font-weight: 400;
-		color: var(--sk-text-2);
-	}
+		&:where(:first-child, :nth-child(2))::before {
+			content: 'Latest post • ' attr(data-pubdate);
+			color: var(--sk-text-4);
+			font-family: var(--sk-font-ui);
+			font-size: var(--sk-text-xs);
+			font-weight: 400;
+			text-transform: uppercase;
+		}
 
-	.post:where(:first-child, :nth-child(2))::before {
-		content: 'Latest post • ' attr(data-pubdate);
-		color: var(--sk-theme-3);
-		font-family: var(--sk-font-heading);
-		font-size: var(--sk-text-xs);
-		font-weight: 400;
-		letter-spacing: 0.05em;
-		text-transform: uppercase;
-	}
+		&:nth-child(2)::before {
+			content: 'Older posts';
+		}
 
-	.post:nth-child(2)::before {
-		content: 'Older posts';
-	}
+		&:first-child {
+			margin: 0 0 2rem 0;
+			padding: 0 0 4rem 0;
 
-	.post p {
-		font-size: var(--sk-text-s);
-		max-width: 30em;
-		color: var(--sk-text-3);
-	}
+			h2 {
+				font-size: 4rem;
+				font-weight: 400;
+				color: var(--sk-text-2);
+			}
+		}
 
-	.post > a {
-		display: block;
-	}
+		a {
+			display: block;
+			text-decoration: none;
+
+			&:hover h2 {
+				text-decoration: underline;
+			}
+		}
 
-	.posts a:hover,
-	.posts a:hover > h2 {
-		color: var(--sk-theme-3);
+		p {
+			font-size: var(--sk-text-s);
+			color: var(--sk-text-3);
+			margin: 0;
+		}
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -62,9 +62,9 @@
 	}
 
 	.byline {
-		margin: 0 0 1rem 0;
-		padding: 1.6rem 0 0 0;
-		border-top: var(--sk-thick-border-width) solid #6767785b;
+		margin: 0 0 4rem 0;
+		padding: 1rem 0 0 0;
+		font-family: var(--sk-font-ui);
 		font-size: var(--sk-text-xs);
 		text-transform: uppercase;
 	}
@@ -78,7 +78,7 @@
 	}
 
 	.post :global(figcaption) {
-		color: var(--sk-theme-2);
+		color: var(--sk-text-4);
 		text-align: left;
 	}
 
@@ -90,7 +90,7 @@
 		float: right;
 		margin: 0 0 1em 1em;
 		width: 16rem;
-		color: var(--sk-theme-2);
+		color: var(--sk-text-4);
 		z-index: 2;
 	}
 
@@ -103,7 +103,7 @@
 		height: 420px;
 		margin: 2em 0;
 		border-radius: var(--sk-border-radius);
-		border: 0.8rem solid var(--sk-theme-2);
+		border: 0.8rem solid var(--sk-theme-4);
 	}
 
 	@media (min-width: 910px) {
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Chrome.svelte
@@ -77,8 +77,7 @@
 	a:focus-visible,
 	button:focus-visible,
 	input:focus-visible {
-		outline: none;
-		border: 2px solid var(--sk-theme-3);
+		outline-offset: -2px;
 	}
 
 	.icon,
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
@@ -378,8 +378,8 @@
 
 	li button {
 		position: relative;
-
 		display: flex;
+		width: 100%;
 		gap: 0.5rem;
 	}
 
@@ -403,8 +403,7 @@
 
 	a:focus-visible,
 	.exercises button:focus-visible {
-		outline: none;
-		border: 2px solid var(--sk-theme-3);
+		outline-offset: -2px;
 	}
 
 	@media screen and (max-width: 800px) {
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/ToggleButton.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/ToggleButton.svelte
@@ -39,10 +39,6 @@
 		border: transparent;
 	}
 
-	button:focus-visible {
-		outline: 2px solid var(--sk-theme-3);
-	}
-
 	button::before {
 		content: '';
 		position: absolute;
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/codemirror.css b/apps/svelte.dev/src/routes/tutorial/[slug]/codemirror.css
@@ -57,13 +57,6 @@
 	color: var(--sk-text-2);
 }
 
-.cm-editor.cm-focused .cm-selectionBackground,
-.cm-editor .cm-selectionBackground,
-.cm-editor .cm-content ::selection {
-	background: var(--sk-theme-3);
-	opacity: 0.3;
-}
-
 .cm-editor .cm-tooltip {
 	background: var(--sk-back-2);
 	color: var(--sk-text-1);
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Item.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Item.svelte
@@ -124,9 +124,7 @@
 	}
 
 	:focus-visible {
-		outline: none;
-		border: 2px solid var(--sk-theme-3) !important;
-		border-radius: 2px;
+		outline-offset: -2px;
 	}
 
 	input {
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
@@ -25,7 +25,6 @@
 		"@fontsource/dm-serif-display": "^5.1.0",
 		"@fontsource/eb-garamond": "^5.1.0",
 		"@fontsource/fira-mono": "^5.1.0",
-		"@fontsource/playfair-display": "^5.1.0",
 		"@fontsource/yantramanav": "^5.1.0",
 		"esm-env": "^1.0.0",
 		"json5": "^2.2.3",
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
@@ -144,7 +144,6 @@
 					align-items: center;
 					height: calc(var(--height) - 0.6rem);
 					outline-offset: 0;
-					border-radius: var(--sk-border-radius);
 					padding: 0 0.4rem;
 
 					&::before,
@@ -343,12 +342,12 @@
 			li::before {
 				content: '';
 				position: absolute;
-				margin-top: 0.8rem;
-				margin-left: -1.8rem;
+				top: 1.4rem;
+				left: -1.8rem;
 				background-color: var(--sk-back-5);
 				width: 0.6rem;
 				height: 0.6rem;
-				border-radius: 2px;
+				border-radius: 50%;
 				opacity: 0.7;
 			}
 
@@ -364,7 +363,6 @@
 		li {
 			position: relative;
 			max-width: calc(var(--sk-line-max-width) - var(--list-padding));
-			line-height: 1.5;
 			margin: 0 0 0.5em 0;
 		}
 
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -68,13 +68,11 @@
 		height: 100%;
 		bottom: auto;
 		width: 100%;
-		/* columns: 2; */
 		margin: 0;
 	}
 
 	li {
 		display: block;
-		/* line-height: 1.2; */
 		margin: 0;
 		margin-bottom: 4rem;
 	}
@@ -108,7 +106,6 @@
 	}
 
 	[aria-current='page'] {
-		/* font-weight: 700; */
 		color: var(--sk-theme-1);
 		text-decoration: underline;
 	}
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -269,7 +269,7 @@ async function parse({
 				return this.parser!.parseInline(token.tokens);
 			}
 
-			return smart_quotes(token.text);
+			return smart_quotes(token.text, true);
 		},
 		heading({ tokens, depth, raw }) {
 			const text = this.parser!.parseInline(tokens);
diff --git a/packages/site-kit/src/lib/markdown/utils.ts b/packages/site-kit/src/lib/markdown/utils.ts
@@ -77,18 +77,28 @@ export const normalizeSlugify = (str: string) => {
 	return slugify(removeHTMLEntities(removeMarkdown(str))).replace(/(<([^>]+)>)/gi, '');
 };
 
-export function smart_quotes(str: string) {
+export function smart_quotes(str: string, html: boolean = false) {
 	// replace dumb quotes with smart quotes. This isn't a perfect algorithm — it
 	// wouldn't correctly handle `That '70s show` or `My country 'tis of thee`
 	// but a) it's very unlikely they'll occur in our docs, and
 	// b) they can be dealt with manually
-	return str.replace(/(.|^)(&#39;|&quot;)(.|$)/g, (m, before, quote, after) => {
-		const left = !before.trim();
-		const double = quote === '&quot;';
-		const entity = `&${left ? 'l' : 'r'}${double ? 'd' : 's'}quo;`;
-
-		return (before ?? '') + entity + (after ?? '');
-	});
+	return str.replace(
+		html ? /(.|^)(&#39;|&quot;)(.|$)/g : /(.|^)('|")(.|$)/g,
+		(m, before, quote, after) => {
+			const left = !before.trim();
+			let replacement = '';
+
+			if (html) {
+				const double = quote === '&quot;';
+				replacement = `&${left ? 'l' : 'r'}${double ? 'd' : 's'}quo;`;
+			} else {
+				const double = quote === '"';
+				replacement = double ? (left ? '“' : '”') : left ? '‘' : '’';
+			}
+
+			return (before ?? '') + replacement + (after ?? '');
+		}
+	);
 }
 
 const tokenizer: TokenizerObject = {
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -189,6 +189,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		display: flex;
 		align-items: center;
 		text-decoration: none;
+		outline-offset: -2px;
 
 		&:hover {
 			box-shadow: inset 0 -1px 0 0 var(--sk-back-5);
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -322,7 +322,6 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		}
 
 		&:focus-visible {
-			border-radius: var(--sk-border-radius);
 			outline-offset: -3px;
 		}
 	}
@@ -335,7 +334,6 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		width: 5rem;
 		height: 6rem;
 		background: none;
-		border-radius: var(--sk-border-radius);
 		color: var(--sk-text-2);
 		opacity: 0.3;
 
@@ -388,7 +386,6 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		}
 
 		&:focus {
-			border-radius: var(--sk-border-radius);
 			outline-offset: -3px;
 		}
 	}
@@ -413,7 +410,6 @@ It appears when the user clicks on the `Search` component or presses the corresp
 
 		&:focus-visible {
 			opacity: 1;
-			border-radius: var(--sk-border-radius);
 			outline-offset: -3px;
 		}
 	}
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
diff --git a/packages/site-kit/src/lib/styles/index.css b/packages/site-kit/src/lib/styles/index.css
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -246,6 +246,5 @@`
`246`	`246`	`.video-player input:focus-visible ~ img {`
`247`	`247`	`outline: 2px solid var(--sk-theme-1);`
`248`	`248`	`outline-offset: 2px;`
`249`		`- border-radius: var(--sk-border-radius);`
`250`	`249`	`}`
`251`	`250`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -62,9 +62,9 @@`
`62`	`62`	`}`
`63`	`63`
`64`	`64`	`.byline {`
`65`		`- margin: 0 0 1rem 0;`
`66`		`- padding: 1.6rem 0 0 0;`
`67`		`- border-top: var(--sk-thick-border-width) solid #6767785b;`
	`65`	`+ margin: 0 0 4rem 0;`
	`66`	`+ padding: 1rem 0 0 0;`
	`67`	`+ font-family: var(--sk-font-ui);`
`68`	`68`	`font-size: var(--sk-text-xs);`
`69`	`69`	`text-transform: uppercase;`
`70`	`70`	`}`
`@@ -78,7 +78,7 @@`
`78`	`78`	`}`
`79`	`79`
`80`	`80`	`.post :global(figcaption) {`
`81`		`- color: var(--sk-theme-2);`
	`81`	`+ color: var(--sk-text-4);`
`82`	`82`	`text-align: left;`
`83`	`83`	`}`
`84`	`84`
`@@ -90,7 +90,7 @@`
`90`	`90`	`float: right;`
`91`	`91`	`margin: 0 0 1em 1em;`
`92`	`92`	`width: 16rem;`
`93`		`- color: var(--sk-theme-2);`
	`93`	`+ color: var(--sk-text-4);`
`94`	`94`	`z-index: 2;`
`95`	`95`	`}`
`96`	`96`
`@@ -103,7 +103,7 @@`
`103`	`103`	`height: 420px;`
`104`	`104`	`margin: 2em 0;`
`105`	`105`	`border-radius: var(--sk-border-radius);`
`106`		`- border: 0.8rem solid var(--sk-theme-2);`
	`106`	`+ border: 0.8rem solid var(--sk-theme-4);`
`107`	`107`	`}`
`108`	`108`
`109`	`109`	`@media (min-width: 910px) {`
Original file line number	Diff line number	Diff line change
`@@ -77,8 +77,7 @@`
`77`	`77`	`a:focus-visible,`
`78`	`78`	`button:focus-visible,`
`79`	`79`	`input:focus-visible {`
`80`		`- outline: none;`
`81`		`- border: 2px solid var(--sk-theme-3);`
	`80`	`+ outline-offset: -2px;`
`82`	`81`	`}`
`83`	`82`
`84`	`83`	`.icon,`
Original file line number	Diff line number	Diff line change
`@@ -124,9 +124,7 @@`
`124`	`124`	`}`
`125`	`125`
`126`	`126`	`:focus-visible {`
`127`		`- outline: none;`
`128`		`- border: 2px solid var(--sk-theme-3) !important;`
`129`		`- border-radius: 2px;`
	`127`	`+ outline-offset: -2px;`
`130`	`128`	`}`
`131`	`129`
`132`	`130`	`input {`