From 6ec350d68feb8127508b04ba4f396b6722128b47 Mon Sep 17 00:00:00 2001 From: bilalgursen Date: Fri, 9 Oct 2026 00:36:08 +0300 Subject: [PATCH] =?UTF-8?q?fix(tema):=20logodaki=20ay=20se=C3=A7ici=20ikon?= =?UTF-8?q?uyla=20ayn=C4=B1=20bi=C3=A7imde=20(sa=C4=9Fa=20bakan=20hilal);?= =?UTF-8?q?=20g=C3=BCne=C5=9Fin=20turuncu=20topu=20k=C3=BC=C3=A7=C3=BCld?= =?UTF-8?q?=C3=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Morph'taki hilal tema-ikonu.tsx'teki kesimle birebir (gövde r74, (-40,-16) kaymış r66 kesim; yıldızlar aynı yerlerde), logonun alanına sığacak ölçekte. Güneş: morph ölçeği 1.35 → 1.1, ikon r52 → r43. Co-Authored-By: Claude Opus 5.5 --- src/components/animasyonlu-mark.tsx | 25 ++++++++++++++++++++----- src/components/tema-ikonu.tsx | 2 +- 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/src/components/animasyonlu-mark.tsx b/src/components/animasyonlu-mark.tsx index 2c45c50..98350a6 100644 --- a/src/components/animasyonlu-mark.tsx +++ b/src/components/animasyonlu-mark.tsx @@ -112,20 +112,31 @@ const SEKIL_SURE = 1700; const SEKIL_DURAKLAR = [0, 0.3, 0.7, 1]; type SekilHedefi = { translate: string; scale: string; opacity: number }; +// Ay kompozisyonu kutunun merkezine (90) göre küçültülür ve sola kaydırılır: +// hilalin sağ kenarı logonun sağ kenarını (151) pek aşmaz, yazıya değmez. +const AY_OLCEK = 0.82; +const AY_KAYMA_X = -8; +function ay(nokta: number, kayma = AY_KAYMA_X): number { + return 90 + (nokta - 90) * AY_OLCEK + kayma; +} + /** Kare `i` için hedef biçim. Kareler sırayla mavi, şeftali, turuncu. */ function sekilHedefi(i: number, koyu: boolean): SekilHedefi { const b = KARELER[i].boyut; if (koyu) { return [ - { translate: merkezde(40, 50, b), scale: "0.3", opacity: 1 }, // yıldız - { translate: merkezde(100, 90, b), scale: "1.75", opacity: 1 }, // hilal - { translate: merkezde(56, 132, b), scale: "0.2", opacity: 1 }, // yıldız + // Biçim tema-ikonu.tsx'teki ay ikonuyla aynı (gövde r74 @ (104,92), + // yıldızlar r15 @ (40,42) ve r10 @ (74,92)); `ay` onu logonun kendi + // alanına sığdırır — ikon kutuyu doldurur, logoda sağında yazı var. + { translate: merkezde(ay(40), ay(42, 0), b), scale: String((30 * AY_OLCEK) / b), opacity: 1 }, // yıldız + { translate: merkezde(ay(104), ay(92, 0), b), scale: String((148 * AY_OLCEK) / b), opacity: 1 }, // hilal + { translate: merkezde(ay(74), ay(92, 0), b), scale: String((20 * AY_OLCEK) / b), opacity: 1 }, // yıldız ][i]; } return [ { translate: merkezde(90, 90, b), scale: "0.3", opacity: 0 }, // söner { translate: merkezde(90, 90, b), scale: "2.15", opacity: 0.45 }, // hale - { translate: merkezde(90, 90, b), scale: "1.35", opacity: 1 }, // güneş + { translate: merkezde(90, 90, b), scale: "1.1", opacity: 1 }, // güneş ][i]; } @@ -340,7 +351,11 @@ export function AnimasyonluMark({ const renk = getComputedStyle(el).backgroundColor; const w = el.offsetWidth; const dolu = `inset 0 0 0 ${w}px ${renk}`; - const hilal = `inset ${-0.36 * w}px ${0.1 * w}px 0 0 ${renk}`; + // tema-ikonu.tsx'teki hilalle aynı kesim: gövde r74'ten, (-40,-16) + // kaydırılmış r66 daire çıkar — sırtı sağ altta, sağa bakan hilal. + // İç gölgede: kaydırma = kesim dairesinin kayması, yayılma = iki + // yarıçapın farkı (hepsi gövde çapı 148'e oranla). + const hilal = `inset ${(-40 / 148) * w}px ${(-16 / 148) * w}px 0 ${(8 / 148) * w}px ${renk}`; animasyonlar.push( el.animate( [ diff --git a/src/components/tema-ikonu.tsx b/src/components/tema-ikonu.tsx index 8af093b..c960e1e 100644 --- a/src/components/tema-ikonu.tsx +++ b/src/components/tema-ikonu.tsx @@ -28,7 +28,7 @@ export function TemaIkonu({ {tur === "light" ? ( <> - + ) : tur === "dark" ? ( <>