Bu CSS kodu, "Guardian Headline Full" adlı özel bir yazı tipi ailesini tanımlar ve bu aile birden fazla yazı tipi ağırlığı ve stili içerir. Yazı tipi ailesi, hem normal hem de italik stillerde hafif, normal, orta ve yarı kalın ağırlıklarını kapsar. Yazı tipi dosyaları, Guardian'ın varlık sunucusunda barındırılan WOFF2, WOFF ve TrueType formatlarında sağlanmıştır.
Guardian Headline Full yazı tipi ailesi, her biri birden fazla formatta (WOFF2, WOFF ve TTF) mevcut olan çeşitli stiller içerir. Still şunlardır:
- Kalın (ağırlık 700, normal stil)
- Kalın İtalik (ağırlık 700, italik stil)
- Siyah (ağırlık 900, normal stil)
- Siyah İtalik (ağırlık 900, italik stil)
- Hafif (ağırlık 300, normal stil)
- Hafif İtalik (ağırlık 300, italik stil)
- Normal (ağırlık 400, normal stil)
- Normal İtalik (ağırlık 400, italik stil)
Ayrıca, Guardian Titlepiece yazı tipi Kalın (ağırlık 700, normal stil) olarak mevcuttur.
"Guardian Headline Full" yazı tipi ailesi, çeşitli ağırlık ve stillerde birden fazla yazı tipi dosyası içerir. Her yazı tipi, belirtilen URL'lerde barındırılan WOFF2, WOFF ve TrueType formatlarında mevcuttur. Ağırlıklar 400 (normal) ile 900 (siyah) arasında değişir ve her ağırlık için hem normal hem de italik stiller sağlanır.
```css
@font-face {
font-family: Guardian Headline;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-column-gap: 0px;
grid-template-columns: 100%;
grid-template-areas:
"media"
"title"
"headline"
"standfirst"
"lines"
"meta"
"body";
}
@media (min-width: 30em) {
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
padding: 0 20px;
max-width: 620px;
}
}
@media (min-width: 46.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 100%;
grid-column-gap: 10px;
grid-template-areas:
"title"
"headline"
"standfirst"
"media"
"lines"
"meta"
"body";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: 80px;
}
}
@media (min-width: 61.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas:
"title right-column"
"headline right-column"
"standfirst right-column"
"media right-column"
"lines right-column"
"meta right-column"
"body right-column"
". right-column";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: unset;
}
}
@media (min-width: 71.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas:
"title border headline right-column"
". border standfirst right-column"
". border media right-column"
". border body right-column"
". border . right-column";
}
#article-body>div .content--interactive-grid .content__standfirst,
.content--interactive>div .content--interactive-grid .content__standfirst,
#comment-body .content--interactive-grid .content__standfirst,
[data-gu-name=body] .content--interactive-grid .content__standfirst,
#feature-body .content--interactive-grid .content__standfirst {
padding-bottom: 0;
}
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
/ Altyazı stillendirmesi burada devam ediyor /
}
}
```
Sürükleyici figür altyazıları ve etkileşimli ızgara içeriği için dolgu, üstte 4 piksel ve diğer yerlerde 0 olarak ayarlanmıştır. Etkileşimli ızgaralar içindeki "lines" ve "meta" adlı öğeler belirli bir ızgara alanına yerleştirilmiştir. "Lines" öğelerinin yüksekliği içeriklerine sığacak şekilde ayarlanmış ve üst kenar boşluğu 5 pikseldir, "meta" öğelerinin ise üst kenar boşluğu 18 pikseldir.
81.25 em'den geniş ekranlarda, etkileşimli ızgaralar sabit ve esnek genişliklere sahip beş sütunlu bir düzen kullanır.
iOS ve Android cihazlarda, makale başlıkları, standfirst metni, bölüm etiketleri ve yazar bilgileri için belirli yazı tipleri ve ağırlıkları kullanır. Bölüm etiketleri büyük harfle yazılır ve çizgilerin dolgusu ayarlanmıştır. Figür görüntüleri şeffaf arka plana sahiptir ve görüntüler hafifçe sağa kaydırılmıştır. Başlıklar şeffaf arka plana, ayarlanmış dolguya sahiptir ve %115 satır yüksekliği ile 24 piksel yazı tipi boyutu kullanır. Android için ana ve alt başlıklar blok olarak görüntülenecek şekilde ayarlanmıştır. Hem iOS hem de Android'de alt başlıklar, hafif yazı tipi ağırlığı, sola hizalama ve dengeli metin kaydırması ile stillendirilmiştir.
Makale girişlerinin dolgusu yoktur ve kopyaları gizlenmiştir.
Yazar bilgisi ve yayın tarihi öğeleri, normal ağırlık ve %130 satır yüksekliği ile 17px yazı tipi kullanır. Yazar bilgisi metni ve yazar bağlantıları #707070 rengindedir.
Standfirst paragrafları, normal stil, hafif ağırlık ve %115 satır yüksekliği ile 20px olarak ayarlanmıştır. Standfirst paragrafları içindeki bağlantılar kalın, #707070 renginde, alt çizgili ve arka plan resmi olmadan stillendirilmiştir.
Başlık metni #dcdcdc rengindedir.
Görüntüler ve kapları, otomatik yükseklik ve 620 piksel maksimum genişlik ile 100vw eksi 20px genişliğe ayarlanmıştır. İç figür öğelerinin yüksekliği ayarlanmamış olarak bırakılmıştır. Vitrin görüntülerinin maksimum genişliği 280 pikseldir.
Navigasyonu takip eden belirli bölümler ve kenar çubukları gizlenmiştir. Atom öğelerinin kenar boşluğu veya dolgusu yoktur.
Vitrin öğeleri ve içerikleri, 61.25em'den geniş görünüm alanları için 260px'e çıkan 210px maksimum genişliğe sahiptir. Satır içi ve vitrin öğeleri içindeki altyazı açıklamaları da buna göre stillendirilmiştir. Gövde içindeki altyazılar için açıklama metni 14px, açık gri renk (#707070) ve satır içi olarak ayarlanmıştır. Satır içi ve vitrin öğeleri için altyazılardaki ilk açıklama, satır içi blok olarak ayarlanmıştır.
71.25em'den geniş ekranlarda, satır içi ve vitrin öğeleri için altyazılar göreceli olarak konumlandırılmış ve genişlikleri sıfırlanmıştır.
Etkileşimli içerik makaleleri için düzen, "header", "headline", "standfirst", "lines", "meta" ve "body" adlı ızgara alanlarını kullanır. Daha büyük ekranlarda (71.25em ve üzeri), ızgara düzeni "header", "meta", "border", "standfirst" ve "body" alanlarına sahip üç sütuna dönüşür. Ana sütun kenar boşluğu kaldırılmış, sol kenarlık gizlenmiş ve paragraf genişliği 620px olarak ayarlanmıştır.
Başlık öğeleri belirli yazı tipi ayarlarına sahiptir: Guardian Headline veya benzer yazı tipleri, 24px boyut, hafif ağırlık (300) ve açık gri renk (#dcdcdc). Küçük ekranlarda dolgu 0–10px, orta ekranlarda (30em ve üzeri) 0–20px'dir ve büyük ekranlarda (71.25em ve üzeri) kaldırılmıştır.
Çizgiler gizlenmiştir. Büyük ekranlarda, makale başlığı soldan 20px mutlak konumlandırılmıştır.
Makale başlığı bağlantıları 17px yazı tipi boyutu ve normal stil kullanır. Başlığın üst dolgusu 2px'dir ve etiketler üst kenarlık ve dolguya sahiptir (küçük ekranlarda 0–10px, orta ekranlarda 0–20px). Daha büyük ekranlarda (46.25em ve üzeri) üst kenarlık kaldırılmış ve en büyük ekranlarda (71.25em ve üzeri) dolgu 0 olarak ayarlanmıştır.
Bu CSS kodu, etkileşimli bir makale içindeki öğeleri stillendirir.
Makale başlıkları ve bağlantıları için satır yüksekliği %115 ve metin rengi #ff5943 olarak ayarlanmıştır. Başlık bağlantılarının üzerine gelindiğinde, alt çizgi rengi #dcdcdc olarak değişir.
Standfirst (makale özeti), belirli yazı tipleri, gri renk (#606060), 24px yazı tipi boyutu, normal stil, 400 ağırlık ve %115 satır yüksekliği kullanır. Ekran genişliğine göre ayarlanan dolguya sahiptir: küçük ekranlar için 2px 10px, 30em ve daha geniş ekranlar için 2px 20px ve 71.25em ve üzeri ekranlar için dolgu yoktur. Standfirst'taki bağlantılar #707070 rengindedir ve üzerine gelindiğinde 2px alt kenarlık alır.
Meta bölümündeki sosyal medya düğmelerinin geçiş efekti yoktur. Üzerlerine gelindiğinde arka planları #121212, kenarlıkları #121212, metinleri #dcdcdc olur ve herhangi bir SVG simgeleri de #121212 arka plan ile #dcdcdc dolgu rengine dönüşür.
Paylaşım düğmeleri gizlenmiştir. Küçük 4px satır içi boşluk öğesi tanımlanmıştır. Makale gövdesi için, bir isimler ızgara konteyneri, 620px maksimum genişliğe sahip iki sütunlu bir düzen kullanır.
46.25em'den geniş ekranlar için, isimler ızgara konteyneri, her biri 310px genişliğinde iki sütun kullanır. Izgaradaki tek numaralı öğeler 5px sağ dolguya (daha geniş ekranlarda 10px), çift numaralı öğeler ise 5px sol dolguya (daha geniş ekranlarda 10px) sahiptir.
Izgara içindeki başlıklar (h2), 17px yazı tipi boyutu, üst kenarlık, 2px üst dolgu ve 620px maksimum genişliğe sahiptir. Bu başlıkları takip eden liste öğelerinin dolgusu veya kenar boşluğu yoktur, ilk öğe farklı bir metin rengi kullanır. Liste öğesi işaretleyicileri gizlenmiştir ve paragraf metni belirli bir yazı tipi ailesi, 14px boyut ve %130 satır yüksek
