Jonathan
607e378eb9
SVG text background of "Jonathan" in outline that slowly fills in on page load. Uses CSS fill-opacity animation (0 → 1 over 2s, 0.3s delay) so the stroke appears immediately and the fill bleeds in gradually. Light mode: zinc-200/300. Dark mode: zinc-800. Both stay recessive so the effect is atmospheric, not distracting. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
29 lines
602 B
CSS
29 lines
602 B
CSS
@import "tailwindcss";
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
@keyframes name-fill-in {
|
|
from { fill-opacity: 0; }
|
|
to { fill-opacity: 1; }
|
|
}
|
|
|
|
.name-outline-fill {
|
|
fill: #e4e4e7; /* zinc-200 */
|
|
stroke: #d4d4d8; /* zinc-300 */
|
|
fill-opacity: 0;
|
|
animation: name-fill-in 2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
|
|
}
|
|
|
|
.dark .name-outline-fill {
|
|
fill: #27272a; /* zinc-800 */
|
|
stroke: #27272a; /* zinc-800 */
|
|
}
|