74 lines
1.8 KiB
Text
74 lines
1.8 KiB
Text
|
---
|
||
|
|
/**
|
||
|
|
* The signature wordmark, optionally writing itself on load.
|
||
|
|
*
|
||
|
|
* A signature is a brush stroke and a personal seal at once, which is why
|
||
|
|
* it carries the sumi-e direction better than any lettering could. The
|
||
|
|
* write-on is a left-to-right reveal — the direction of writing — and it
|
||
|
|
* says "autonomous" by drawing itself without a hand on it.
|
||
|
|
*
|
||
|
|
* The SVG is a single-colour black wordmark, so it inverts for dark
|
||
|
|
* grounds rather than shipping a second file.
|
||
|
|
*/
|
||
|
|
const {
|
||
|
|
width = "148px",
|
||
|
|
animate = false,
|
||
|
|
invert = false,
|
||
|
|
seal = true,
|
||
|
|
class: className = "",
|
||
|
|
} = Astro.props;
|
||
|
|
---
|
||
|
|
|
||
|
|
<span class={`ca-mark inline-flex items-center gap-3 ${className}`}>
|
||
|
|
<img
|
||
|
|
src="/brand/carlos-arias-signature.svg"
|
||
|
|
alt="Carlos Arias"
|
||
|
|
width="2077"
|
||
|
|
height="520"
|
||
|
|
style={`width:${width};height:auto`}
|
||
|
|
class={`ca-mark-img ${invert ? "ca-invert" : ""} ${animate ? "ca-write" : ""}`}
|
||
|
|
/>
|
||
|
|
{seal && <span class="ca-seal" aria-hidden="true">印</span>}
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/* Black artwork: inverted wherever it sits on an ink ground. */
|
||
|
|
:global(.dark) .ca-mark-img,
|
||
|
|
.ca-mark-img.ca-invert {
|
||
|
|
filter: invert(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.ca-seal {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 1.5rem;
|
||
|
|
height: 1.5rem;
|
||
|
|
flex: none;
|
||
|
|
border-radius: var(--radius);
|
||
|
|
background: var(--ca-seal);
|
||
|
|
color: #fff;
|
||
|
|
font-family: var(--font-serif);
|
||
|
|
font-size: 0.8rem;
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ca-write {
|
||
|
|
clip-path: inset(0 100% 0 0);
|
||
|
|
animation: ca-write-on var(--ca-dur-ink) cubic-bezier(0.31, 0.06, 0.2, 1) 0.25s forwards;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes ca-write-on {
|
||
|
|
to {
|
||
|
|
clip-path: inset(0 -2% 0 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-reduced-motion: reduce) {
|
||
|
|
.ca-write {
|
||
|
|
clip-path: none;
|
||
|
|
animation: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|