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

v1-beta-tema #9

Merged
bilal merged 19 commits from v1-beta-tema into main 2026-10-09 02:30:44 +03:00
Conversation 0 Commits 19 Files Changed 22 +13 -12
1 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7eac1e55e6 - Show all commits

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

@@ -112,10 +112,10 @@ const SEKIL_SURE = 1700;
const SEKIL_DURAKLAR = [0, 0.3, 0.7, 1]; const SEKIL_DURAKLAR = [0, 0.3, 0.7, 1];
type SekilHedefi = { translate: string; scale: string; opacity: number }; 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: // Ay kompozisyonu kutunun merkezine (90) göre küçültülür ve logonun alanına
// hilalin sağ kenarı logonun sağ kenarını (151) pek aşmaz, yazıya değmez. // (x 27–151) oturacak kadar kaydırılır: sağdaki yıldız yazıya değmez.
const AY_OLCEK = 0.82; const AY_OLCEK = 0.82;
const AY_KAYMA_X = -8; const AY_KAYMA_X = 8;
function ay(nokta: number, kayma = AY_KAYMA_X): number { function ay(nokta: number, kayma = AY_KAYMA_X): number {
return 90 + (nokta - 90) * AY_OLCEK + kayma; return 90 + (nokta - 90) * AY_OLCEK + kayma;
} }
@@ -125,12 +125,13 @@ function sekilHedefi(i: number, koyu: boolean): SekilHedefi {
const b = KARELER[i].boyut; const b = KARELER[i].boyut;
if (koyu) { if (koyu) {
return [ return [
// Biçim tema-ikonu.tsx'teki ay ikonuyla aynı (gövde r74 @ (104,92), // Biçim tema-ikonu.tsx'teki ay ikonunun YATAYDA ÇEVRİLMİŞ hâli (ikonda
// yıldızlar r15 @ (40,42) ve r10 @ (74,92)); `ay` onu logonun kendi // gövde r74 @ (104,92), yıldızlar r15 @ (40,42) ve r10 @ (74,92); burada
// alanına sığdırır — ikon kutuyu doldurur, logoda sağında yazı var. // x → 180 − x): hilalin sırtı solda, yıldızlar sağında. `ay` onu logonun
{ translate: merkezde(ay(40), ay(42, 0), b), scale: String((30 * AY_OLCEK) / b), opacity: 1 }, // yıldız // kendi alanına sığdırır — ikon kutuyu doldurur, logoda sağında yazı var.
{ translate: merkezde(ay(104), ay(92, 0), b), scale: String((148 * AY_OLCEK) / b), opacity: 1 }, // hilal { translate: merkezde(ay(140), ay(42, 0), b), scale: String((30 * AY_OLCEK) / b), opacity: 1 }, // yıldız
{ translate: merkezde(ay(74), ay(92, 0), b), scale: String((20 * AY_OLCEK) / b), opacity: 1 }, // yıldız { translate: merkezde(ay(76), ay(92, 0), b), scale: String((148 * AY_OLCEK) / b), opacity: 1 }, // hilal
{ translate: merkezde(ay(106), ay(92, 0), b), scale: String((20 * AY_OLCEK) / b), opacity: 1 }, // yıldız
][i]; ][i];
} }
return [ return [
@@ -351,11 +352,11 @@ export function AnimasyonluMark({
const renk = getComputedStyle(el).backgroundColor; const renk = getComputedStyle(el).backgroundColor;
const w = el.offsetWidth; const w = el.offsetWidth;
const dolu = `inset 0 0 0 ${w}px ${renk}`; const dolu = `inset 0 0 0 ${w}px ${renk}`;
// tema-ikonu.tsx'teki hilalle aynı kesim: gövde r74'ten, (-40,-16) // tema-ikonu.tsx'teki hilalin yatayda çevrilmişi: gövde r74'ten,
// kaydırılmış r66 daire çıkar — sırtı sağ altta, sağa bakan hilal. // (+40,-16) kaydırılmış r66 daire çıkar — sırtı sol altta.
// İç gölgede: kaydırma = kesim dairesinin kayması, yayılma = iki // İç gölgede: kaydırma = kesim dairesinin kayması, yayılma = iki
// yarıçapın farkı (hepsi gövde çapı 148'e oranla). // 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}`; const hilal = `inset ${(40 / 148) * w}px ${(-16 / 148) * w}px 0 ${(8 / 148) * w}px ${renk}`;
animasyonlar.push( animasyonlar.push(
el.animate( el.animate(
[ [