From a5032fc06a39b08ab506de7abcf873cff47da968 Mon Sep 17 00:00:00 2001
From: Derek Lewis <DerekNonGeneric@inf.is>
Date: Wed, 26 Aug 2026 21:29:19 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=E2=9C=A8=EF=BC=9Alet=20the=20tab?=
 =?UTF-8?q?=20mark=20answer=20to=20the=20theme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The mark went out black and white and stayed that way, so a dark tab
bar got a bright white disc: legible, but louder than anything else on
the site and in colors the site does not use. It reads
`prefers-color-scheme` now and is drawn in the ink and the parchment,
which is the browser's own theme rather than the page's -- a mark sits
in the chrome, and the chrome is what it has to be legible against.

`inlineStyles` had to come off the optimizer. It folds a stylesheet
into the attributes it applies to and drops what is left, which for a
mark that answers to a media query means keeping one theme and losing
the other, silently. It costs 26 bytes across thirty files.

The link that asks for it was three things at once: an icon, a preload,
and a subresource integrity check. The hash was of the file as written
rather than the file as served, so it described bytes nobody receives,
and the browser said as much on every page load -- integrity is ignored
for a destination that does not support it. It is an icon now.

Signed-off-by: Derek Lewis <DerekNonGeneric@inf.is>
Assisted-by: Claude-Code:claude-opus-5
Fixes: https://github.com/OpenINF/openinf.github.io/issues/1544
---
 _assets/img/logogram.svg | 28 +++++++++++++++++++++++++++-
 _includes/head.liquid    |  9 +--------
 eleventy.config.mjs      | 20 ++++++++++++++++++--
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/_assets/img/logogram.svg b/_assets/img/logogram.svg
index 0fe52cc77..5a8588e61 100644
--- a/_assets/img/logogram.svg
+++ b/_assets/img/logogram.svg
@@ -9,8 +9,34 @@
 *****************************************************************************-->
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
   <title>The OpenINF Logo</title>
-  <circle cx="50" cy="50" r="45" fill="#FFF" stroke="#000" stroke-width="10" />
+  <style>
+    /* The ink and the parchment, so a tab shows the mark in the colors the
+      site is drawn in rather than in black and white. */
+    .disc {
+      fill: #e7e7d6;
+      stroke: #1d1916;
+    }
+
+    .mark {
+      fill: #1d1916;
+    }
+
+    /* Reading the browser's own theme, not the page's: a mark sits in the
+      chrome, and the chrome is what it has to be legible against. */
+    @media (prefers-color-scheme: dark) {
+      .disc {
+        fill: #1d1916;
+        stroke: #e7e7d6;
+      }
+
+      .mark {
+        fill: #e7e7d6;
+      }
+    }
+  </style>
+  <circle class="disc" cx="50" cy="50" r="45" stroke-width="10" />
   <path
+    class="mark"
     d="M56.55 20c-3.87 0-7.49 3-7.49 6.98 0 4 3.62 7.08 7.49 7A7.26 7.26 0 0 0 64.03 27c0-3.96-3.6-7-7.48-7zm-6.36 20.33c-4.59 0-10.49.71-13.92 4.06-6.19 6 3.1 12.4 7.91 15.09-2.08 7.5-6.14 19.75 5.84 20.5 4.48.12 10.55-.6 13.76-4.12 5.78-6.4-2.24-12.34-7.42-15.15 2.16-7.62 6.07-20.09-6.17-20.38zm-8.47 5.14c1.45-.1 3.04.34 3.85 1.03l.02.02c2.06 1.72.42 6.48-.09 8.49-1.76-1.08-7.24-4.6-6.76-7.42.24-1.4 1.54-2.02 2.98-2.11zm13.39 19.67c2.8 1.61 4.96 3.37 5.61 5.38.93 3-3.08 5.13-5.35 3.5-2.49-1.87-.94-6.55-.26-8.88z"
   />
 </svg>
diff --git a/_includes/head.liquid b/_includes/head.liquid
index 04558622c..37c718bff 100644
--- a/_includes/head.liquid
+++ b/_includes/head.liquid
@@ -5,14 +5,7 @@
     from anyone who needs it.
   {%- endcomment -%}
   <meta name='viewport' content='width=device-width,initial-scale=1'>
-  <link
-    type='image/svg+xml'
-    rel='shortcut icon preload'
-    as='image'
-    href='/assets/img/logogram.svg'
-    integrity='sha512-oCOiQlcNbSk49EgFYP+3Hr94accDzoufgSJ4EHPnqMF5FthjzWh0ZWN2zWHSBwH+gsUn4B0IFdmex9Jq9usqmg=='
-    crossorigin='anonymous'
-  >
+  <link rel='icon' type='image/svg+xml' href='/assets/img/logogram.svg'>
   <meta
     name='description'
     content='{{ description | default: siteDescription }}'
diff --git a/eleventy.config.mjs b/eleventy.config.mjs
index 3422ec946..aab887652 100644
--- a/eleventy.config.mjs
+++ b/eleventy.config.mjs
@@ -180,10 +180,26 @@ export default async function (eleventyConfig) {
   // shortest name free in each is the same name, so two marks that arrived
   // with different ids would leave with one between them and `url(#…)` in
   // the second would reach into the first.
+  // `inlineStyles` folds a stylesheet into the attributes it applies to and
+  // drops what is left, which for a mark answering to `prefers-color-scheme`
+  // means keeping one theme and losing the other.
+  const svgo = {
+    multipass: true,
+    plugins: [
+      {
+        name: 'preset-default',
+        params: { overrides: { inlineStyles: false } },
+      },
+    ],
+  };
+
   const inline = {
     multipass: true,
     plugins: [
-      { name: 'preset-default', params: { overrides: { cleanupIds: false } } },
+      {
+        name: 'preset-default',
+        params: { overrides: { cleanupIds: false, inlineStyles: false } },
+      },
     ],
   };
 
@@ -197,7 +213,7 @@ export default async function (eleventyConfig) {
    * @param {object} [config] What to pass the optimizer.
    * @returns {string} The optimized markup.
    */
-  const shrinkSvg = (svg, config = { multipass: true }) => {
+  const shrinkSvg = (svg, config = svgo) => {
     const optimized = optimizeSvg(svg, config).data;
 
     if (hasViewBox(svg) && !hasViewBox(optimized)) {