From 53baedb9791717b63e1d096a8007d8d42cd44fdf Mon Sep 17 00:00:00 2001
From: Fynn Becker <post@fynn.be>
Date: Fri, 28 Jun 2024 21:46:24 +0200
Subject: [PATCH] feat(css): Reduce number of bundles (close #58)

---
 README.md                                     |  8 --
 components/{page-base.webc => base-page.webc} | 58 +++++++----
 components/element-icon.webc                  |  4 +-
 components/element-meta.webc                  |  4 +-
 components/element-nav.webc                   |  8 +-
 components/element-rich-text.webc             | 31 ++----
 components/element-tags.webc                  |  4 +-
 components/global-footer.webc                 |  9 +-
 components/global-header.webc                 | 15 ++-
 components/global-hero.webc                   |  4 +-
 components/global-related.webc                |  4 +-
 .../2022-01-30-browser-image-performance.md   |  4 +-
 ...-23-accessibility-is-not-a-tech-problem.md |  2 +-
 ...6-forced-colors-windows-contrast-themes.md |  2 +-
 eleventy.config.js                            | 22 +----
 eleventy/transforms/bundle-css-layer.js       | 22 +++++
 generate-fonts-fallback.js                    | 32 ------
 layouts/default.webc                          |  4 +-
 layouts/gallery.webc                          |  8 +-
 layouts/post.webc                             |  8 +-
 layouts/tag.webc                              |  8 +-
 layouts/tags.webc                             |  8 +-
 package-lock.json                             | 26 -----
 package.json                                  |  2 -
 public/css/global/base.css                    | 15 +--
 public/css/global/fonts-fallback.css          | 49 ---------
 public/css/main.css                           | 20 +---
 public/css/tokens/sizes.css                   |  4 +-
 public/css/tokens/typo.css                    |  6 +-
 public/css/typography/code.css                | 99 +++++++++----------
 public/css/typography/table.css               | 27 +++++
 public/css/utilities.css                      | 21 ++++
 public/css/utilities/container.css            |  7 --
 public/css/utilities/list.css                 |  3 -
 public/css/utilities/scroll.css               |  3 -
 35 files changed, 246 insertions(+), 305 deletions(-)
 rename components/{page-base.webc => base-page.webc} (78%)
 create mode 100644 eleventy/transforms/bundle-css-layer.js
 delete mode 100644 generate-fonts-fallback.js
 delete mode 100644 public/css/global/fonts-fallback.css
 create mode 100644 public/css/typography/table.css
 create mode 100644 public/css/utilities.css
 delete mode 100644 public/css/utilities/container.css
 delete mode 100644 public/css/utilities/list.css
 delete mode 100644 public/css/utilities/scroll.css

diff --git a/README.md b/README.md
index 14e36fe..d826165 100644
--- a/README.md
+++ b/README.md
@@ -22,14 +22,6 @@ node --run dev
 node --run build
 ```
 
-## Fonts
-
-Generate fonts fallback CSS file:
-
-```sh
-node generate-fonts-fallback.js
-```
-
 ## Formatting
 
 ```sh
diff --git a/components/page-base.webc b/components/base-page.webc
similarity index 78%
rename from components/page-base.webc
rename to components/base-page.webc
index becbb4e..575209b 100644
--- a/components/page-base.webc
+++ b/components/base-page.webc
@@ -8,15 +8,47 @@
 			@text="isHomePage($data.page.url) ? 'Fynn Becker' : `${$data.title} - Fynn Becker`"
 		></title>
 
+		<!-- CSS -->
+
+		<link rel="stylesheet" href="/css/main.css" webc:keep />
+		<link rel="stylesheet" :href="getBundleFileUrl('css')" webc:keep />
+
+		<!-- Preload -->
+
+		<link
+			rel="preload"
+			href="/fonts/teko-latin-600-normal.woff2"
+			as="font"
+			type="font/woff2"
+			crossorigin
+		/>
+		<link
+			rel="preload"
+			href="/fonts/work-sans-latin-wght-normal.woff2"
+			as="font"
+			type="font/woff2"
+			crossorigin
+		/>
+		<link
+			rel="preload"
+			href="/fonts/work-sans-latin-wght-italic.woff2"
+			as="font"
+			type="font/woff2"
+			crossorigin
+		/>
+
+		<!-- Meta data -->
+
 		<meta
 			webc:if="$data.description"
 			name="description"
 			:content="$data.description"
 		/>
 		<meta name="generator" :content="$data.eleventy.generator" />
-
 		<link href="/feed.xml" type="application/atom+xml" rel="alternate" />
 
+		<!-- Theme -->
+
 		<link rel="icon" href="/favicon.ico" sizes="any" />
 		<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
 		<meta
@@ -30,6 +62,8 @@
 			media="(prefers-color-scheme: dark)"
 		/>
 
+		<!-- Open Graph text -->
+
 		<meta property="og:site_name" content="fynn.be" />
 		<meta property="og:type" :content="$data.social?.type ?? 'website'" />
 		<meta property="og:url" :content="$data.base + $data.page.url" />
@@ -37,6 +71,8 @@
 		<meta property="og:description" :content="$data.description" />
 		<meta property="og:locale" :content="$data.language" />
 
+		<!-- Open Graph image -->
+
 		<template webc:if="$data.social?.image" webc:nokeep>
 			<meta
 				property="og:image"
@@ -46,23 +82,6 @@
 			<meta property="og:image:width" content="500" />
 			<meta property="og:image:height" content="500" />
 		</template>
-
-		<link rel="stylesheet" href="/css/main.css" webc:keep />
-		<link
-			rel="stylesheet"
-			:href="getBundleFileUrl('css', 'components.element')"
-			webc:keep
-		/>
-		<link
-			rel="stylesheet"
-			:href="getBundleFileUrl('css', 'components.global')"
-			webc:keep
-		/>
-		<link
-			rel="stylesheet"
-			:href="getBundleFileUrl('css', 'layouts')"
-			webc:keep
-		/>
 	</head>
 	<body>
 		<global-header></global-header>
@@ -72,8 +91,11 @@
 				<h1 @text="$data.title"></h1>
 				<slot name="after-title"></slot>
 			</hgroup>
+
 			<global-hero webc:if="$data.hero"></global-hero>
+
 			<slot></slot>
+
 			<global-related webc:if="$data.related"></global-related>
 		</main>
 
diff --git a/components/element-icon.webc b/components/element-icon.webc
index 4d4da31..fe8aba3 100644
--- a/components/element-icon.webc
+++ b/components/element-icon.webc
@@ -21,7 +21,9 @@
 	<path :d="paths[name]" />
 </svg>
 
-<style webc:bucket="components.element">
+<style>
+	@layer components.elements;
+
 	.Icon {
 		block-size: 1em;
 		fill: currentcolor;
diff --git a/components/element-meta.webc b/components/element-meta.webc
index 6255975..604a36e 100644
--- a/components/element-meta.webc
+++ b/components/element-meta.webc
@@ -4,7 +4,9 @@
 	<element-tags webc:if="tags" :@items="tags" @variant="inline"></element-tags>
 </div>
 
-<style webc:bucket="components.element">
+<style>
+	@layer components.elements;
+
 	.Meta {
 		display: flex;
 		flex-wrap: wrap;
diff --git a/components/element-nav.webc b/components/element-nav.webc
index 282e99a..9015bf9 100644
--- a/components/element-nav.webc
+++ b/components/element-nav.webc
@@ -19,7 +19,9 @@
 	</ul>
 </nav>
 
-<style webc:bucket="components.element">
+<style>
+	@layer components.elements;
+
 	.Nav-list {
 		align-items: center;
 		display: flex;
@@ -38,8 +40,8 @@
 		&.is-active {
 			color: var(--color-Brand);
 			text-decoration: underline;
-			text-decoration-thickness: 0.1em;
-			text-underline-offset: 0.4em;
+			text-decoration-thickness: var(--size-border-width-divider);
+			text-underline-offset: 0.375rem;
 		}
 	}
 
diff --git a/components/element-rich-text.webc b/components/element-rich-text.webc
index 388f969..cd7534d 100644
--- a/components/element-rich-text.webc
+++ b/components/element-rich-text.webc
@@ -2,7 +2,9 @@
 	<slot></slot>
 </div>
 
-<style webc:bucket="components.element">
+<style>
+	@layer components.elements;
+
 	.RichText {
 		font-size: var(--typo-RichText-font-size);
 		line-height: var(--typo-RichText-line-height);
@@ -68,40 +70,21 @@
 		}
 
 		blockquote {
-			border-inline-start: 0.25em solid var(--color-Brand);
-			padding-inline-start: 0.75em;
+			border-inline-start: var(--size-border-width-divider) solid currentcolor;
+			padding-inline-start: calc(1em - var(--size-border-width-divider));
 		}
 
 		hr {
-			background: var(--color-Brand);
-			block-size: 0.15em;
+			background: currentcolor;
+			block-size: var(--size-border-width-divider);
 			border: none;
 			margin-block: 2em;
 		}
 
-		/* Tables */
-
-		table {
-			border-collapse: collapse;
-			font-variant-numeric: tabular-nums;
-		}
-
-		th,
-		td {
-			border: 0.1em solid var(--color-Brand);
-			padding-block: 0.2em;
-			padding-inline: 0.5em;
-		}
-
-		th {
-			background: var(--color-HighlightBackground);
-		}
-
 		/* Note */
 
 		.Note {
 			background: var(--color-HighlightBackground);
-			border-radius: var(--size-border-radius);
 			padding: 1em;
 
 			> :first-child {
diff --git a/components/element-tags.webc b/components/element-tags.webc
index 4b78c90..727a8b0 100644
--- a/components/element-tags.webc
+++ b/components/element-tags.webc
@@ -8,7 +8,9 @@
 	</li>
 </ul>
 
-<style webc:bucket="components.element">
+<style>
+	@layer components.elements;
+
 	.Tags {
 		display: flex;
 		flex-wrap: wrap;
diff --git a/components/global-footer.webc b/components/global-footer.webc
index cb4e9a6..e95b040 100644
--- a/components/global-footer.webc
+++ b/components/global-footer.webc
@@ -7,9 +7,12 @@
 	</div>
 </footer>
 
-<style webc:bucket="components.global">
+<style>
+	@layer components.globals;
+
 	.Footer {
-		margin-block-start: 2rem;
-		padding-block: 1rem;
+		border-block-start: var(--size-border-width-divider) solid currentcolor;
+		margin-block-start: 3rem;
+		padding-block: 0.75rem;
 	}
 </style>
diff --git a/components/global-header.webc b/components/global-header.webc
index 98502b1..79972fb 100644
--- a/components/global-header.webc
+++ b/components/global-header.webc
@@ -4,12 +4,25 @@
 	</div>
 </header>
 
-<style webc:bucket="components.global">
+<style>
+	@layer components.globals;
+
 	.Header {
+		animation-fill-mode: both;
+		animation-name: header-border;
+		animation-range: 1rem 2rem;
+		animation-timeline: scroll(root);
 		background: var(--color-SiteBackground);
+		border-block-end: var(--size-border-width-divider) solid transparent;
 		inset-block-start: 0;
 		margin-block-end: 2rem;
 		padding-block: 0.75rem;
 		position: sticky;
 	}
+
+	@keyframes header-border {
+		to {
+			border-block-end-color: currentcolor;
+		}
+	}
 </style>
diff --git a/components/global-hero.webc b/components/global-hero.webc
index 5793068..a1bda17 100644
--- a/components/global-hero.webc
+++ b/components/global-hero.webc
@@ -27,7 +27,9 @@
 	></figcaption>
 </figure>
 
-<style webc:bucket="components.global">
+<style>
+	@layer components.globals;
+
 	.Hero {
 		display: grid;
 		gap: 0.5rem;
diff --git a/components/global-related.webc b/components/global-related.webc
index 768be36..ffbc6e4 100644
--- a/components/global-related.webc
+++ b/components/global-related.webc
@@ -14,7 +14,9 @@
 	</ul>
 </section>
 
-<style webc:bucket="components.global">
+<style>
+	@layer components.globals;
+
 	.Related {
 		margin-block-start: 2rem;
 	}
diff --git a/content/blog/2022-01-30-browser-image-performance.md b/content/blog/2022-01-30-browser-image-performance.md
index 7b921d9..226d85f 100644
--- a/content/blog/2022-01-30-browser-image-performance.md
+++ b/content/blog/2022-01-30-browser-image-performance.md
@@ -52,7 +52,7 @@ Specifications: Intel Core 2 Duo T6400, 4 GB RAM, SATA1 HDD.
 | **.jpg**  |  177.5786 |     241.13594 |    29.14996 |    0.08198 |  270.36788 |
 | **.webp** |  126.1962 |     222.16746 |    28.57188 |    0.07598 |  250.81532 |
 
-<small>[Raw data for the slow device](https://gist.github.com/mvsde/babe7a3c07e0fb5f7b0529580216d357)</small>
+<small>[Raw data for the slow device](https://gist.github.com/mvsde/babe7a3c07e0fb5f7b0529580216d357).</small>
 
 ### Fast device
 
@@ -64,7 +64,7 @@ Specifications: Intel Core i7-10750H, 32 GB RAM, NVMe SSD.
 | **.jpg**  |  177.5786 |      195.2597 |     9.84462 |    0.02324 |   205.1275 |
 | **.webp** |  126.1962 |      188.9901 |    11.29712 |    0.02318 |   200.3104 |
 
-<small>[Raw data for the fast device](https://gist.github.com/mvsde/3e42f33723b0cfff296f01bedc0dea94)</small>
+<small>[Raw data for the fast device](https://gist.github.com/mvsde/3e42f33723b0cfff296f01bedc0dea94).</small>
 
 ## Takeaway
 
diff --git a/content/talks/2024-04-23-accessibility-is-not-a-tech-problem.md b/content/talks/2024-04-23-accessibility-is-not-a-tech-problem.md
index 09e6c4e..55d6075 100644
--- a/content/talks/2024-04-23-accessibility-is-not-a-tech-problem.md
+++ b/content/talks/2024-04-23-accessibility-is-not-a-tech-problem.md
@@ -7,7 +7,7 @@ tags:
 hero:
   iframe: https://pitch.com/embed-link/8fu9f8
   title: Slides for the talk “Accessibility is not a tech problem”
-  aspect_ratio: 1.595
+  aspect_ratio: 1.593
 ---
 
 Accessibility is the intersection of user experience and interface design, frontend and backend development, content management systems, and _human beings_.
diff --git a/content/talks/2024-05-16-forced-colors-windows-contrast-themes.md b/content/talks/2024-05-16-forced-colors-windows-contrast-themes.md
index 121a129..1d72080 100644
--- a/content/talks/2024-05-16-forced-colors-windows-contrast-themes.md
+++ b/content/talks/2024-05-16-forced-colors-windows-contrast-themes.md
@@ -7,7 +7,7 @@ tags:
 hero:
   iframe: https://pitch.com/embed-link/w2wc4w
   title: Slides for the talk “Forced colors and Windows contrast themes”
-  aspect_ratio: 1.595
+  aspect_ratio: 1.593
 ---
 
 A showcase of _Windows contrast themes_ and the potential issues when _forced colors_ aren’t considered during development.
diff --git a/eleventy.config.js b/eleventy.config.js
index 3832e96..9006bf4 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -8,6 +8,7 @@ import * as filters from "./eleventy/filters/index.js";
 import * as functions from "./eleventy/functions/index.js";
 import libraryMarkdown from "./eleventy/libraries/markdown.js";
 import imageFeed from "./eleventy/shortcodes/image-feed.js";
+import bundleCSSLayer from "./eleventy/transforms/bundle-css-layer.js";
 
 const directories = {
 	// Relative to current directory.
@@ -25,30 +26,11 @@ const passthroughCopyList = {
 	public: "/",
 };
 
-/**
- * Add CSS Cascade Layer to bundle
- * @param {string} content Bundle content
- * @returns {string}
- */
-function bundleAddLayer(content) {
-	const bucket = this.buckets[0];
-
-	if (!bucket) {
-		return content;
-	}
-
-	const layeredContent = `@layer ${bucket} {
-		${content}
-	}`;
-
-	return layeredContent;
-}
-
 const pluginWebcOptions = {
 	components: "components/**/*.webc",
 	bundlePluginOptions: {
 		toFileDirectory: "css/bundle",
-		transforms: [bundleAddLayer],
+		transforms: [bundleCSSLayer],
 	},
 };
 
diff --git a/eleventy/transforms/bundle-css-layer.js b/eleventy/transforms/bundle-css-layer.js
new file mode 100644
index 0000000..7f6d01f
--- /dev/null
+++ b/eleventy/transforms/bundle-css-layer.js
@@ -0,0 +1,22 @@
+/**
+ * Add CSS Cascade Layer to bundle
+ * @param {string} content Bundle content
+ * @returns {string}
+ */
+export default function bundleCSSLayer(content) {
+	if (this.type !== "css") {
+		return content;
+	}
+
+	if (!content.includes("@layer")) {
+		return content;
+	}
+
+	const layeredContent = content
+		.split("@layer")
+		.slice(1)
+		.map((part) => "@layer" + part.replace(";", " {") + "\n}")
+		.join("\n\n");
+
+	return layeredContent;
+}
diff --git a/generate-fonts-fallback.js b/generate-fonts-fallback.js
deleted file mode 100644
index 85f9c94..0000000
--- a/generate-fonts-fallback.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import fs from "node:fs/promises";
-
-import { createFontStack } from "@capsizecss/core";
-import Arial from "@capsizecss/metrics/arial";
-import NotoSans from "@capsizecss/metrics/notoSans";
-import Roboto from "@capsizecss/metrics/roboto";
-import Teko from "@capsizecss/metrics/teko";
-import WorkSans from "@capsizecss/metrics/workSans";
-import prettier from "prettier";
-import stylelint from "stylelint";
-
-const filepath = "./public/css/global/fonts-fallback.css";
-
-const heading = createFontStack([Teko, NotoSans, Roboto, Arial]);
-const text = createFontStack([WorkSans, NotoSans, Roboto, Arial]);
-
-let code = `
-${heading.fontFaces}
-${text.fontFaces}
-`;
-
-// Run Stylelint autofixer
-const linterResult = await stylelint.lint({ code, fix: true });
-code = linterResult.code ?? "";
-
-// Run Prettier formatter
-const prettierOptions = await prettier.resolveConfig(filepath, {
-	editorconfig: true,
-});
-code = await prettier.format(code, { filepath, ...prettierOptions });
-
-await fs.writeFile(filepath, code);
diff --git a/layouts/default.webc b/layouts/default.webc
index 384b600..30b0793 100644
--- a/layouts/default.webc
+++ b/layouts/default.webc
@@ -1,5 +1,5 @@
-<page-base webc:nokeep>
+<base-page webc:nokeep>
 	<element-rich-text webc:if="content">
 		<template @raw="content" webc:nokeep></template>
 	</element-rich-text>
-</page-base>
+</base-page>
diff --git a/layouts/gallery.webc b/layouts/gallery.webc
index bd0ec55..bafd13e 100644
--- a/layouts/gallery.webc
+++ b/layouts/gallery.webc
@@ -7,7 +7,7 @@
 	}
 </script>
 
-<page-base webc:nokeep>
+<base-page webc:nokeep>
 	<element-rich-text webc:if="content">
 		<template @raw="content" webc:nokeep></template>
 	</element-rich-text>
@@ -36,9 +36,11 @@
 			</a>
 		</li>
 	</ol>
-</page-base>
+</base-page>
+
+<style>
+	@layer layouts;
 
-<style webc:bucket="layouts">
 	.LayoutGallery-list {
 		display: grid;
 		gap: 1.5rem;
diff --git a/layouts/post.webc b/layouts/post.webc
index c909dce..66d29fb 100644
--- a/layouts/post.webc
+++ b/layouts/post.webc
@@ -1,4 +1,4 @@
-<page-base webc:nokeep>
+<base-page webc:nokeep>
 	<element-meta
 		slot="after-title"
 		class="LayoutPost-meta"
@@ -9,9 +9,11 @@
 	<element-rich-text webc:if="content">
 		<template @raw="content" webc:nokeep></template>
 	</element-rich-text>
-</page-base>
+</base-page>
+
+<style>
+	@layer layouts;
 
-<style webc:bucket="layouts">
 	.LayoutPost-meta {
 		margin-block-start: 0.5rem;
 	}
diff --git a/layouts/tag.webc b/layouts/tag.webc
index b5c5fd5..1ab80bc 100644
--- a/layouts/tag.webc
+++ b/layouts/tag.webc
@@ -7,7 +7,7 @@
 	}
 </script>
 
-<page-base webc:nokeep>
+<base-page webc:nokeep>
 	<element-rich-text webc:if="content">
 		<template @raw="content" webc:nokeep></template>
 	</element-rich-text>
@@ -32,9 +32,11 @@
 			></element-meta>
 		</li>
 	</ol>
-</page-base>
+</base-page>
+
+<style>
+	@layer layouts;
 
-<style webc:bucket="layouts">
 	.LayoutTag-list {
 		display: grid;
 		gap: 2.5rem;
diff --git a/layouts/tags.webc b/layouts/tags.webc
index 58e098f..c1c6778 100644
--- a/layouts/tags.webc
+++ b/layouts/tags.webc
@@ -1,4 +1,4 @@
-<page-base webc:nokeep>
+<base-page webc:nokeep>
 	<element-rich-text webc:if="content">
 		<template @raw="content" webc:nokeep></template>
 	</element-rich-text>
@@ -12,9 +12,11 @@
 			></a>
 		</li>
 	</ul>
-</page-base>
+</base-page>
+
+<style>
+	@layer layouts;
 
-<style webc:bucket="layouts">
 	.LayoutTags-list {
 		display: grid;
 		gap: 1.5rem;
diff --git a/package-lock.json b/package-lock.json
index 559e574..f3569fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,8 +14,6 @@
 				"@11ty/eleventy-plugin-rss": "^2.0.1",
 				"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
 				"@11ty/eleventy-plugin-webc": "^0.11.2",
-				"@capsizecss/core": "^4.1.2",
-				"@capsizecss/metrics": "^3.2.0",
 				"@eslint/js": "^9.5.0",
 				"eslint": "^9.5.0",
 				"eslint-plugin-simple-import-sort": "^12.1.0",
@@ -483,23 +481,6 @@
 				"node": ">=4"
 			}
 		},
-		"node_modules/@capsizecss/core": {
-			"version": "4.1.2",
-			"resolved": "https://registry.npmjs.org/@capsizecss/core/-/core-4.1.2.tgz",
-			"integrity": "sha512-5tMjLsVsaEEwJ816y3eTfhhTIyUWNFt58x6YcHni0eV5tta8MGDOAIe+CV5ICb5pguXgDpNGLprqhPqBWtkFSg==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"csstype": "^3.1.1"
-			}
-		},
-		"node_modules/@capsizecss/metrics": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmjs.org/@capsizecss/metrics/-/metrics-3.2.0.tgz",
-			"integrity": "sha512-EVWRXJaakH6NTq+7cZawgFiqA+UyESMszN/c1oDHbC/b0SAzQJ/QLS0xpaa3Y+YMfXOkEEjkuChYIV5pSkgmcg==",
-			"dev": true,
-			"license": "MIT"
-		},
 		"node_modules/@csstools/css-parser-algorithms": {
 			"version": "2.6.3",
 			"resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.3.tgz",
@@ -1800,13 +1781,6 @@
 				"node": ">=4"
 			}
 		},
-		"node_modules/csstype": {
-			"version": "3.1.3",
-			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-			"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-			"dev": true,
-			"license": "MIT"
-		},
 		"node_modules/debug": {
 			"version": "4.3.5",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
diff --git a/package.json b/package.json
index 7fc869c..9d4b596 100644
--- a/package.json
+++ b/package.json
@@ -33,8 +33,6 @@
 		"@11ty/eleventy-plugin-rss": "^2.0.1",
 		"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
 		"@11ty/eleventy-plugin-webc": "^0.11.2",
-		"@capsizecss/core": "^4.1.2",
-		"@capsizecss/metrics": "^3.2.0",
 		"@eslint/js": "^9.5.0",
 		"eslint": "^9.5.0",
 		"eslint-plugin-simple-import-sort": "^12.1.0",
diff --git a/public/css/global/base.css b/public/css/global/base.css
index 3606392..00dc47c 100644
--- a/public/css/global/base.css
+++ b/public/css/global/base.css
@@ -20,14 +20,6 @@ body {
 	min-block-size: 100svh;
 }
 
-iframe {
-	border: none;
-
-	@media (forced-colors) {
-		border: 0.0625rem solid;
-	}
-}
-
 img,
 svg,
 iframe {
@@ -36,14 +28,14 @@ iframe {
 	vertical-align: middle;
 }
 
-img,
 iframe {
-	border-radius: var(--size-border-radius);
+	background: var(--color-HighlightBackground);
+	border: var(--size-border-width-divider) solid currentcolor;
 }
 
 a {
 	color: var(--color-Brand);
-	text-underline-offset: 0.1em;
+	text-underline-offset: 0.15em;
 }
 
 sup {
@@ -59,7 +51,6 @@ sup {
 }
 
 :focus-visible {
-	border-radius: var(--size-border-radius);
 	outline: 0.125rem solid var(--color-Brand);
 	outline-offset: 0.2em;
 }
diff --git a/public/css/global/fonts-fallback.css b/public/css/global/fonts-fallback.css
deleted file mode 100644
index 7b1c0f2..0000000
--- a/public/css/global/fonts-fallback.css
+++ /dev/null
@@ -1,49 +0,0 @@
-@font-face {
-	ascent-override: 155.511%;
-	descent-override: 77.1062%;
-	font-family: "Teko Fallback: Noto Sans";
-	size-adjust: 61.6034%;
-	src: local("Noto Sans Regular"), local("NotoSans-Regular");
-}
-
-@font-face {
-	ascent-override: 145.9389%;
-	descent-override: 72.3601%;
-	font-family: "Teko Fallback: Roboto";
-	size-adjust: 65.6439%;
-	src: local("Roboto"), local("Roboto-Regular");
-}
-
-@font-face {
-	ascent-override: 146.2593%;
-	descent-override: 72.519%;
-	font-family: "Teko Fallback: Arial";
-	line-gap-override: 0%;
-	size-adjust: 65.5001%;
-	src: local("Arial"), local("ArialMT");
-}
-
-@font-face {
-	ascent-override: 88.3407%;
-	descent-override: 23.0826%;
-	font-family: "Work Sans Fallback: Noto Sans";
-	size-adjust: 105.2743%;
-	src: local("Noto Sans Regular"), local("NotoSans-Regular");
-}
-
-@font-face {
-	ascent-override: 82.9031%;
-	descent-override: 21.6618%;
-	font-family: "Work Sans Fallback: Roboto";
-	size-adjust: 112.1791%;
-	src: local("Roboto"), local("Roboto-Regular");
-}
-
-@font-face {
-	ascent-override: 83.0851%;
-	descent-override: 21.7093%;
-	font-family: "Work Sans Fallback: Arial";
-	line-gap-override: 0%;
-	size-adjust: 111.9334%;
-	src: local("Arial"), local("ArialMT");
-}
diff --git a/public/css/main.css b/public/css/main.css
index 6e816fc..4708d34 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1,4 +1,4 @@
-@layer global, typography, components.element, components.global, layouts, utilities;
+@layer global, components.elements, components.globals, layouts, utilities;
 
 /* Tokens */
 
@@ -9,24 +9,14 @@
 /* Global */
 
 @import url("global/fonts.css") layer(global);
-@import url("global/fonts-fallback.css") layer(global);
 @import url("global/base.css") layer(global);
 
 /* Typography */
 
-@import url("typography/code.css") layer(typography);
-@import url("typography/headings.css") layer(typography);
-
-/* Components */
-
-/* Automatically bundled by Eleventy */
-
-/* Layouts */
-
-/* Automatically bundled by Eleventy */
+@import url("typography/code.css") layer(global);
+@import url("typography/headings.css") layer(global);
+@import url("typography/table.css") layer(global);
 
 /* Utilities */
 
-@import url("utilities/container.css");
-@import url("utilities/list.css");
-@import url("utilities/scroll.css");
+@import url("utilities.css") layer(utilities);
diff --git a/public/css/tokens/sizes.css b/public/css/tokens/sizes.css
index 9165909..7a90ad3 100644
--- a/public/css/tokens/sizes.css
+++ b/public/css/tokens/sizes.css
@@ -1,5 +1,5 @@
 :root {
-	/* Border radius */
+	/* Border width */
 
-	--size-border-radius: 0.25rem;
+	--size-border-width-divider: 0.125rem;
 }
diff --git a/public/css/tokens/typo.css b/public/css/tokens/typo.css
index 0301da5..aa90247 100644
--- a/public/css/tokens/typo.css
+++ b/public/css/tokens/typo.css
@@ -1,12 +1,10 @@
 :root {
 	/* Default */
-	--typo-Default-font-family: "Work Sans", "Work Sans Fallback: Noto Sans",
-		"Work Sans Fallback: Roboto", "Work Sans Fallback: Arial", sans-serif;
+	--typo-Default-font-family: "Work Sans", "Roboto", "Noto Sans", sans-serif;
 	--typo-Default-line-height: 1.4;
 
 	/* Heading */
-	--typo-Heading-font-family: "Teko", "Teko Fallback: Noto Sans",
-		"Teko Fallback: Roboto", "Teko Fallback: Arial", sans-serif;
+	--typo-Heading-font-family: "Teko", "Impact", "Arial Narrow", sans-serif;
 	--typo-Heading-font-weight: 600;
 	--typo-Heading-line-height: 1;
 
diff --git a/public/css/typography/code.css b/public/css/typography/code.css
index 3dfce36..b5405d8 100644
--- a/public/css/typography/code.css
+++ b/public/css/typography/code.css
@@ -1,7 +1,6 @@
 :not(pre) > code,
 pre {
 	background: var(--color-HighlightBackground);
-	border-radius: var(--size-border-radius);
 	font-family: var(--typo-Code-font-family);
 	font-size: var(--typo-Code-font-size);
 	tab-size: 2;
@@ -19,69 +18,69 @@ pre {
 pre {
 	overflow-x: auto;
 	padding: 1em;
-}
 
-.token.comment {
-	color: var(--color-Code-comment);
-}
+	.comment {
+		color: var(--color-Code-comment);
+	}
 
-.token.property {
-	color: var(--color-Code-property);
-}
+	.punctuation {
+		color: var(--color-Code-punctuation);
+	}
 
-.token.attr-name {
-	color: var(--color-Code-attrName);
-}
+	.interpolation-punctuation {
+		color: var(--color-Code-interpolation);
+	}
 
-.token.attr-value {
-	color: var(--color-Code-attrValue);
-}
+	.keyword {
+		color: var(--color-Code-keyword);
+	}
 
-.token.key {
-	color: var(--color-Code-key);
-}
+	.tag,
+	.tag > .punctuation:is(:first-child, :last-child) {
+		color: var(--color-Code-tag);
+	}
 
-.token.selector {
-	color: var(--color-Code-selector);
-}
+	.attr-name {
+		color: var(--color-Code-attrName);
+	}
 
-.token.tag,
-.token.tag > .punctuation:is(:first-child, :last-child) {
-	color: var(--color-Code-tag);
-}
+	.attr-value {
+		color: var(--color-Code-attrValue);
+	}
 
-.token.keyword {
-	color: var(--color-Code-keyword);
-}
+	.rule {
+		color: var(--color-Code-rule);
+	}
 
-.token.important {
-	color: var(--color-Code-important);
-}
+	.selector {
+		color: var(--color-Code-selector);
+	}
 
-.token.punctuation {
-	color: var(--color-Code-punctuation);
-}
+	.property {
+		color: var(--color-Code-property);
+	}
 
-.token.interpolation-punctuation {
-	color: var(--color-Code-interpolation);
-}
+	.key {
+		color: var(--color-Code-key);
+	}
 
-.token.string {
-	color: var(--color-Code-string);
-}
+	.important {
+		color: var(--color-Code-important);
+	}
 
-.token.number {
-	color: var(--color-Code-number);
-}
+	.function {
+		color: var(--color-Code-function);
+	}
 
-.token.function {
-	color: var(--color-Code-function);
-}
+	.parameter {
+		color: var(--color-Code-parameter);
+	}
 
-.token.parameter {
-	color: var(--color-Code-parameter);
-}
+	.string {
+		color: var(--color-Code-string);
+	}
 
-.token.rule {
-	color: var(--color-Code-rule);
+	.number {
+		color: var(--color-Code-number);
+	}
 }
diff --git a/public/css/typography/table.css b/public/css/typography/table.css
new file mode 100644
index 0000000..b432ba5
--- /dev/null
+++ b/public/css/typography/table.css
@@ -0,0 +1,27 @@
+table {
+	border-collapse: collapse;
+	font-variant-numeric: tabular-nums;
+}
+
+th,
+td {
+	border: 0.0625rem solid currentcolor;
+	padding-block: 0.25em;
+	padding-inline: 0.5em;
+}
+
+th {
+	text-align: start;
+}
+
+/* Workaround for markdown tables not supporting <th> in <tbody> */
+th,
+td:has(strong:only-child) {
+	background: var(--color-HighlightBackground);
+	font-size: 0.9em;
+}
+
+th,
+td strong {
+	font-weight: 600;
+}
diff --git a/public/css/utilities.css b/public/css/utilities.css
new file mode 100644
index 0000000..c47b582
--- /dev/null
+++ b/public/css/utilities.css
@@ -0,0 +1,21 @@
+/* Container */
+
+.u-container {
+	inline-size: 100%;
+	margin-inline: auto;
+	max-inline-size: 64rem;
+	min-inline-size: 0;
+	padding-inline: 1rem;
+}
+
+/* Lists */
+
+.u-listUnstyled {
+	list-style: none;
+}
+
+/* Overflow */
+
+.u-scrollHorizontal {
+	overflow-x: auto;
+}
diff --git a/public/css/utilities/container.css b/public/css/utilities/container.css
deleted file mode 100644
index f333711..0000000
--- a/public/css/utilities/container.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.u-container {
-	inline-size: 100%;
-	margin-inline: auto;
-	max-inline-size: 64rem;
-	min-inline-size: 0;
-	padding-inline: 1rem;
-}
diff --git a/public/css/utilities/list.css b/public/css/utilities/list.css
deleted file mode 100644
index 79188bf..0000000
--- a/public/css/utilities/list.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.u-listUnstyled {
-	list-style: none;
-}
diff --git a/public/css/utilities/scroll.css b/public/css/utilities/scroll.css
deleted file mode 100644
index 22350e8..0000000
--- a/public/css/utilities/scroll.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.u-scrollHorizontal {
-	overflow-x: auto;
-}