Bu CSS kodu, "Guardian Headline Full" adlı özel bir yazı tipi ailesini birden fazla yazı tipi ağırlığı ve stiliyle tanımlar. Her varyasyon için (açık, normal, orta ve yarı kalın ağırlıkların hem normal hem de italik stillerini içeren) farklı formatlardaki (WOFF2, WOFF ve TTF) yazı tipi dosyalarını ve bunlara karşılık gelen URL'leri belirtir.
Guardian Headline Full yazı tipi ailesi, çeşitli stiller içerir: kalın (normal ve italik), siyah (normal ve italik), açık (normal ve italik) ve normal (normal ve italik). Her stil, sağlanan URL'lerde barındırılan WOFF2, WOFF ve TrueType formatlarında mevcuttur. Ayrıca, aynı dosya formatlarına sahip, kalın (normal stil) Guardian Titlepiece yazı tipi de dahildir.
Guardian Headline Full yazı tipi ailesi, her biri birden fazla formatta (woff2, woff ve ttf) mevcut olan çeşitli stiller içerir. İşte detaylar:
- Normal İtalik: ağırlık 400, italik stil
- Orta: ağırlık 500, normal stil
- Orta İtalik: ağırlık 500, italik stil
- Yarı Kalın: ağırlık 600, normal stil
- Yarı Kalın İtalik: ağırlık 600, italik stil
- 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
Tüm yazı tipleri aynı dizinden kaynaklanır ve alternatif karakter setleri içermez.
Sağlanan metin, büyük olasılıkla The Guardian için bir web sitesinin yazı tipi stillerini ve düzen ızgaralarını tanımlayan CSS kodu gibi görünmektedir. Özel yazı tipleri için yazı tipi kurallarını ve ekran boyutuna göre ayarlanan duyarlı ızgara düzenlerini içerir. Kod, farklı içerik öğeleri için alanları belirtir ve çeşitli cihaz genişlikleri için stil kuralları belirler.
Sürükleyici altyazılara sahip etkileşimli ızgara figürleri için, altyazı dolgusu üstte 4 piksel ve diğer yerlerde 0 olarak ayarlanmıştır.
Etkileşimli ızgara içeriği içindeki `lines` ve `meta` veri özniteliklerine sahip öğeler, 2. satırdan 5. satıra ve 1. sütundan 2. sütuna kadar uzanan bir ızgara alanına yerleştirilir. `lines` öğeleri, içeriklerine uyan bir yüksekliğe ve 5 piksel üst kenar boşluğuna sahipken, `meta` öğeleri 18 piksel üst kenar boşluğuna sahiptir.
81.25em'den geniş ekranlarda, etkileşimli içerik için ızgara düzeni 219px, 1px, 620px, 80px ve 300px sütunlarını kullanır.
iOS ve Android cihazlarda, makale başlıkları belirli yazı tipleri ve stiller kullanır:
- Standfirst metni, orta ağırlıkta Guardian Headline veya benzeri serif yazı tiplerini kullanır.
- Bölüm kicker'ı blok olarak görüntülenir ve ilk harfi büyük harfle yazılır.
- Bir çizgi öğesi 12 piksel üst dolguya sahiptir.
- Yazar adı için kalın serif yazı tipi kullanılır ve içindeki bağlantılar da kalındır.
- Görsel figürler otomatik yüksekliğe sahiptir ve atomik öğeleri takip eden paragrafların üst kenar boşluğu yoktur.
"Guardian Headline Full" için yazı tipi yüzleri, woff2, woff ve ttf dosyalarından kaynaklanan açık ve açık italik ağırlıklarla tanımlanır.
Guardian Headline Full yazı tipi ailesi, normal, italik, orta, orta italik, yarı kalın, yarı kalın italik, kalın ve kalın italik gibi çeşitli stiller ve ağırlıklar içerir. Her stil, woff2, woff ve ttf dahil olmak üzere birden fazla formatta mevcuttur.
Bu CSS kodu, bir web sitesi için yazı tipi stillerini ve düzen kurallarını tanımlar. Farklı ağırlık ve stillerde çeşitli formatlardaki (WOFF2, WOFF, TTF) "Guardian Headline" ve "Guardian Titlepiece" için yazı tipi dosyalarını belirtir. Ayrıca, farklı ekran boyutları için kenar boşluklarını, genişlikleri ve konumlandırmayı ayarlayan duyarlı tasarım kurallarını içerir. Örneğin, daha büyük ekranlarda, ana içerik sütunu sol kenar boşluğu ve dikey bir kenarlık alırken, sürükleyici öğeler daha küçük ekranlarda tam genişliğe genişler. Kod ayrıca paragraflar, listeler ve atomlar gibi öğeler için renk değişkenleri ve boşluk belirler.
Makale, etkileşimli, yorum ve özellik gövdelerindeki belirli öğelerden sonraki ilk paragrafın üst dolgusu 14px'dir.
Bu öğeleri takip eden ilk paragrafın ilk harfi, belirli bir yazı tipi, kalın ağırlık, 111px boyut, 92px satır yüksekliği, sola kayan, büyük harf, kutu boyutlandırma, 8px sağ kenar boşluğu, dikey hizalama ve bir renk değişkeni ile stilize edilmiştir.
Yatay bir çizgiyi hemen takip eden paragrafların üst dolgusu yoktur.
Vitrin öğesi altyazıları, %100 genişlik ve 620px maksimum genişlik ile statik olarak konumlandırılır.
Sürükleyici öğeler, kaydırma çubuğu çıkarılarak tam görünüm alanı genişliğini kapsar. 71.24em'e kadar olan ekranlarda, maksimum genişlikleri 978px'dir ve altyazıların yatay dolgusu 10px'dir. 30em ile 71.24em arasında, altyazıların yatay dolgusu 20px'dir. 46.25em ile 61.24em arasındaki ekranlar için, sürükleyici öğelerin bir maksimum genişliği vardır.
```css
@media (max-width: 740px) {
.element.element--immersive.element-immersive {
margin-left: -10px !important;
margin-right: 0 !important;
left: 0;
}
}
@media (max-width: 740px) and (min-width: 480px) {
.element.element--immersive.element-immersive {
margin-left: -20px !important;
}
.element.element--immersive.element-immersive figcaption {
padding-inline: 20px;
}
}
@media (min-width: 980px) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0;
grid-template-columns: [title-start headline-start meta-start standfirst-start] repeat(5, 1fr) [title-end headline-end meta-end standfirst-end portrait-start] repeat(5, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start] 0.75fr [standfirst-end meta-start] auto [meta-end portrait-end];
}
.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name=headline] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(--headerBorder);
}
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name=meta] {
position: relative;
padding-top: 2px;
margin-right: 0;
}
.furniture-wrapper .standfirst .content__standfirst,
.furniture-wrapper #standfirst .content__standfirst,
.furniture-wrapper [data-gu-name=standfirst] .content__standfirst {
margin-bottom: 4px;
}
.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name=standfirst] ul li {
font-size: 20px;
}
.furniture-wrapper .standfirst li a,
.furniture-wrapper .standfirst a,
.furniture-wrapper #standfirst li a,
.furniture-wrapper #standfirst a,
.furniture-wrapper [data-gu-name=standfirst] li a,
.furniture-wrapper [data-gu-name=standfirst] a {
border-bottom: none;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
}
.furniture-wrapper .standfirst li a:hover,
.furniture-wrapper .standfirst a:hover,
.furniture-wrapper #standfirst li a:hover,
.furniture-wrapper #standfirst a:hover,
.furniture-wrapper [data-gu-name=standfirst] li a:hover,
.furniture-wrapper [data-gu-name=standfirst] a:hover {
text-decoration-color: var(--new-pillar-colour);
}
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=standfirst] p:first-of-type {
border-top: 1px solid var(--headerBorder);
padding-bottom: 0;
}
}
@media (min-width: 980px) and (min-width: 1140px) {
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=standfirst] p:first-of-type {
border-top: unset;
}
}
@media (min-width: 980px) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role=inline].element {
max-width: 630px;
}
}
@media (min-width: 1140px) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(2, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(7, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name=meta]:before {
content: "";
width: 540px;
position: absolute;
top: 0;
background-color: var(--headerBorder);
height: 1px;
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name=standfirst] p {
border-top: unset;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name=standfirst]:before {
content: "";
width: 1px;
background-color: var(--headerBorder);
height: 100%;
position: absolute;
top: 0;
left: 0.5px;
}
}
@media (min-width: 1300px) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(8, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] 0.75fr [standfirst-end meta-end portrait-end];
}
}
```
Sağlanan metin, başlıklar, meta bilgiler, altyazılar ve medya gibi öğeleri içeren bir web sayfası düzeni için CSS kodu gibi görünmektedir. Farklı ekran boyutları için stiller tanımlar ve açık ve koyu modlar için renk değişkenleri içerir.
iOS ve Android cihazlar için CSS, belirli makale konteynerlerindeki ilk harfin rengini ikincil sütun rengine ayarlar. Ayrıca makale başlığı yüksekliğini sıfıra ayarlar ve dolgu, etiketler için yazı tipi özellikleri ve belirli bir yazı tipi boyutu, ağırlığı ve rengi ile başlık biçimlendirmesi dahil olmak üzere mobilya sarmalayıcısına stil uygular. Mobilya sarmalayıcısı içindeki görsel öğeler de stil için hedeflenir.
Android'deki makale konteynerlerindeki görseller için, görsel öğesi 14px üst kenar boşluğu, alt kenar boşluğu yok ve -10px sol kenar boşluğu ile göreceli olarak konumlandırılır. Genişliği, kaydırma çubuğu genişliği çıkarılarak tam görünüm alanı genişliğine ayarlanır ve yüksekliği otomatik olarak ayarlanır.
iOS ve Android'de, görsellerin iç öğeleri (figür konteyneri, görselin kendisi ve bağlantılar gibi) şeffaf bir arka plana sahiptir. Genişlikleri, kaydırma çubuğu çıkarılarak görünüm alanı genişliğiyle eşleşir ve yükseklikleri, diğer yükseklik ayarlarını geçersiz kılarak otomatik olarak ayarlanır.
Hem iOS hem de Android'de standfirst bölümü (makale özeti) için 4px üst dolgu, 24px alt dolgu ve -10px sağ kenar boşluğu vardır.
Standfirst içindeki metin, Guardian Headline yazı tipi ailesini veya benzeri serif yazı tiplerini kullanır. Standfirst'taki bağlantılar, belirli bir renk, arka plan görseli olmadan, 6px ofsetli altı çizili metin, özel bir alt çizgi rengi ve kenarlık olmadan stilize edilmiştir.
iOS ve Android cihazlarda, özellik, standart ve yorum makale konteynerleri için aşağıdaki stiller uygulanır:
- Standfirst bölümündeki bağlantılar, üzerine gelindiğinde alt çizgi rengini yeni sütun rengine değiştirir.
- Meta bölümünün kenar boşluğu yoktur.
- Yazar adları ve yazar bilgisi öğeleri, metin için yeni sütun rengini kullanır.
- Meta çeşitli bölüm
