From 20908bca72ca642bccdafd61f0b58ffeb8b209ce Mon Sep 17 00:00:00 2001 From: Terencio Agozzino Date: Fri, 30 Oct 2026 21:00:28 +0100 Subject: [PATCH] fix(name): keep the T's curl while the name fades in Cinzel Decorative's T curls 0.09em left of its box. While the name fades in, Safari draws it on a layer cropped to the heading's box, so the T showed without its curl until the animation ended. The box now reaches over the curl (padding), and a matching negative margin keeps the text in place. Same for the name in the navigation. --- src/components/Hero.astro | 5 +++++ src/components/Nav.astro | 3 +++ 2 files changed, 8 insertions(+) diff --git a/src/components/Hero.astro b/src/components/Hero.astro index 571bebb..bbbceb4 100644 --- a/src/components/Hero.astro +++ b/src/components/Hero.astro @@ -64,6 +64,11 @@ import Download from './icons/Download.astro'; font-size: 80px; line-height: 1.04; letter-spacing: 1px; + /* Cinzel's T curls 0.09em left of its box. Safari crops it to the box + while the heading fades in, so the box reaches over the curl, and the + text stays where it was. */ + padding-left: 0.1em; + margin-left: -0.1em; } .role { diff --git a/src/components/Nav.astro b/src/components/Nav.astro index 1f031b6..728b51c 100644 --- a/src/components/Nav.astro +++ b/src/components/Nav.astro @@ -75,6 +75,9 @@ const links = [ font-size: 19px; letter-spacing: 0.5px; white-space: nowrap; + /* Room for the T's curl while it fades in, as in the hero. */ + padding-left: 0.1em; + margin-left: -0.1em; transition: opacity 0.35s ease, transform 0.35s ease,