Branding diet: logo sprite via <use>, lean favicon.ico, simple mask icon
- The ~33 KB traced logo moves from an inlined-per-page partial to /logo-sprite.svg referenced with <use> — cached once instead of shipped on every page (homepage HTML: 46 KB -> 13 KB). CSS custom properties cascade into the use shadow tree, so the two-tone cutout is unchanged (AUDIT §9.1) - favicon.ico regenerated at 16/32/48 from the 512px master: 71 KB -> 15 KB; modern browsers take the SVG anyway, the .ico is the legacy fallback (§9.2) - link-icons/internal.svg restored to the simple 4 KB path: it renders at 0.7-1.6 rem through a CSS mask, where the 33 KB traced detail cannot resolve (§9.2) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
parent
aeb2937f7c
commit
b2951c0c2c
|
|
@ -70,12 +70,15 @@ nav.site-nav {
|
|||
}
|
||||
|
||||
/* Home logo — square button flush into the top-left corner of the nav bar.
|
||||
The rooted-L mark is inlined (templates/partials/logo-mark.svg) so its
|
||||
two-tone cutout renders: the letter is drawn in --logo-ink and the root
|
||||
filament is punched through in --logo-bg. Mapping --logo-bg to --bg-nav
|
||||
(the button's own surface) makes the roots read as the nav background
|
||||
showing through. Both tokens are theme-driven in base.css — override
|
||||
--nav-logo-fg / --bg-nav there to restyle per theme. */
|
||||
The rooted-L mark lives in /logo-sprite.svg and is referenced with
|
||||
<use> (cacheable once, not ~33 KB inlined per page). Its two-tone
|
||||
cutout still renders because CSS custom properties cascade into the
|
||||
use-element shadow tree: the letter is drawn in --logo-ink and the
|
||||
root filament is punched through in --logo-bg. Mapping --logo-bg to
|
||||
--bg-nav (the button's own surface) makes the roots read as the nav
|
||||
background showing through. Both tokens are theme-driven in
|
||||
base.css — override --nav-logo-fg / --bg-nav there to restyle per
|
||||
theme. */
|
||||
.nav-logo {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 15 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 3.9 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
|
@ -2,7 +2,13 @@
|
|||
<nav class="site-nav">
|
||||
<!-- Row 1: primary links -->
|
||||
<div class="nav-row-primary">
|
||||
<a href="/" class="nav-logo" aria-label="Home">$partial("templates/partials/logo-mark.svg")$</a>
|
||||
<!-- The mark lives in /logo-sprite.svg and is referenced via
|
||||
<use> instead of being inlined: the traced path is ~33 KB,
|
||||
and a per-page inline copy would dwarf most documents. CSS
|
||||
custom properties (--logo-ink/--logo-bg) cascade into the
|
||||
use-element shadow tree, so the two-tone cutout still
|
||||
renders. -->
|
||||
<a href="/" class="nav-logo" aria-label="Home"><svg class="nav-logo__mark" aria-hidden="true" focusable="false"><use href="/logo-sprite.svg#logo-mark"/></svg></a>
|
||||
<div class="nav-primary">
|
||||
<a href="/">Home</a>
|
||||
<a href="/current.html">Current</a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue