glide: add per-site page CSS, starting with danluu.com
Assisted-by: Claude Opus 5 via Claude Code
change lxlqlskxllylqpmmunpnrxwnwnvlyqtt
commit 4cba087bb5d398a5115d63ddea0a23f9b49320ee
author Alpha Chen <alpha@kejadlen.dev>
date
parent ztptqqtv
diff --git a/.config/glide/glide.ts b/.config/glide/glide.ts
index 5042912b..58941aa8 100644
--- a/.config/glide/glide.ts
+++ b/.config/glide/glide.ts
@@ -18,6 +18,7 @@
 
 glide.include("hints.glide.ts");
 glide.include("splits.glide.ts");
+glide.include("styles.glide.ts");
 glide.include("tridactyl.glide.ts");
 glide.fs.exists("local.glide.ts").then(exists => {
   if (exists) glide.include("local.glide.ts");
diff --git a/.config/glide/styles.glide.ts b/.config/glide/styles.glide.ts
new file mode 100644
index 00000000..e73b8fa1
--- /dev/null
+++ b/.config/glide/styles.glide.ts
@@ -0,0 +1,47 @@
+/**
+ * Per-site page CSS.
+ *
+ * `glide.styles.add` only reaches the browser UI, so page styling goes through
+ * the extension API. `browser.contentScripts.register` is the one that takes
+ * CSS as an inline string, and registering at `document_start` styles every
+ * matching load before first paint.
+ *
+ * Injected at author origin, which the cascade orders before the page's own
+ * sheets — a page rule wins at equal specificity. If a site fights back, use
+ * `browser.scripting.insertCSS({ origin: "USER" })` for it instead.
+ */
+
+const siteStyles: Record<string, string> = {
+  // Unstyled HTML: no measure, no line-height, default Times.
+  "*://danluu.com/*": css`
+    body {
+      max-width: 68ch;
+      margin-inline: auto;
+      padding: 2rem 1.25rem 4rem;
+      font-family: Charter, "Iowan Old Style", Georgia, serif;
+      font-size: 1.125rem;
+      line-height: 1.6;
+    }
+
+    /* The measure would crush his 13-column benchmark tables, so let them out
+       and centre them on the column — auto margins collapse to 0 once an
+       element is wider than its container, hence left/translate. */
+    main table {
+      display: block;
+      width: fit-content;
+      max-width: 92vw;
+      overflow-x: auto;
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  `,
+};
+
+for (const [matches, code] of Object.entries(siteStyles)) {
+  browser.contentScripts.register({
+    matches: [matches],
+    css: [{ code }],
+    runAt: "document_start",
+  });
+}