fix(tema): ayda tek yıldız, hilalin iki ucunun tam ortasında
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 <noreply@anthropic.com>
This commit is contained in:
@@ -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
|
**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
|
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
|
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
|
yeni temanın biçimine dönüşür: koyuya geçişte şeftali kare hilale, mavi kare hilalin iki ucunun
|
||||||
yıldıza; açığa geçişte turuncu kare güneşe, şeftali kare halesine. Kısa bir an durur, yeniden
|
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
|
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
|
ö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
|
seçicinin ikonları aynı biçimlerin durağan hâlidir (`tema-ikonu.tsx`: güneş, ay, Sistem için
|
||||||
|
|||||||
@@ -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
|
// 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.
|
// 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.
|
// - 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.
|
// Toplam süre ve duraklar: %30'da biçim tamam, %70'e kadar durur, sonra döner.
|
||||||
const SEKIL_SURE = 1700;
|
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 };
|
type SekilHedefi = { translate: string; scale: string; opacity: number };
|
||||||
|
|
||||||
// Ay kompozisyonu kutunun merkezine (90) göre küçültülür ve logonun alanına
|
// 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_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 {
|
||||||
@@ -125,13 +126,14 @@ 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 @ (76,92),
|
// 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,
|
// tek yıldız r13 @ (108,79) — hilalin iki sivri ucunun tam ortası (iki
|
||||||
// yıldızlar sağında. `ay` onu logonun
|
// dairenin kesişim kirişinin orta noktası). Turuncu kare yıldızın
|
||||||
// kendi alanına sığdırır — ikon kutuyu doldurur, logoda sağında yazı var.
|
// yerinde söner: güneşte mavi, ayda turuncu sahneden çekilir. `ay`
|
||||||
{ translate: merkezde(ay(140), ay(42, 0), b), scale: String((30 * AY_OLCEK) / b), opacity: 1 }, // yıldız
|
// 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(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];
|
][i];
|
||||||
}
|
}
|
||||||
return [
|
return [
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import { useId } from "react";
|
|||||||
// Tema seçicinin ikonları (DESIGN.md §2.3): tema geçişinde header'daki logonun
|
// 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`).
|
// dönüştüğü biçimlerin durağan hâli (animasyonlu-mark.tsx `temaSekli`).
|
||||||
// - "light": güneş — turuncu daire, arkasında şeftali hale.
|
// - "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.
|
// - "system": logonun üç karesi — ikisine de dönüşebilen hâl.
|
||||||
// Renkler logonun renkleridir ve iki temada aynıdır (§2.3); 180'lik kutu
|
// 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
|
// public/kolay-tercih-mark.svg ile aynı. Dekoratiftir: anlamı yanındaki
|
||||||
@@ -33,14 +33,14 @@ export function TemaIkonu({
|
|||||||
) : tur === "dark" ? (
|
) : tur === "dark" ? (
|
||||||
<>
|
<>
|
||||||
{/* Hilal: daireden, sağa-yukarı kaydırılmış ikinci daire çıkarılır
|
{/* Hilal: daireden, sağa-yukarı kaydırılmış ikinci daire çıkarılır
|
||||||
(sırtı solda, yıldızlar sağında). */}
|
(sırtı solda). */}
|
||||||
<mask id={maskeId}>
|
<mask id={maskeId}>
|
||||||
<rect width="180" height="180" fill="#fff" />
|
<rect width="180" height="180" fill="#fff" />
|
||||||
<circle cx="116" cy="76" r="66" fill="#000" />
|
<circle cx="116" cy="76" r="66" fill="#000" />
|
||||||
</mask>
|
</mask>
|
||||||
<circle cx="76" cy="92" r="74" fill={SEFTALI} mask={`url(#${maskeId})`} />
|
<circle cx="76" cy="92" r="74" fill={SEFTALI} mask={`url(#${maskeId})`} />
|
||||||
<circle cx="140" cy="42" r="15" fill={MAVI} />
|
{/* Yıldız: hilalin iki sivri ucunun tam ortası. */}
|
||||||
<circle cx="106" cy="92" r="10" fill={TURUNCU} />
|
<circle cx="108" cy="79" r="13" fill={MAVI} />
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
|
|||||||
Reference in New Issue
Block a user