Branding: traced logo mark, regenerated favicons, og-image
New inline logo-mark.svg partial in the nav (two-tone cutout via --logo-ink/--logo-bg), regenerated favicon set + web-app manifest icons from the new mark, 1200x630 og-image wired into head.html. Known follow-ups (AUDIT-2026-06-09.md §9): the traced SVG is ~33 KB inlined per page, favicon.ico carries 128/256px entries, and the webmanifest dropped its maskable purpose. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 20 KiB |
|
|
@ -70,34 +70,32 @@ nav.site-nav {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Home logo — square button flush into the top-left corner of the nav bar.
|
/* Home logo — square button flush into the top-left corner of the nav bar.
|
||||||
The L silhouette is rendered via ::before mask-image so the background
|
The rooted-L mark is inlined (templates/partials/logo-mark.svg) so its
|
||||||
matches --bg-nav exactly and the foreground follows --nav-logo-fg (set
|
two-tone cutout renders: the letter is drawn in --logo-ink and the root
|
||||||
per theme in base.css — override there to restyle for light mode). */
|
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 {
|
.nav-logo {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
aspect-ratio: 1 / 1;
|
aspect-ratio: 1 / 1;
|
||||||
display: block;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: var(--bg-nav);
|
background-color: var(--bg-nav);
|
||||||
|
--logo-ink: var(--nav-logo-fg);
|
||||||
|
--logo-bg: var(--bg-nav);
|
||||||
}
|
}
|
||||||
.nav-logo::before {
|
.nav-logo__mark {
|
||||||
content: '';
|
width: 76%;
|
||||||
position: absolute;
|
height: 76%;
|
||||||
inset: 12%;
|
display: block;
|
||||||
background-color: var(--nav-logo-fg);
|
|
||||||
mask-image: url('/images/link-icons/internal.svg');
|
|
||||||
mask-size: contain;
|
|
||||||
mask-repeat: no-repeat;
|
|
||||||
mask-position: center;
|
|
||||||
-webkit-mask-image: url('/images/link-icons/internal.svg');
|
|
||||||
-webkit-mask-size: contain;
|
|
||||||
-webkit-mask-repeat: no-repeat;
|
|
||||||
-webkit-mask-position: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Controls cluster: portals toggle + theme toggle, pinned right */
|
/* Controls cluster: portals toggle + theme toggle, pinned right */
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 8.8 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
|
@ -1,21 +1,21 @@
|
||||||
{
|
{
|
||||||
"name": "levineuwirth.org",
|
"name": "Levi Neuwirth",
|
||||||
"short_name": "ln",
|
"short_name": "ln",
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "/web-app-manifest-192x192.png",
|
"src": "/web-app-manifest-192x192.png",
|
||||||
"sizes": "192x192",
|
"sizes": "192x192",
|
||||||
"type": "image/png",
|
"type": "image/png",
|
||||||
"purpose": "maskable"
|
"purpose": "any"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"src": "/web-app-manifest-512x512.png",
|
"src": "/web-app-manifest-512x512.png",
|
||||||
"sizes": "512x512",
|
"sizes": "512x512",
|
||||||
"type": "image/png",
|
"type": "image/png",
|
||||||
"purpose": "maskable"
|
"purpose": "any"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"theme_color": "#ffffff",
|
"theme_color": "#16140f",
|
||||||
"background_color": "#ffffff",
|
"background_color": "#16140f",
|
||||||
"display": "standalone"
|
"display": "standalone"
|
||||||
}
|
}
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 106 KiB |
|
|
@ -14,8 +14,10 @@ $if(home)$<meta property="og:title" content="Levi Neuwirth">$else$$if(title)$<me
|
||||||
$if(description)$<meta property="og:description" content="$description$">$endif$
|
$if(description)$<meta property="og:description" content="$description$">$endif$
|
||||||
<meta property="og:url" content="$site-url$$url$">
|
<meta property="og:url" content="$site-url$$url$">
|
||||||
$if(date)$<meta property="og:type" content="article">$else$<meta property="og:type" content="website">$endif$
|
$if(date)$<meta property="og:type" content="article">$else$<meta property="og:type" content="website">$endif$
|
||||||
<meta property="og:image" content="$site-url$/web-app-manifest-512x512.png">
|
<meta property="og:image" content="$site-url$/og-image.png">
|
||||||
<meta name="twitter:card" content="summary">
|
<meta property="og:image:width" content="1200">
|
||||||
|
<meta property="og:image:height" content="630">
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
$if(description)$<meta name="twitter:description" content="$description$">$endif$
|
$if(description)$<meta name="twitter:description" content="$description$">$endif$
|
||||||
|
|
||||||
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
|
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
|
||||||
|
|
|
||||||
|
After Width: | Height: | Size: 32 KiB |
|
|
@ -2,7 +2,7 @@
|
||||||
<nav class="site-nav">
|
<nav class="site-nav">
|
||||||
<!-- Row 1: primary links -->
|
<!-- Row 1: primary links -->
|
||||||
<div class="nav-row-primary">
|
<div class="nav-row-primary">
|
||||||
<a href="/" class="nav-logo" aria-label="Home"></a>
|
<a href="/" class="nav-logo" aria-label="Home">$partial("templates/partials/logo-mark.svg")$</a>
|
||||||
<div class="nav-primary">
|
<div class="nav-primary">
|
||||||
<a href="/">Home</a>
|
<a href="/">Home</a>
|
||||||
<a href="/current.html">Current</a>
|
<a href="/current.html">Current</a>
|
||||||
|
|
|
||||||