fix(tema): geçiş maskesinde logo görünmüyordu — SVG katmanları CSS'e gömüldü; alttan uçuş + boşluk kapanışı koreografisi

Chrome, view-transition pseudo elemanında dosyadan url() ile yüklenen ikinci
maske katmanını (boyu 0'dan büyükken) tümden şeffaf çiziyor; iki SVG de
data URI olarak globals.css'e gömüldü. Koreografi (önceki oturum): işaret
ekranın altından ortaya süzülür, merkezden büyür, kareler arası boşluklar
dolu çizimle merkezden dışa kapanır; motion sürer. Geçici console tanıları
kaldırıldı, iptal edilen geçişin ready reddi yakalanıyor.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
2026-10-08 23:33:56 +03:00
parent 5f7ea8bbcd
commit 9f401602a8
6 changed files with 193 additions and 67 deletions

View File

@@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" role="img" aria-labelledby="title">
<title id="title">KolayTercih</title>
<!-- Tema geçişi maskesinin KAPANIŞ katmanı (globals.css .kt-tema-gecis):
büyüme boyunca normal çizim (kolay-tercih-mark.svg) boşluklu görünür;
en büyük hâle yaklaştıkça bu dolu çizim merkezden dışa büyür
(boy = --kt-tema-kenar × --kt-tema-kapanis) ve kareler arası boşlukları
kapatır. Dış sınırlar orijinalle aynı: x 27–147, y 29–151.
Sol kare sağ sütuna girer (27+77=104 > 91) ki birleşim yeri kaymasın;
sağ sütun iki kareyi birleştirir (dikey boşluk). --kt-tema-kapanis
tam 1 olduğunda siluet orijinalin tam katmanıdır; ara değerlerde
merkezden dışa büyür, boşlukların kapanışı kenarlara doğru yumuşak
olur. -->
<rect x="27" y="56" width="77" height="57" rx="13" fill="#000"/>
<rect x="91" y="29" width="56" height="122" rx="13" fill="#000"/>
</svg>

After

Width:  |  Height:  |  Size: 1019 B