bilal/kolaytercih
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(tema): logodaki ay seçici ikonuyla aynı biçimde (sağa bakan hilal); güneşin turuncu topu küçüldü

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
2026-10-09 00:36:08 +03:00
parent 50c2f7f292
commit 6ec350d68f
2 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/animasyonlu-mark.tsx
View File

@@ -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(
[

2
src/components/tema-ikonu.tsx
View File

@@ -28,7 +28,7 @@ export function TemaIkonu({
{tur === "light" ? (
<>
<circle cx="90" cy="90" r="84" fill={SEFTALI} opacity="0.55" />
<circle cx="90" cy="90" r="52" fill={TURUNCU} />
<circle cx="90" cy="90" r="43" fill={TURUNCU} />
</>
) : tur === "dark" ? (
<>