site.yaml wordmark_height; raster logos keep their colors
Custom wordmark sizing per site (0.5-6 rem, clamped at render), and the light-theme invert now applies only to .svg wordmarks - the white-stroke house style - so a client's raster logo is never recolored. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y42TyF8Zu7NGRR2893vNcZ
This commit is contained in:
co-authored by
Claude Fable 5
parent
3b2cdc07b7
commit
f4e9f6d0ba
+16
-2
@@ -555,7 +555,21 @@ fn Hero(title: String, description: String, landing: bool, site: SiteConfig, cur
|
|||||||
None
|
None
|
||||||
};
|
};
|
||||||
let has_module = module.is_some();
|
let has_module = module.is_some();
|
||||||
|
// Light theme inverts white-stroke wordmarks to ink. The house
|
||||||
|
// mark and the sibling-site marks are all white-stroke SVGs; a
|
||||||
|
// raster logo is a client brand and keeps its colors.
|
||||||
|
let house_wordmark = site
|
||||||
|
.wordmark
|
||||||
|
.as_deref()
|
||||||
|
.map(|w| w.ends_with(".svg"))
|
||||||
|
.unwrap_or(true);
|
||||||
let wordmark = site.wordmark.clone().unwrap_or_else(|| "/wordmark.svg".to_string());
|
let wordmark = site.wordmark.clone().unwrap_or_else(|| "/wordmark.svg".to_string());
|
||||||
|
// Clamped server-side too, but belt and braces for the inline style.
|
||||||
|
let wordmark_style = site
|
||||||
|
.wordmark_height
|
||||||
|
.filter(|h| (0.5..=6.0).contains(h))
|
||||||
|
.map(|h| format!("height: {h}rem"))
|
||||||
|
.unwrap_or_default();
|
||||||
let site_title = site.title.clone().unwrap_or_else(|| SITE_NAME.to_string());
|
let site_title = site.title.clone().unwrap_or_else(|| SITE_NAME.to_string());
|
||||||
|
|
||||||
let piece_ref: NodeRef<leptos::html::Div> = NodeRef::new();
|
let piece_ref: NodeRef<leptos::html::Div> = NodeRef::new();
|
||||||
@@ -641,8 +655,8 @@ fn Hero(title: String, description: String, landing: bool, site: SiteConfig, cur
|
|||||||
}
|
}
|
||||||
})}
|
})}
|
||||||
<div class="hero-copy">
|
<div class="hero-copy">
|
||||||
<a class="wordmark" href="/">
|
<a class="wordmark" class:wordmark-house=house_wordmark href="/">
|
||||||
<img src=wordmark alt=site_title/>
|
<img src=wordmark alt=site_title style=wordmark_style/>
|
||||||
</a>
|
</a>
|
||||||
<h1>{title}</h1>
|
<h1>{title}</h1>
|
||||||
<p>{description}</p>
|
<p>{description}</p>
|
||||||
|
|||||||
@@ -513,6 +513,11 @@ pub struct SiteConfig {
|
|||||||
/// `None` falls back to `/wordmark.svg`.
|
/// `None` falls back to `/wordmark.svg`.
|
||||||
#[serde(default)]
|
#[serde(default)]
|
||||||
pub wordmark: Option<String>,
|
pub wordmark: Option<String>,
|
||||||
|
/// Wordmark display height in rem (0.5–6.0). `None` keeps the
|
||||||
|
/// stylesheet's default. Raster logos look best at or below their
|
||||||
|
/// intrinsic pixel height.
|
||||||
|
#[serde(default)]
|
||||||
|
pub wordmark_height: Option<f32>,
|
||||||
#[serde(default)]
|
#[serde(default)]
|
||||||
pub hero: HeroConfig,
|
pub hero: HeroConfig,
|
||||||
}
|
}
|
||||||
|
|||||||
+4
-4
@@ -99,10 +99,10 @@
|
|||||||
--hero-glow: rgba(246, 245, 241, 0.85);
|
--hero-glow: rgba(246, 245, 241, 0.85);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* The wordmark SVG is a hardcoded white stroke (also used raw in
|
/* The house wordmark SVG is a hardcoded white stroke (also used
|
||||||
dark contexts elsewhere) - flip it to ink here rather than fork
|
raw in dark contexts elsewhere) - flip it to ink here rather
|
||||||
the asset. */
|
than fork the asset. A content-provided logo keeps its colors. */
|
||||||
.wordmark img {
|
.wordmark-house img {
|
||||||
filter: invert(0.92);
|
filter: invert(0.92);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user