/* ============================================================ GOKTURK VIRTUAL — TEMA JETONLARI (gv-tema.css) TEK RENK KAYNAGI. SORUN NEYDI ----------- Sitede 729 sabit renk kodu, 129 farkli ton ve 28 ayri :root blogu vardi. Ayni lacivert bir sayfada #16283C, digerinde #003C60, ucuncude #101C28 yaziliydi. Sonuclari: - Yeni tema eklemek 28 dosya duzenlemek demekti. - "Koyu zemin uzerine koyu yazi" hatalari tekrar tekrar cikiyordu (aylik gorev karti, mobil menu butonlari, FIDS panosu, indirmeler sayfasi — dordu de ayni kok). COZUM ----- Butun renkler burada ~20 JETONA indirildi. Sayfalar artik ham hex yerine var(--jeton) kullanir. JETON MANTIGI — iki katmanlidir: 1) HAM PALET (--gv-lacivert-700 gibi) Markanin gercek renkleri. Bunlar DOGRUDAN kullanilmaz. 2) ANLAMSAL JETONLAR (--zemin, --murekkep, --vurgu gibi) "Ne ise yarar" ile adlandirilir, "hangi renk" ile degil. Sayfalar SADECE bunlari kullanir. Neden iki katman? Cunku tema degistirmek, ham paleti degil ANLAMI yeniden esleseme demektir. Koyu temada --zemin laciverte, --murekkep kreme baglanir; sayfa kodu hic degismez. YUZEY / UZERI CIFTLERI ---------------------- Her zemin jetonunun bir "uzeri" karsiligi vardir: --zemin -> --zemin-ust (uzerine yazilacak renk) --panel -> --panel-ust --vurgu -> --vurgu-ust Kural: bir yuzeye yazi yazarken MUTLAKA onun -ust jetonu kullanilir. Bu kurala uyulursa koyu-uzerine-koyu hatasi YAPISAL OLARAK imkansiz hale gelir. YENI TEMA EKLEMEK ----------------- Bu dosyanin sonundaki [data-tema="gece"] blogunu ornek al, yeni bir blok yaz, ver. Baska hicbir dosyaya dokunma. ============================================================ */ :root{ /* ---------- 1) HAM PALET (dogrudan kullanma) ---------- */ --gv-lacivert-900:#04141F; --gv-lacivert-800:#072230; --gv-lacivert-700:#003C60; --gv-lacivert-600:#0E4A63; --gv-mavi-500:#48B4E4; /* marka mavisi — logodan */ --gv-mavi-600:#0E6E96; --gv-turkuaz-400:#5FD6CE; --gv-krem-50:#FBF8F1; --gv-krem-100:#F4F1E8; --gv-krem-200:#F3EFE4; --gv-krem-300:#EFEADF; --gv-kum-400:#DCD3BF; --gv-kum-500:#C9BFA6; --gv-gri-600:#6E7A85; --gv-gri-700:#3D4A57; --gv-gri-900:#141E28; --gv-yesil-600:#176944; --gv-amber-600:#9A5F09; --gv-kirmizi-600:#C0392F; --gv-altin-600:#B6901F; /* ---------- 2) ANLAMSAL JETONLAR (sayfalar bunu kullanir) ---------- */ /* zeminler + uzerlerine yazilacak renk */ --zemin:var(--gv-krem-200); --zemin-ust:var(--gv-gri-900); --panel:var(--gv-krem-50); --panel-ust:var(--gv-gri-900); --panel-2:var(--gv-krem-300); --panel-2-ust:var(--gv-gri-700); /* koyu yuzey — kartlar, hero, pano */ --koyu:var(--gv-lacivert-700); --koyu-ust:var(--gv-krem-100); --koyu-2:var(--gv-lacivert-900); --koyu-2-ust:var(--gv-krem-100); /* yazi kademeleri */ --murekkep:var(--gv-gri-900); /* ana metin */ --murekkep-2:var(--gv-gri-700); /* ikincil */ --murekkep-3:var(--gv-gri-600); /* etiket / ipucu */ /* vurgu */ --vurgu:var(--gv-mavi-600); --vurgu-ust:var(--gv-krem-50); --vurgu-soft:rgba(14,110,150,.10); --marka:var(--gv-mavi-500); /* logo mavisi, koyu zeminde */ /* durum renkleri + uzerleri */ --olumlu:var(--gv-yesil-600); --olumlu-ust:#FFFFFF; --olumlu-soft:rgba(23,105,68,.12); --uyari:var(--gv-amber-600); --uyari-ust:#FFFFFF; --uyari-soft:rgba(154,95,9,.12); --hata:var(--gv-kirmizi-600); --hata-ust:#FFFFFF; --hata-soft:rgba(192,57,47,.11); --odul:var(--gv-altin-600); --odul-soft:rgba(182,144,31,.12); /* cizgiler */ --kenar:var(--gv-kum-400); --cetvel:var(--gv-kum-500); --kenar-koyu:rgba(244,241,232,.16); /* koyu yuzeylerdeki cizgi */ /* olculer */ --r-sm:6px; --r-md:10px; --r-lg:14px; --r-tam:999px; --golge-1:2px 2px 0 rgba(22,40,60,.07); --golge-2:4px 4px 0 rgba(22,40,60,.11); --golge-3:6px 6px 0 rgba(22,40,60,.16); /* yazi tipleri */ --fd:'Sora',system-ui,sans-serif; --fb:'Instrument Sans',system-ui,sans-serif; --fm:'JetBrains Mono',ui-monospace,monospace; } /* ============================================================ ESKI ISIMLERE KOPRU Sayfalarda --paper, --ink, --teal gibi ESKI degisken adlari yuzlerce yerde kullaniliyor. Hepsini tek seferde degistirmek riskli; onun yerine eski adlar yeni jetonlara BAGLANDI. Boylece: - eski kod calismaya devam eder - tema degisince eski kod da DOGRU renge doner Yeni kod dogrudan yeni jetonlari kullanmalidir. ============================================================ */ :root{ --paper:var(--zemin); --paper-2:var(--panel); --paper-3:var(--panel-2); --ink:var(--murekkep); --ink-2:var(--murekkep-2); --ink-3:var(--murekkep-3); --edge:var(--kenar); --rule:var(--cetvel); --teal:var(--vurgu); --teal-soft:var(--vurgu-soft); --navy:var(--koyu); --navy-ink:var(--koyu-ust); --solid:var(--koyu); --solid-ink:var(--koyu-ust); --green:var(--olumlu); --amber:var(--uyari); --red:var(--hata); --gold:var(--odul); --cyan:var(--vurgu); --sky:var(--murekkep-2); --dim:var(--murekkep-3); --void:var(--zemin); --panel2:var(--panel-2); --line:var(--kenar); --line2:var(--kenar); --sh:var(--golge-2); } /* ============================================================ OKUNURLUK YARDIMCILARI Koyu yuzey kullanan her yer bu sinifi alirsa, uzerindeki yazi rengi OTOMATIK dogru olur. ============================================================ */ .gv-koyu{background:var(--koyu);color:var(--koyu-ust)} .gv-koyu .ikincil{color:rgba(244,241,232,.74)} .gv-koyu .etiket{color:rgba(244,241,232,.52)} .gv-koyu a{color:var(--marka)} .gv-koyu hr,.gv-koyu .ayrac{border-color:var(--kenar-koyu)} .gv-acik{background:var(--panel);color:var(--panel-ust)} .gv-acik .ikincil{color:var(--murekkep-2)} .gv-acik .etiket{color:var(--murekkep-3)} /* ============================================================ ORNEK IKINCI TEMA — GECE verildiginde devreye girer. SADECE anlamsal jetonlar yeniden eslesir; sayfa kodu ayni kalir. ============================================================ */ [data-tema="gece"]{ --zemin:var(--gv-lacivert-900); --zemin-ust:var(--gv-krem-100); --panel:var(--gv-lacivert-800); --panel-ust:var(--gv-krem-100); --panel-2:#0C2E40; --panel-2-ust:#B9C6D0; --koyu:#0A2A3F; --koyu-ust:var(--gv-krem-100); --koyu-2:#02101A; --koyu-2-ust:var(--gv-krem-100); --murekkep:var(--gv-krem-100); --murekkep-2:#B9C6D0; --murekkep-3:#7A99B0; --vurgu:var(--gv-mavi-500); --vurgu-ust:#04141F; --vurgu-soft:rgba(72,180,228,.14); --olumlu:var(--gv-turkuaz-400); --olumlu-ust:#04141F; --olumlu-soft:rgba(95,214,206,.14); --uyari:#E8B33C; --uyari-ust:#04141F; --uyari-soft:rgba(232,179,60,.14); --hata:#E5606A; --hata-ust:#04141F; --hata-soft:rgba(229,96,106,.14); --odul:#E0B84A; --odul-soft:rgba(224,184,74,.14); --kenar:#173D52; --cetvel:#173D52; --golge-1:2px 2px 0 rgba(0,0,0,.30); --golge-2:4px 4px 0 rgba(0,0,0,.36); --golge-3:6px 6px 0 rgba(0,0,0,.44); } /* Cihaz koyu tema istiyorsa ve site tema secmemisse — istege bagli. Simdilik KAPALI; acmak icin asagidaki blogun yorumunu kaldir. @media (prefers-color-scheme: dark){ :root:not([data-tema]){ ... gece jetonlari ... } } */