Bu CSS kodu, "Guardian Headline Full" adlı özel bir yazı tipini birden fazla stil ve ağırlıkla tanımlar. Yazı tipi dosyalarını farklı formatlarda (WOFF2, WOFF ve TTF) ve çevrimiçi konumlarını belirtir. Yazı tipi, her biri hem normal hem de italik stilde olmak üzere light, regular, medium ve semibold ağırlıklarını içerir.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf) format("truetype");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf) format("truetype");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
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://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@media (min-width: 71.25em) {
.content__main-column--interactive {
margin-left: 160px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive {
margin-left: 240px;
}
}
.content__main-column--interactive .element-atom {
max-width: 620px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-atom {
max-width: 100%;
}
}
.content__main-column--interactive .element-showcase {
margin-left: 0;
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-showcase {
max-width: 620px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-showcase {
max-width: 860px;
}
}
.content__main-column--interactive .element-immersive {
max-width: 1100px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-immersive {
width: calc(100vw - var(--scrollbar-width));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width)) !important;
}
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}
@media (max-width: 71.24em) {
.content__main-column--interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(0);
width: auto;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive .element-immersive {
max-width: 1260px;
}
}
.content__main-column--interactive p,
.content__main-column--interactive ul {
max-width: 620px;
}
.content__main-column--interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: "";
}
@media (min-width: 71.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
Etkileşimli içerik sütununun sol kenarlığı ve öğeler için belirli boşlukları vardır. Belirli öğeleri takip eden paragraflar ek üst dolgu alır ve bu paragrafların ilk harfi büyük, renkli bir düşen baş harf olarak stilize edilir. Satır içi öğeler ve şekiller maksimum bir genişlikle sınırlandırılır. Tutarlı bir tematik yapı için çeşitli renk değişkenleri tanımlanmıştır.
Belirli konteynırlar içindeki alıntıların maksimum genişliği 620 piksel olmalıdır.
Ana içerik ve makale konteynırlarındaki vitrin öğelerinin açıklamaları statik olarak konumlandırılmalı, 620 piksele kadar tam genişlikte olmalıdır.
Sürükleyici öğeler, kaydırma çubuğu hariç, tam görünüm alanı genişliğini kaplamalıdır. Daha büyük ekranlarda maksimum genişlikleri 978 pikseldir ve açıklama dolguları farklı kırılma noktalarında ayarlanır. Orta boy ekranlarda maksimum genişlik 738 pikseldir. Daha küçük ekranlarda, sürükleyici öğeler ayarlanmış kenar boşlukları ve açıklama dolguları ile sol kenara hizalanmalıdır.
Büyük ekranlarda mobilya sarmalayıcıları için, tanımlanmış sütun ve satırlarla bir ızgara düzeni kullanılır. Başlıkların üst kenarlığı vardır, meta bölümleri göreceli olarak konumlandırılır ve standfirst metni bağlantılar ve paragraflar için belirli stillere sahiptir. Sarmalayıcı içindeki şekillerin sol kenar boşluğu yoktur ve satır içi olduklarında maksimum 630 piksel genişliğindedir. Çok büyük ekranlarda, ızgara şablon sütunları ayarlanır.
CSS, başlık, manşet, standfirst, meta bilgileri ve portre (ana medya) için belirli alanlara sahip bir makale başlığı için bir ızgara düzeni tanımlar. Bu öğeler için yazı tipleri, kenarlıklar ve boşluklar dahil stiller belirler. Düzen farklı ekran genişliklerinde ayarlanır: daha geniş ekranlarda (81.25em üzeri) daha ayrıntılı bir ızgara kullanır ve öğe genişliklerini ayarlar; orta ekranlarda (71.25em üzeri) manşet yazı tipi boyutu artar; ve daha küçük ekranlarda (46.24em altında) ana medya tam görünüm alanı genişliğine ayarlanır. Kenarlıklar ve çizgiler özel bir renk değişkeni kullanır ve bazı öğeler belirli kırılma noktalarında gizlenir veya yeniden konumlandırılır.
CSS kodu, "furniture-wrapper" adlı bir bileşene odaklanarak bir web sayfası düzeni için stiller tanımlar. Bu bileşen koyu bir arka plana sahiptir ve ekran boyutuna göre kenar boşluklarını ve dolguyu ayarlar. Daha büyük ekranlar için dekoratif yan çubuklar ekler.
Bu sarmalayıcı içinde, makale başlıkları, manşetler ve meta bilgileri (sosyal paylaşım düğmeleri gibi) gibi öğeler stilize edilir. Manşetler açık gri renk ve kalın yazı tipi kullanır. Sosyal düğmeler, bir tema rengiyle eşleşen renkli kenarlıklara sahiptir ve üzerine gelindiğinde düz bir renge dönüşür.
Kod ayrıca medya öğeleri için açıklamaların ve bir açıklama değiştirme düğmesinin görünürlüğünü yönetir. Genel olarak, stiller düzenin duyarlı ve farklı cihazlarda görsel olarak tutarlı olmasını sağlar.
Bu CSS kodu, muhtemelen bir kenar çubuğu veya içerik sarmalayıcısı olan bir web sayfası bileşeni için stiller tanımlar. Metin renklerini, bağlantı davranışlarını ve farklı ekran boyutları için düzen ayarlamalarını belirler. Bağlantılar belirli renkler ve alt çizgilerle stilize edilir ve düzen, görünüm alanı genişliğine göre ayarlanan arka plan öğelerini içerir. Ortam sorguları, tasarımın tabletlerden büyük masaüstü ekranlara kadar çeşitli cihazlara uyum sağlamasını garanti eder.
CSS kodu, makale öğeleri için stiller tanımlar ve özel yazı tiplerini yükler. Yorumlar için açık bir kenarlık rengi belirler ve başlık stillerini ayarlar: makalelerdeki h2 başlıkları varsayılan olarak açık bir yazı tipi ağırlığına sahiptir, ancak strong etiketi içeriyorsa kalın olur. Ek olarak, Guardian Headline Full yazı tipi ailesini belirli web adreslerinden çeşitli ağırlık ve stillerde (light, regular, medium, semibold, her biri normal ve italik versiyonlarda) içe aktarır.
Metin, bir web sitesi için büyük olasılıkla yazı tipi yüzlerini ve stil kurallarını tanımlayan bir CSS kodu parçası gibi görünüyor. İşte akıcı, doğal Türkçe ile yeniden yazılmış bir versiyon:
Bu CSS kodu, bir web sitesinde kullanılmak üzere çeşitli özel yazı tipi aileleri tanımlar. "Guardian Headline Full" yazı tipi için semibold italic, bold, bold italic, black ve black italic gibi çeşitli ağırlık ve stillerde farklı yazı tipi dosyalarını (WOFF2, WOFF ve TrueType formatlarında) belirtir. Her tanım, yazı tipinin ağırlığını ve stilini içerir.
Ayrıca bold ağırlıkta bir "Guardian Titlepiece" yazı tipi tanımlar.
Ek olarak, kod, özellikle iOS ve Android cihazlarda karanlık mod için renk şemaları için CSS özel özelliklerini (CSS değişkenleri) ayarlar. Koyu arka planlar ve özellik öğeleri için, normal ve koyu modlar için belirli renklerle renkler tanımlar.
Ayrıca, iOS ve Android cihazlarda, belirli HTML yapıları mevcut olduğunda uygulanan, makale konteynırlarındaki ilk paragrafın ilk harfi için ortam sorguları ve özel stil kuralları vardır.
Android cihazlar için, standart veya yorum makalelerindeki ilk paragrafın ilk harfi ikincil sütun rengiyle stilize edilir. Hem iOS hem de Android'de, makale başlıkları gizlenir ve mobilya sarmalayıcısı belirli bir dolguya sahiptir. Bu sarmalayıcı içindeki etiketler, yeni bir sütun rengiyle kalın, büyük harfli bir yazı tipi kullanır. Manşetler 32px, kalın, alt dolgulu ve koyu renkli olarak ayarlanır. Resim şekilleri göreceli olarak konumlandırılır, tam genişlik kenar boşlukları ve otomatik yükseklik ile.
Android cihazlar için, makale konteynırları içindeki resimler şeffaf bir arka plana sahip olmalı, tam görünüm alanı genişliğini (kaydırma çubukları hesaba katılarak) kaplamalı ve yüksekliklerini otomatik olarak ayarlamalıdır.
Hem iOS hem de Android'de, makalelerdeki giriş metni belirli boşluklara sahip olmalıdır: üstte 4 piksel dolgu, altta 24 piksel dolgu ve sağda 10 piksel negatif kenar boşluğu.
Bu giriş metni içindeki paragraflar Guardian'ın manşet yazı tipi ailesini kullanmalıdır.
Bu metin içindeki bağlantılar, belirli bir renkle, metnin 6 piksel altında konumlandırılmış bir alt çizgiyle ve açık gri bir alt çizgi rengiyle stilize edilmelidir. Arka plan resmi veya alt kenarlıkları olmamalıdır. Üzerine gelindiğinde, alt çizgi bağlantının metin rengiyle eşleşecek şekilde değişmelidir.
Ek olarak, iOS ve Android'deki makalelerdeki meta veri bölümü de bu stil kurallarını almalıdır.
Bu CSS kodu, Android
