diff --git a/src/App.css b/src/App.css index 3049f3f..3de0886 100644 --- a/src/App.css +++ b/src/App.css @@ -617,7 +617,7 @@ .save-leaf { position: absolute; - font-size: 1.1rem; + font-size: 1.65rem; line-height: 1; opacity: 0; animation: save-leaf-float 1.9s ease-out forwards; @@ -629,10 +629,10 @@ transform: translateY(0) translateX(0) rotate(0deg) scale(0.6); opacity: 0; } - 12% { opacity: 1; transform: translateY(-18px) translateX(calc(var(--leaf-dx) * 0.1)) rotate(calc(var(--leaf-rot) * 0.1)) scale(1); } + 12% { opacity: 1; transform: translateY(-27px) translateX(calc(var(--leaf-dx) * 0.1)) rotate(calc(var(--leaf-rot) * 0.1)) scale(1); } 85% { opacity: 0.5; } 100% { - transform: translateY(-190px) translateX(var(--leaf-dx)) rotate(var(--leaf-rot)) scale(0.4); + transform: translateY(-285px) translateX(var(--leaf-dx)) rotate(var(--leaf-rot)) scale(0.4); opacity: 0; } } @@ -644,13 +644,13 @@ justify-content: center; width: fit-content; margin: 0 auto; - padding: 0 1.25rem; - min-height: 44px; + padding: 0 1.875rem; + min-height: 66px; border-radius: 100px; background: #f0fdf4; border: 1.5px solid #bbf7d0; font-family: "Sniglet", system-ui; - font-size: 0.875rem; + font-size: 1.3125rem; font-weight: 600; color: #15803d; white-space: nowrap; diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index f243d73..31fb713 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -19,14 +19,14 @@ const AFFIRMATIONS = [ ] const SAVE_LEAVES = [ - { left: -55, dx: -20, rot: -25, delay: 0.0, emoji: '🌱' }, - { left: -30, dx: -8, rot: 15, delay: 0.08, emoji: '🌿' }, - { left: -10, dx: -15, rot: -10, delay: 0.04, emoji: '🌱' }, - { left: 5, dx: 12, rot: 20, delay: 0.12, emoji: '🍃' }, - { left: 25, dx: 18, rot: -18, delay: 0.06, emoji: '🌿' }, - { left: 45, dx: 25, rot: 12, delay: 0.18, emoji: '🌱' }, - { left: -42, dx: -22, rot: 28, delay: 0.22, emoji: '🍃' }, - { left: 18, dx: 10, rot: -22, delay: 0.28, emoji: '🌿' }, + { left: -80, dx: -30, rot: -25, delay: 0.0, emoji: '🌱' }, + { left: -45, dx: -12, rot: 15, delay: 0.08, emoji: '🌿' }, + { left: -15, dx: -22, rot: -10, delay: 0.04, emoji: '🌱' }, + { left: 8, dx: 18, rot: 20, delay: 0.12, emoji: '🍃' }, + { left: 38, dx: 27, rot: -18, delay: 0.06, emoji: '🌿' }, + { left: 68, dx: 38, rot: 12, delay: 0.18, emoji: '🌱' }, + { left: -62, dx: -33, rot: 28, delay: 0.22, emoji: '🍃' }, + { left: 25, dx: 15, rot: -22, delay: 0.28, emoji: '🌿' }, ] export default function HomePage() {