From 49d88cd72f9aaccfcfddac3097fecd951a3688a5 Mon Sep 17 00:00:00 2001 From: bilalgursen Date: Fri, 9 Oct 2026 00:43:27 +0300 Subject: [PATCH] =?UTF-8?q?fix(tema):=20ayda=20tek=20y=C4=B1ld=C4=B1z,=20h?= =?UTF-8?q?ilalin=20iki=20ucunun=20tam=20ortas=C4=B1nda?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Logo morph'unda mavi kare yıldız olur, turuncu yıldızın yerinde söner; seçici ikonunda tek mavi yıldız. Konum iki dairenin kesişim kirişinin orta noktası (108,79). DESIGN §2.3 güncel. Co-Authored-By: Claude Opus 5.5 --- docs/tasarim/DESIGN.md | 4 ++-- src/components/animasyonlu-mark.tsx | 18 ++++++++++-------- src/components/tema-ikonu.tsx | 8 ++++---- 3 files changed, 16 insertions(+), 14 deletions(-) diff --git a/docs/tasarim/DESIGN.md b/docs/tasarim/DESIGN.md index 418e5c4..5d62bbe 100644 --- a/docs/tasarim/DESIGN.md +++ b/docs/tasarim/DESIGN.md @@ -136,8 +136,8 @@ Seçici `src/components/tema-secici.tsx` (footer'da), sağlayıcı `src/componen **Geçiş ve kısayol (7 Eki 2026; son hâli 9 Eki):** tema değişimi anlık değildir; yeni tema header'daki logodan **yumuşak bir halka** gibi açılır: kenarı keskin değil, geniş ve tüylü (ışık yayılır gibi), 1100 ms, yumuşak kalkıp yumuşak durur. Aynı anda logonun kareleri -yeni temanın biçimine dönüşür: koyuya geçişte şeftali kare hilale, mavi ve turuncu kareler iki -yıldıza; açığa geçişte turuncu kare güneşe, şeftali kare halesine. Kısa bir an durur, yeniden +yeni temanın biçimine dönüşür: koyuya geçişte şeftali kare hilale, mavi kare hilalin iki ucunun +ortasındaki yıldıza (turuncu söner); açığa geçişte turuncu kare güneşe, şeftali kare halesine. Kısa bir an durur, yeniden logoya toplanır (`animasyonlu-mark.tsx` `temaSekli`, 1,7 sn; yalnız header'daki logo; hover döngüsünden önceliklidir, biçim bitince imleç üzerindeyse döngü kaldığı yerden değil yerinden sürer). Tema seçicinin ikonları aynı biçimlerin durağan hâlidir (`tema-ikonu.tsx`: güneş, ay, Sistem için diff --git a/src/components/animasyonlu-mark.tsx b/src/components/animasyonlu-mark.tsx index 67510cb..dbcf91a 100644 --- a/src/components/animasyonlu-mark.tsx +++ b/src/components/animasyonlu-mark.tsx @@ -105,7 +105,8 @@ function merkezde(cx: number, cy: number, boyut: number): string { // Tema geçişi biçimi (DESIGN.md §2.3): geçiş logodan yayılırken kareler // neye geçildiğini gösterir, kısa bir an durur ve yeniden logoya toplanır. -// - Koyuya: şeftali kare hilale, mavi ve turuncu kareler iki küçük yıldıza. +// - Koyuya: şeftali kare hilale, mavi kare hilalin kucağındaki yıldıza; +// turuncu söner. // - Açığa: turuncu kare güneşe, şeftali kare arkasındaki haleye; mavi söner. // Toplam süre ve duraklar: %30'da biçim tamam, %70'e kadar durur, sonra döner. const SEKIL_SURE = 1700; @@ -113,7 +114,7 @@ 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 logonun alanına -// (x 27–151) oturacak kadar kaydırılır: sağdaki yıldız yazıya değmez. +// (x 27–151) oturacak kadar kaydırılır. const AY_OLCEK = 0.82; const AY_KAYMA_X = 8; function ay(nokta: number, kayma = AY_KAYMA_X): number { @@ -125,13 +126,14 @@ function sekilHedefi(i: number, koyu: boolean): SekilHedefi { const b = KARELER[i].boyut; if (koyu) { return [ - // Biçim tema-ikonu.tsx'teki ay ikonuyla aynı (gövde r74 @ (76,92), - // yıldızlar r15 @ (140,42) ve r10 @ (106,92)): hilalin sırtı solda, - // yıldızlar sağında. `ay` onu logonun - // kendi alanına sığdırır — ikon kutuyu doldurur, logoda sağında yazı var. - { translate: merkezde(ay(140), ay(42, 0), b), scale: String((30 * AY_OLCEK) / b), opacity: 1 }, // yıldız + // Biçim tema-ikonu.tsx'teki ay ikonuyla aynı: gövde r74 @ (76,92), + // tek yıldız r13 @ (108,79) — hilalin iki sivri ucunun tam ortası (iki + // dairenin kesişim kirişinin orta noktası). Turuncu kare yıldızın + // yerinde söner: güneşte mavi, ayda turuncu sahneden çekilir. `ay` + // kompozisyonu logonun kendi alanına sığdırır. + { translate: merkezde(ay(108), ay(79, 0), b), scale: String((26 * 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 + { translate: merkezde(ay(108), ay(79, 0), b), scale: "0.2", opacity: 0 }, // söner ][i]; } return [ diff --git a/src/components/tema-ikonu.tsx b/src/components/tema-ikonu.tsx index beea00e..cd64ca1 100644 --- a/src/components/tema-ikonu.tsx +++ b/src/components/tema-ikonu.tsx @@ -3,7 +3,7 @@ import { useId } from "react"; // Tema seçicinin ikonları (DESIGN.md §2.3): tema geçişinde header'daki logonun // dönüştüğü biçimlerin durağan hâli (animasyonlu-mark.tsx `temaSekli`). // - "light": güneş — turuncu daire, arkasında şeftali hale. -// - "dark": ay — şeftali hilal, yanında mavi ve turuncu iki yıldız. +// - "dark": ay — şeftali hilal, iki ucunun ortasında mavi bir yıldız. // - "system": logonun üç karesi — ikisine de dönüşebilen hâl. // Renkler logonun renkleridir ve iki temada aynıdır (§2.3); 180'lik kutu // public/kolay-tercih-mark.svg ile aynı. Dekoratiftir: anlamı yanındaki @@ -33,14 +33,14 @@ export function TemaIkonu({ ) : tur === "dark" ? ( <> {/* Hilal: daireden, sağa-yukarı kaydırılmış ikinci daire çıkarılır - (sırtı solda, yıldızlar sağında). */} + (sırtı solda). */} - - + {/* Yıldız: hilalin iki sivri ucunun tam ortası. */} + ) : ( <>