/* ========================================================================== Tarifler (Taste) — kalip katmani -------------------------------------------------------------------------- Ortak katmanin (ghost-ortak.css) ustune biner. TARIFLERIN KALIBI: gorsel ve adim. Blogda metin ana icerik, burada gorsel. Tarif okunmaz, TAKIP EDILIR: goz surekli malzemeyle adim arasinda gidip gelir. Bu yuzden listeler ve basliklar blogdakinden daha belirgin, satir uzunlugu daha kisa. KASITLI FARK: display baslik serif. Taste EB Garamond ile geliyor ve bu korunuyor. Uc mulk ayni aileden ama ayni kalipta degil; farkin nerede oldugu bilincli olarak seciliyor. Govde ve arayuz yazisi yine Montserrat, yani aile bagi tipografide kopmuyor. ========================================================================== */ /* -------------------------------------------------------------------------- Serif yalnizca display basliklarda -------------------------------------------------------------------------- Taste serif'i BODY seviyesinde uyguluyor: . Yani varsayilan olarak malzeme listesi de, adimlar da serif oluyordu. Tarif okunmaz, TAKIP EDILIR; goz malzemeyle adim arasinda ziplarken sans daha kolay taraniyor. Ayrica govde yazisinin uc mulkte ayni olmasi aile bagini tasiyan ana unsur. Bu yuzden serif geri alinip yalnizca basliklara veriliyor. Secici body sinifi kadar ozgul olmali, yoksa temanin kurali kazaniyor. -------------------------------------------------------------------------- */ /* Taste yazi tipini soyle yaziyor: font-family: var(--gh-font-body, var(--font-serif)) Yani temanin kendi genislet me noktasi var. Ozgullukle yarismak yerine (temanin secicileri :not([class*=...]) zincirleriyle epey yuksek) bu iki degisken tanimlaniyor; tema kendi kurallarinda otomatik olarak bunlari kullaniyor. Tek satirla butun govde ve baslik ailesi yonetiliyor. */ :root { --gh-font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --gh-font-heading: 'EB Garamond', Georgia, 'Times New Roman', serif; } /* -------------------------------------------------------------------------- Baslik duzeni: logo solda -------------------------------------------------------------------------- Taste masaustunde basligi ortaliyor (menu | logo | aksiyonlar). Ana site ve blog logoyu solda tutuyor; ayni ailenin uc mulkunde gezinme cubugunun capasi ayni yerde olmali. Ortak katman navbar'in olculerini esitliyor, siralama ise Taste'e ozgu oldugu icin burada. -------------------------------------------------------------------------- */ /* Serit siralamasi yalnizca masaustu duzeninde gecerli: 1200 altinda hamburger ve tam ekran menu var, oradaki yerlesimi ortak katman yonetiyor. Blok 992'de baslarken 992-1199 araliginda mobil menuyle catisiyordu. */ @media (min-width: 1200px) { #gh-head .gh-head-brand { grid-column: 1; justify-self: start; } /* justify-self: start VERILMEZ: kutu icerigi kadar daralinca temanin tasma betigi maddeleri "..." dugmesi altina topluyor. Kutu esnek kalir, hiza listenin kendi isi. */ #gh-head .gh-head-menu { grid-column: 2; } #gh-head .gh-head-actions { grid-column: 3; justify-self: end; } } /* -------------------------------------------------------------------------- Yazi kabinin ekseni -------------------------------------------------------------------------- Taste .gh-canvas'i isimli izgara satirlariyla kuruyor ve dis payi kendi --gap degiskeninden aliyor: mobilde 20px, 1013px ekranda 31.4px. Ayni sayfada navbar, kart izgarasi ve footer ise ailenin ekseninde (mobilde 15px, masaustunde 41.4px) duruyordu; tarif kapak gorseli 10px iceriden basliyor, kayik gorunuyordu. Izgaranin kendisi korunuyor - full/wide/main izleri Taste'in kalibinin parcasi ve tam tasan gorseller onlarla calisiyor. Degisen yalnizca izlerin genisligi: dis iz 1fr -> kap neredeyse ana sitenin container'i kadar wide izi (kap - okuma olcusu) / 2, yani genis gorsel tam kap kadar main izi okuma olcusu (mobilde kabin tamami) -------------------------------------------------------------------------- */ .gh-canvas { --da-kap: calc(100% - 30px); --da-okuma: min(calc(100% - 30px), 720px); grid-template-columns: [full-start] minmax(0, 1fr) [wide-start] minmax(0, calc((var(--da-kap) - var(--da-okuma)) / 2)) [main-start] var(--da-okuma) [main-end] minmax(0, calc((var(--da-kap) - var(--da-okuma)) / 2)) [wide-end] minmax(0, 1fr) [full-end]; } /* Kap genisligi ana sitenin container olcegiyle ayni basamaklarda. (Degerlerden 30px dolgu dusulmus hali yaziliyor.) */ @media (min-width: 576px) { .gh-canvas { --da-kap: 510px; } } @media (min-width: 768px) { .gh-canvas { --da-kap: 690px; } } @media (min-width: 992px) { .gh-canvas { --da-kap: 930px; } } @media (min-width: 1200px) { .gh-canvas { --da-kap: 1110px; } } @media (min-width: 1400px) { .gh-canvas { --da-kap: 1290px; } } /* Tariflerde de govde bir tik kuculuyor ama BLOGDAN DAHA AZ: burada metin malzeme ve adim listelerinden olusuyor, satirlar zaten kisa; mutfakta telefondan okunuyor olmasi da puntoyu fazla dusurmemeyi gerektiriyor. */ .gh-content { --icerik-govde: 16.5px; } @media (max-width: 767px) { .gh-content { --icerik-govde: 16px; } } body.is-font-serif .gh-content > p, body.is-font-serif .gh-content > ul > li, body.is-font-serif .gh-content > ol > li { font-size: var(--icerik-govde); } /* Gezinme cubugu arayuz yazisidir, display basligi degil: uc mulkte de Montserrat. Blogda (Solo) zaten oyle; Taste serif'i menu ve butonlara da tasiyordu. Olculdu: blog 18.2px/600 Montserrat, tarifler ayni olculerde ama EB Garamond ile ciziliyordu. */ #gh-head .nav a, #gh-head .gh-head-actions a, #gh-head .gh-head-actions button, #gh-head .nav-more-toggle { font-family: var(--da-font); } .gh-article-title, .gh-card-title, .gh-header-title { font-weight: var(--da-agirlik-kalin); letter-spacing: 0; } .gh-article-title { line-height: 1.12; } /* -------------------------------------------------------------------------- Tarif govdesi Malzeme ve adim listeleri tarifin omurgasi; okunakli ve taranabilir olmalari gerekiyor. -------------------------------------------------------------------------- */ /* Okuma olcusu. Olculdu: 85 karakter; malzeme satirlari kisa oldugu icin listelerde sorun degil ama giris paragrafi ve diyetisyen notu bu genislikte zor okunuyor. Tipografide onerilen 45-75 araligina cekiliyor. Solo'nun aksine Taste icerigi izgaraya oturtmuyor, dogrudan genislik isliyor; bu yuzden buradaki kural gercekten etkili. */ .gh-content > p, .gh-content > ul, .gh-content > ol, .gh-content > h2, .gh-content > h3, .gh-content > blockquote { max-width: 620px; /* width: 100% sart. .gh-content bir grid; grid ogesine yalnizca margin-inline: auto verilirse oge stretch'i birakip ICERIGI KADAR daralir ve ortalanir. Uzun paragraflar max-width'e dayandigi icin sorun gorunmuyordu, kisa listeler (sos malzemeleri, besin degerleri) daralip saga kayiyordu. width: 100% ogeyi sutuna yayar, max-width sinirlar, margin ortalar. */ width: 100%; /* Hizalama grid'in kendi diliyle veriliyor. Otomatik marj burada guvenilir degil: tema bazi ogelerin marjini kendi kurallariyla sifirliyor ve basliklar govde metninden 50px solda asili kaliyordu. justify-self ogeyi kendi grid alaninda ortalar, marj tartismasi kalmaz. */ justify-self: center; } /* MARJ VERMEYIN. Ghost basliklara `id` uretiyor ve Taste bosluk sistemini ona baglamis: .gh-content > [id] { margin: 0 } (0,2,0) .gh-content > [id]:not(:first-child){ margin-top: 1.6em } (0,3,0) .gh-content > [id] + * { margin-top: 1em } (0,2,0) Buradaki `.gh-content > h2` (0,1,1) bunlarin hicbirini yenmiyor. Once burada margin-top/bottom yaziliydi ve olculdugunde hicbir etkisi olmadigi goruldu -- calisiyormus gibi duran olu kod. Temanin ritmi zaten dogru (baslik ustu 1.6em, baslik alti 1em); yalnizca punto ayarlaniyor. */ .gh-content > h2 { font-size: 26px; line-height: var(--da-satir-siki); } .gh-content > h3 { font-size: 20px; } /* Temanin blockquote kurali `margin-top: 3.2em !important` ve "baslik altindaki oge 1em" kuralini eziyor: "Diyetisyen notu" basligi kendi kutusundan 63px yukarida asili kaliyordu, oysa her baslik icerigine 19.8px uzakta. Kutu basligina baglaniyor. Sonrasindaki bolum basligi da 83.2px yerine normal bolum araligina (1.6em) donuyor. !important zorunlu: temanin kurallari da !important, esitlikte ozgulluk belirliyor -- (0,2,1) > (0,1,1). */ .gh-content > [id] + blockquote { margin-top: 1em !important; } .gh-content > blockquote + [id] { margin-top: 1.6em !important; } /* Malzemeler ve yapilis: madde arasi bosluk metin icindekinden genis, cunku goz bu listelerde satir satir ilerlemiyor, madde madde ziplar. */ .gh-content > ul, .gh-content > ol { padding-left: 1.25em; line-height: var(--da-satir-govde); /* Madde metni zaten govde puntosunda ama listenin KENDI puntosu temadan 19.8px geliyordu; madde isaretleri (nokta ve numara) o olcuden ciziliyor ve metinden bir kademe iri duruyordu. */ font-size: var(--da-olcek-govde); } .gh-content > ul > li, .gh-content > ol > li { margin-bottom: var(--da-bosluk-3); padding-left: .25em; } .gh-content > ol > li::marker { color: var(--da-yesil-metin); font-weight: var(--da-agirlik-cok-kalin); } .gh-content > ul > li::marker { color: var(--da-turuncu); } /* -------------------------------------------------------------------------- Diyetisyen notu Tariflerdeki blockquote yalnizca alinti degil, uzman yorumu. Ortak katmandaki krem zeminli kutu burada biraz daha belirgin. -------------------------------------------------------------------------- */ .gh-content blockquote { border-left-width: 4px; line-height: var(--da-satir-govde); } /* -------------------------------------------------------------------------- Liste ve etiketler -------------------------------------------------------------------------- */ .gh-list-item-primary-tag, .gh-article-meta-tag { color: var(--da-turuncu-metin); font-family: var(--da-font); font-weight: var(--da-agirlik-cok-kalin); letter-spacing: .08em; text-transform: uppercase; font-size: var(--da-olcek-kucuk); } .gh-card-wrapper { padding: var(--da-kart-dolgu); } /* -------------------------------------------------------------------------- Dar ekranda display olcegi -------------------------------------------------------------------------- Taste butun puntolari `calc( * var(--font-multiplier))` ile yaziyor ve `is-font-serif` govdeye 1.1 carpani koyuyor. Serif kalibi icin dogru bir tercih ama carpan mobilde de aynen geciyor; 375px'te olculdu: hero basligi 41.5px one cikan kart basligi 37.8px (magazine ilk kart, carpan 1.26) digerleri 22px one cikan ozet 18.75px Hero, tarifler kalibinin imzasi -- kaldirilmiyor, kademe indiriliyor. One cikan kart 375px'te uc satira sariyordu; 24px'te iki satir. One cikan kartin secicisi temada (0,4,0); ayni secici birebir tekrarlaniyor, esitlikte kaynak sirasi bu dosyayi kazandiriyor. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .gh-header-primary { font-size: 28px; } /* Alt satir temada 2.4rem x 1.1 = 26.4px; baslik 28'e inince ikisi neredeyse esitlenip hiyerarsi kayboluyordu. Ustelik sans oldugu icin serif baslikten daha iri okunuyor. Govde olcegine iniyor. */ .gh-header-secondary { font-size: var(--da-olcek-govde); } /* Hero'daki "abone ol" alani gercek bir form degil: tek bir