lfg2025/kaiser-natron
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

brand hero: render the mound's hand fragment in mint, not white

Browse Source 
The dPortMound trace shipped two subpaths — the main natron handful
and a small finger-shaped subpath sitting at its base. The previous
fix dropped the second subpath because it bled white past the
woman's grip. Restoring it as a separate `dPortMoundFinger` export
and rendering it as a `mound-finger` layer in the mint hand colour
(#b5d8b6) so it reads as part of her hand instead of a stray white
spur. Painted between the white mound and the woman silhouette so
it sits on top of the mound but under the rest of her features.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-05-04 13:33:23 +01:00
parent 4abcd0d5ed
commit a369e5e532
7 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/splashPaths.js
View File

File diff suppressed because one or more lines are too long

26
src/design-system/components/BrandHero.vue
View File

@@ -54,9 +54,10 @@
on top (the splash entrance order) one finger bled
white because the mound's bounds extend slightly
past the grip outline. -->
<path class="layer right-m" fill-rule="evenodd" :d="dPortRight" />
<path class="layer mound-m" fill-rule="evenodd" :d="dPortMound" />
<path class="layer left-m" fill-rule="nonzero" :d="dPortLeft" />
<path class="layer right-m" fill-rule="evenodd" :d="dPortRight" />
<path class="layer mound-m" fill-rule="evenodd" :d="dPortMound" />
<path class="layer mound-finger" fill-rule="evenodd" :d="dPortMoundFinger" />
<path class="layer left-m" fill-rule="nonzero" :d="dPortLeft" />
</svg>
</div>
@@ -95,9 +96,10 @@
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path class="layer right-m" fill-rule="evenodd" :d="dPortRight" />
<path class="layer mound-m" fill-rule="evenodd" :d="dPortMound" />
<path class="layer left-m" fill-rule="nonzero" :d="dPortLeft" />
<path class="layer right-m" fill-rule="evenodd" :d="dPortRight" />
<path class="layer mound-m" fill-rule="evenodd" :d="dPortMound" />
<path class="layer mound-finger" fill-rule="evenodd" :d="dPortMoundFinger" />
<path class="layer left-m" fill-rule="nonzero" :d="dPortLeft" />
</svg>
</div>
@@ -123,6 +125,7 @@ import {
dPortLeft,
dPortRight,
dPortMound,
dPortMoundFinger,
} from '@/components/splashPaths.js'
import Button from './Button.vue'
import { useI18n } from '@/i18n/index.js'
@@ -222,9 +225,14 @@ const { t } = useI18n()
}
/* Layer fills (matches the splash's resolved palette). */
.left-m { fill: #b5d8b6; }
.right-m { fill: #b5d8b6; }
.mound-m { fill: #ffffff; }
.left-m { fill: #b5d8b6; }
.right-m { fill: #b5d8b6; }
.mound-m { fill: #ffffff; }
/* The original trace bundled a small hand/finger fragment under
the mound shape and painted it white; rendering it in the same
mint as the woman's other features makes it read as part of her
grip on the natron handful. */
.mound-finger { fill: #b5d8b6; }
/* ---------- Entrance animation (replaces SplashIntro) ----------
Initial state: figures translated off to their respective sides