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

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! {

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.