From 8376c68f8fa0a9d60c766f7ff4899381967e543d Mon Sep 17 00:00:00 2001
From: Bendik Aagaard Lynghaug <bendik.lynghaug@gmail.com>
Date: Thu, 1 Oct 2026 09:33:27 +0200
Subject: [PATCH] wordmark_ink: an SVG wordmark drawn in the page's own ink,
 following light and dark everywhere

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GT37Z1Xtfd9pUuQtMTg6Yt
---
 CHANGELOG.md              |  4 ++++
 docs/content-reference.md |  1 +
 src/app.rs                | 27 +++++++++++++++++++++++----
 src/content/mod.rs        |  8 ++++++++
 style/main.css            | 14 ++++++++++++++
 5 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 95523ea..9ac94fe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@ One line per change, grouped by the release that shipped it. Newest
 first. A release is a Cargo.toml bump plus a `v<version>` tag; the
 content repos pin the tag they run (see the end of this file).
 
+## 0.6.11 (2026-10-01)
+
+- `wordmark_ink: true` in `site.yaml`: an SVG wordmark is drawn in the page's own ink, as a mask over the text colour, so it follows the page's light and dark in every browser. A wordmark shown as an `<img>` only knows the system's setting, and some browsers don't pass even that on. Opacity in the file still shows, so a lighter line stays lighter. Opt-in, for one-colour marks; a mark with a colour of its own keeps its colours.
+
 ## 0.6.10 (2026-09-30)
 
 - Trainer: who a business is gets a page of its own ("who are we?", `/hvem` in Norwegian), with nothing to do on it. It has one card per need that `presents` (the people, the work, each shown as picture cards) and one for the plan's `values`. The front door leads there instead of carrying it all.
diff --git a/docs/content-reference.md b/docs/content-reference.md
index e232167..27aeee6 100644
--- a/docs/content-reference.md
+++ b/docs/content-reference.md
@@ -24,6 +24,7 @@ on every hot reload, and in CI through `iris check`.
 ```yaml
 title: Vestmark kommune          # the browser title and the header
 wordmark: /site/logo.svg         # an image instead of the title
+wordmark_ink: true               # a one-colour SVG mark drawn in the page's own ink
 wordmark_invert: true            # flip it in dark mode
 wordmark_height: 2.4             # rem
 lang: no                         # the interface language: en or no
diff --git a/src/app.rs b/src/app.rs
index ed3e9af..86e33c4 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -973,10 +973,29 @@ fn Hero(
         }
     });
     let has_slides = slideshow.is_some();
-    let mark = move || view! {
-        <a class="wordmark" class:wordmark-house=house_wordmark href="/">
-            <img src=wordmark.clone() alt=site_title.clone() style=wordmark_style.clone()/>
-        </a>
+    // In the page's ink (`wordmark_ink`): a span the file masks, sized
+    // by the file's own proportions through an invisible copy of it,
+    // and named for screen readers as the image would have been.
+    let ink = site.wordmark_ink;
+    let mark = move || {
+        if ink {
+            let mask = format!("--wordmark-src:url(\"{}\")", wordmark.replace('"', "%22"));
+            view! {
+                <a class="wordmark wordmark-ink" href="/" aria-label=site_title.clone()>
+                    <span class="wordmark-ink-mark" style=mask>
+                        <img src=wordmark.clone() alt="" aria-hidden="true" style=wordmark_style.clone()/>
+                    </span>
+                </a>
+            }
+            .into_any()
+        } else {
+            view! {
+                <a class="wordmark" class:wordmark-house=house_wordmark href="/">
+                    <img src=wordmark.clone() alt=site_title.clone() style=wordmark_style.clone()/>
+                </a>
+            }
+            .into_any()
+        }
     };
 
     view! {
diff --git a/src/content/mod.rs b/src/content/mod.rs
index 188951e..000622a 100644
--- a/src/content/mod.rs
+++ b/src/content/mod.rs
@@ -767,6 +767,14 @@ pub struct SiteConfig {
     /// intrinsic pixel height.
     #[serde(default)]
     pub wordmark_height: Option<f32>,
+    /// Draw an SVG wordmark in the page's own ink instead of its own
+    /// colours: the file becomes a mask over the text colour, so it
+    /// follows the page's light and dark (and any theme a site adds),
+    /// where an `<img>` only ever knows the system's. Opacity in the
+    /// file still shows, so a lighter line stays lighter. For a
+    /// one-colour mark; a mark with a colour of its own keeps `false`.
+    #[serde(default)]
+    pub wordmark_ink: bool,
     /// BCP 47-ish language code for the portal's own chrome strings
     /// ("Asked by", the nav lead...) and the html lang attribute.
     /// `None` means "en"; unknown codes fall back to English per key.
diff --git a/style/main.css b/style/main.css
index eda4044..71c74a6 100644
--- a/style/main.css
+++ b/style/main.css
@@ -244,6 +244,20 @@ main.not-found {
   display: block;
 }
 
+/* A wordmark in the page's ink (site.yaml `wordmark_ink`): the file is a
+   mask over the text colour. The invisible image inside gives the span
+   the file's own size. */
+.wordmark-ink-mark {
+  display: block;
+  background: var(--ink);
+  -webkit-mask: var(--wordmark-src) center / contain no-repeat;
+  mask: var(--wordmark-src) center / contain no-repeat;
+}
+
+.wordmark-ink-mark img {
+  visibility: hidden;
+}
+
 .hero-copy h1 {
   font-size: 2.1rem;
 }