/* =========================================================================== FAZ 9 -- IKI AYRI GORSEL KIMLIK --------------------------------------------------------------------------- Iki site bugune kadar BIREBIR ayni gorunuyordu: ayni jenerik Bootstrap mavisi (#4A90E2), ayni tek font, ayni kart estetigi. Ayni katalogu iki alanda yayimlarken bu, kullanicinin en cok itiraz ettigi seydi. Bu dosya TEK dosyadir ve iki siteye de AYNEN dagitilir; kimlik ayrimi ozniteliginden gelir. Site basina ayri CSS dosyasi tutmak, "sapan dosya" sayisini 9'dan 11'e cikarir ve her degisiklikte iki yerde bakim gerektirirdi. YERLESIM VE BILESEN KURALLARI DEGISMEDI. Degisen sey renk, tipografi, kose yaricapi, golge ve kenarlik dili. Sebep: 11.000 edebiyat sayfasi + katalog + admin ayni isaretlemeyi paylasiyor; yerlesimi yeniden yazmak olculemez bir risk, gorsel dili degistirmek olculebilir bir kazanc. YUKLEME SIRASI (header.php): bootstrap.min.css -> fontlar.css -> ikon.css -> style.css -> tema.css tema.css EN SONDA olmali: style.css'in :root blogundaki --bs-* ve --theme-* tanimlarini bilerek eziyor. KIMLIKLER cb = cumabozkurt.com "Murekkep" -- yazarin kisisel markasi. Kagit zemin, murekkep metin, bordo vurgu, serif govde. Basili kitap hissi; okuma metni one cikar. uck = ucretsizkitap.com.tr "Kutuphane" -- katalog/kesif sitesi. Soguk acik zemin, derin teal, terracotta eylem rengi, Inter. Yogun listeler ve tarama one cikar. Butun renk ciftleri WCAG icin olculdu (arac/kontrast.py degerleri): CB metin/kagit 15.42 · bordo/kagit 7.62 · beyaz/bordo 8.14 (AAA) UCK metin/zemin 15.31 · teal/zemin 7.32 · beyaz/teal 7.88 (AAA) Ikincil tonlarin en dusugu 4.72 (AA). Hicbiri tahmin degil. =========================================================================== */ /* --- ortak varsayilanlar (data-site gelmezse site yine de calisir) -------- */ :root { --marka: #4A90E2; --marka-koyu: #357ABD; --marka-rgb: 74, 144, 226; --vurgu: #B8860B; --kose: .5rem; --kose-kucuk: .35rem; --govde-yazi: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --baslik-yazi: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --baslik-agirlik: 700; --baslik-aralik: -.015em; --golge: 0 4px 12px rgba(0, 0, 0, .08); --golge-guclu: 0 10px 30px rgba(0, 0, 0, .15); --kenar-kalinlik: 1px; --marka-metin: var(--marka); --marka-metin-koyu: var(--marka-koyu); /* Kitap detayindaki anlamli istatistik kutulari (mavi=goruntulenme, yesil=okuma). Sabit yazildiklarinda koyu temada parlak leke kaliyorlardi. Metin renkleri gradyanin KOYU ucuna gore secildi: #0D47A1/#BBDEFB = 6.15 · #12511A/#C8E6C9 = 7.04 */ --ist-gor-zemin1: #E3F2FD; --ist-gor-zemin2: #BBDEFB; --ist-gor-kenar: #2196F3; --ist-gor-metin: #0D47A1; --ist-oku-zemin1: #E8F5E8; --ist-oku-zemin2: #C8E6C9; --ist-oku-kenar: #4CAF50; --ist-oku-metin: #12511A; } /* --------------------------------------------------------------------------- NEDEN IKI AYRI MARKA BELIRTECI Marka rengi iki farkli isle kullaniliyor: --marka ZEMIN olarak (duyuru cubugu, hero, rozet, buton) -- ustunde beyaz metin var, dolayisiyla KOYU kalmak zorunda. --marka-metin METIN/KENARLIK olarak (baglanti, yazar adi, ikon) -- koyu zemin uzerinde okunmasi icin ACIK olmak zorunda. Ilk surumde tek belirtec vardi. Koyu temada onu acik tona cevirince duyuru cubugu "acik teal zemin + beyaz yazi" oldu ve okunmaz hale geldi (ekran goruntusuyle yakalandi). style.css'teki 24 metin/kenarlik kullanimi arac ile --marka-metin'e cevrildi; 21 zemin kullanimi --marka'da kaldi. --------------------------------------------------------------------------- */ /* ========================================================================= cumabozkurt.com -- "Murekkep" ========================================================================= */ :root[data-site="cb"] { --marka: #8C2F39; --marka-koyu: #6E242C; --marka-rgb: 140, 47, 57; --vurgu: #8A6A21; --theme-bg: #FBF7F0; --theme-surface: #FFFDF9; --theme-text: #241E1A; --theme-text-muted: #5C534C; --theme-border: #E4DACB; --theme-shadow: rgba(60, 40, 20, .07); /* Dokuman hissi: keskin koseler, ince cizgi, golge yerine kenarlik */ --kose: 3px; --kose-kucuk: 2px; --golge: 0 1px 2px rgba(60, 40, 20, .06); --golge-guclu: 0 6px 18px rgba(60, 40, 20, .12); --govde-yazi: Georgia, "Iowan Old Style", "Times New Roman", serif; --baslik-yazi: Georgia, "Iowan Old Style", "Times New Roman", serif; --baslik-agirlik: 700; --baslik-aralik: -.005em; } /* ========================================================================= ucretsizkitap.com.tr -- "Kutuphane" ========================================================================= */ :root[data-site="uck"] { --marka: #0E5A64; --marka-koyu: #0A444B; --marka-rgb: 14, 90, 100; --vurgu: #A85A2A; --theme-bg: #F4F7F8; --theme-surface: #FFFFFF; --theme-text: #16202A; --theme-text-muted: #55636E; --theme-border: #D8E1E5; --theme-shadow: rgba(16, 32, 42, .06); --kose: .625rem; --kose-kucuk: .375rem; --golge: 0 2px 10px rgba(16, 32, 42, .07); --golge-guclu: 0 12px 28px rgba(16, 32, 42, .14); --govde-yazi: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --baslik-yazi: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --baslik-agirlik: 700; --baslik-aralik: -.02em; } /* ========================================================================= Bootstrap degiskenlerini kimlige bagla Bootstrap 5.3 bilesenleri bu degiskenleri okur; boylece buton, baglanti, odak halkasi ve form kontrolleri 355 adet !important'a dokunmadan kimlige uyar. ========================================================================= */ :root[data-site] { --bs-primary: var(--marka); --bs-primary-rgb: var(--marka-rgb); --bs-blue: var(--marka); --bs-indigo: var(--marka); --bs-cyan: var(--marka); --bs-info: var(--marka); --bs-info-rgb: var(--marka-rgb); --bs-secondary: var(--vurgu); --bs-link-color: var(--marka-metin); --bs-link-hover-color: var(--marka-metin-koyu); --bs-focus-ring-color: rgba(var(--marka-rgb), .25); --bs-body-bg: var(--theme-bg); --bs-body-color: var(--theme-text); --bs-border-color: var(--theme-border); --bs-border-radius: var(--kose); --bs-border-radius-sm: var(--kose-kucuk); --bs-border-radius-lg: calc(var(--kose) * 1.4); --bs-body-font-family: var(--govde-yazi); --bs-font-sans-serif: var(--govde-yazi); --bs-btn-bg: var(--marka); --bs-btn-border-color: var(--marka); --bs-btn-hover-bg: var(--marka-koyu); --bs-btn-hover-border-color: var(--marka-koyu); --bs-btn-active-bg: var(--marka-koyu); --bs-btn-active-border-color: var(--marka-koyu); --bs-btn-focus-shadow-rgb: var(--marka-rgb); } /* ========================================================================= Tipografi ========================================================================= */ :root[data-site] body { font-family: var(--govde-yazi); background-color: var(--theme-bg); color: var(--theme-text); } /* DIKKAT -- burada `color` AYARLANMAZ. Ilk surumde `color: var(--theme-text)` vardi ve ana sayfadaki renkli hero bolumunun BEYAZ H1'ini koyu metne cevirdi: baslik teal/bordo zemin uzerinde okunmaz hale geldi (ekran goruntusuyle yakalandi). Baslik rengi kendi baglamindan gelmeli; tema yalnizca TIPOGRAFIYI belirler. */ :root[data-site] h1, :root[data-site] h2, :root[data-site] h3, :root[data-site] h4, :root[data-site] h5, :root[data-site] h6, :root[data-site] .h1, :root[data-site] .h2, :root[data-site] .h3, :root[data-site] .h4, :root[data-site] .h5, :root[data-site] .h6 { font-family: var(--baslik-yazi); font-weight: var(--baslik-agirlik); letter-spacing: var(--baslik-aralik); } /* Okuma metni: satir uzunlugu ve satir araligi. Edebiyat govdesi ve kitap aciklamasi burada; kartlar ve listeler DISARIDA -- torun secici kullanmak kart basliklarini da makale basligi gibi bicimlendirirdi (kardes projede "yazilar karismis" sikayeti tam olarak bundan cikti). */ :root[data-site] .yazi-govde > p, :root[data-site] .edb-govde > p { line-height: 1.75; margin-bottom: 1.15em; } :root[data-site="cb"] .yazi-govde > p, :root[data-site="cb"] .edb-govde > p { font-size: 1.0625rem; /* serif govde optik olarak daha kucuk gorunur */ } /* CB: alintilar dokuman dilinde -- sol cizgi + italik, kutu yok */ :root[data-site="cb"] blockquote, :root[data-site="cb"] .blockquote { border-left: 3px solid var(--marka); padding-left: 1rem; font-style: italic; background: none; } /* UCK: alinti bir katalog kutusu */ :root[data-site="uck"] blockquote, :root[data-site="uck"] .blockquote { background: var(--theme-surface); border: var(--kenar-kalinlik) solid var(--theme-border); border-left: 4px solid var(--marka); border-radius: var(--kose-kucuk); padding: .85rem 1.1rem; } /* ========================================================================= Bilesen dili -- ayni isaretleme, iki farkli karakter ========================================================================= */ :root[data-site] .card, :root[data-site] .book-info-wrapper { background-color: var(--theme-surface); border-radius: var(--kose); } :root[data-site="cb"] .card { border: var(--kenar-kalinlik) solid var(--theme-border); box-shadow: none; } :root[data-site="cb"] .card:hover { box-shadow: var(--golge); } :root[data-site="uck"] .card { border: var(--kenar-kalinlik) solid transparent; box-shadow: var(--golge); } :root[data-site="uck"] .card:hover { border-color: var(--theme-border); box-shadow: var(--golge-guclu); } /* Ust bant: CB'de ince bir murekkep cizgisi, UCK'da renkli bir seritten ayrilan katalog basligi */ :root[data-site="cb"] .navbar { background-color: var(--theme-surface) !important; border-bottom: 2px solid var(--theme-text); } :root[data-site="uck"] .navbar { background-color: var(--theme-surface) !important; border-bottom: var(--kenar-kalinlik) solid var(--theme-border); box-shadow: 0 1px 0 rgba(var(--marka-rgb), .12); } :root[data-site] .btn-primary { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } /* CB butonu keskin ve duz; UCK butonu yumusak ve hafif kabarik */ :root[data-site="cb"] .btn { border-radius: var(--kose-kucuk); } :root[data-site="uck"] .btn { border-radius: var(--kose); } /* Ikincil eylem rengi (UCK'da terracotta) yalniz vurgu icin */ :root[data-site] .btn-secondary { --bs-btn-bg: var(--vurgu); --bs-btn-border-color: var(--vurgu); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--vurgu) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--vurgu) 85%, #000); } /* Duyuru cubugu kapatma -- istemci karari (bkz. announcement_bar.php). Sunucu HTML'i ziyaretciye gore degismedigi icin tam sayfa onbellegi bozulmaz. */ html.duyuru-kapali .announcement-bar { display: none !important; } /* ========================================================================= Erisilebilirlik ========================================================================= */ /* Odak halkasi: :focus degil :focus-visible -- fare tiklamasinda halka cikmaz, klavye gezinmesinde CIKAR. Onceden hicbir gorunur odak yoktu. */ :root[data-site] :focus-visible { outline: 3px solid var(--marka); outline-offset: 2px; border-radius: 2px; } :root[data-site] .btn:focus-visible, :root[data-site] .form-control:focus-visible { outline: 3px solid var(--marka); outline-offset: 2px; box-shadow: none; } @media (prefers-reduced-motion: reduce) { :root[data-site] *, :root[data-site] *::before, :root[data-site] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* Kapak buyutme efekti vestibuler rahatsizlik tetikleyebilir */ :root[data-site] .book-cover:hover { transform: none !important; } } /* ========================================================================= Koyu tema Sistem tercihine gore. Isaretleme ziyaretciye gore DEGISMEZ, yalnizca CSS degisir -- tam sayfa onbellegi (FAZ 8c) bozulmaz. ========================================================================= */ @media (prefers-color-scheme: dark) { :root[data-site="cb"] { --theme-bg: #1A1613; --theme-surface: #241E1A; --theme-text: #EDE6DC; --theme-text-muted: #B3A797; --theme-border: #3B322A; --theme-shadow: rgba(0, 0, 0, .5); /* zemin: koyu kalir, ustundeki beyaz metin okunsun (beyaz/#98333E 7.4) */ --marka: #98333E; --marka-koyu: #7A2830; --marka-rgb: 152, 51, 62; /* metin/kenarlik: acilir (#E58A93 / #1A1613 = 7.18) */ --marka-metin: #E58A93; --marka-metin-koyu: #F0A9B0; --vurgu: #D8B45E; } :root[data-site="uck"] { --theme-bg: #101820; --theme-surface: #18232D; --theme-text: #DDE5EA; --theme-text-muted: #9AAAB5; --theme-border: #2A3945; --theme-shadow: rgba(0, 0, 0, .5); /* zemin: koyu kalir (beyaz/#0F6E79 = 5.9) */ --marka: #0F6E79; --marka-koyu: #0A4E56; --marka-rgb: 15, 110, 121; /* metin/kenarlik: acilir (#63C7D2 / #101820 = 9.06) */ --marka-metin: #63C7D2; --marka-metin-koyu: #8ADCE5; --vurgu: #E0955F; } /* Buton zemini koyu temada da KOYU kaldigi icin metin beyaz kalir. (Ilk surumde marka rengi aciliyordu ve buton metni koyu yapiliyordu; o yaklasim duyuru cubugunu okunmaz hale getirdi.) */ /* Kapak gorselleri koyu zeminde fazla parlak kalir */ :root[data-site] .book-cover, :root[data-site] .card img { filter: brightness(.92); } /* Istatistik kutulari: anlamli renk korunur, tonlar koyulastirilir (#8FD3F4/#174054 = 6.74 · #95DDA8/#1A4026 = 7.30) */ :root[data-site] { --ist-gor-zemin1: #12303F; --ist-gor-zemin2: #174054; --ist-gor-kenar: #2E6D8C; --ist-gor-metin: #8FD3F4; --ist-oku-zemin1: #14301C; --ist-oku-zemin2: #1A4026; --ist-oku-kenar: #3C7A4C; --ist-oku-metin: #95DDA8; } } /* ========================================================================= Yazdirma Reklam, gezinme, alt bilgi ve etkilesim ogeleri kagida basilmaz; metin siyah-beyaz ve tam genislik olur. ========================================================================= */ @media print { :root[data-site] { --theme-bg: #fff; --theme-surface: #fff; --theme-text: #000; --theme-border: #999; } body { background: #fff !important; color: #000 !important; } .navbar, .site-footer, footer, .reklam, .duyuru-cubugu, .istatistik-serit, .edb-serit, .btn, .rating-section-container, #comment-form-container, .yorum-formu, .breadcrumb-actions, .atlama-baglantisi { display: none !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; } a { color: #000 !important; text-decoration: underline; } .card, .book-info-wrapper { box-shadow: none !important; border: 1px solid #999 !important; } main, .container { max-width: none !important; width: auto !important; } img { max-width: 100% !important; } h1, h2, h3 { page-break-after: avoid; } p, blockquote, figure { page-break-inside: avoid; } }