Bu CSS kodu, "Guardian Headline Full" adlı özel bir yazı tipi ailesini birden fazla yazı tipi ağırlığı ve stiliyle tanımlar. Açık, normal, orta ve yarı kalın ağırlıklarını içerir ve her biri normal ve italik varyasyonlara sahiptir. Yazı tipi dosyaları, Guardian'ın sunucularında barındırılan WOFF2, WOFF ve TrueType formatlarında sağlanır.
@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ın üst kısmında ekstra dolgu bulunur 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, daha büyük ekranlarda maksimum 620 piksel genişliğiyle sınırlandırılır. Tutarlı temalar için çeşitli renk değişkenleri tanımlanmıştır.
Belirli konteynerler içindeki alıntılar maksimum 620 piksel genişliğe sahip olmalıdır.
Ana içerik ve makale konteynerlerindeki vitrin öğeleri için 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, 978 piksel ile sınırlandırılır ve orta boy ekranlar için açıklama dolgusu ayarlanır. Orta ölçekli ekranlarda maksimum genişlik 738 pikseldir. Daha küçük ekranlarda, sürükleyici öğeler kenar boşlukları ve açıklama dolgusu ayarlanarak sol kenara hizalanır.
Daha büyük ekranlardaki 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 içeriği bağlantılar ve paragraflar için belirli stiller içerir. Sarmalayıcı içindeki şekillerin sol kenar boşluğu yoktur ve satır içi olduğunda maksimum 630 piksel genişliğe sahiptir. Çok büyük ekranlarda, ızgara şablon sütunları ayarlanır.
CSS, başlık, ana başlık, standfirst, meta bilgiler ve bir portre resmi için belirli alanlara sahip bir makale başlığı için ızgara düzeni tanımlar. Kenarlıklar, tipografi ve boşluklar için stiller belirler ve bu özellikleri medya sorguları kullanarak farklı ekran boyutlarına göre ayarlar. Örneğin, ana başlık yazı tipi boyutu daha büyük ekranlarda artar ve belirli öğeler görünüm alanı değiştikçe gizlenir veya yeniden konumlandırılır. Ana medya alanı, mobil cihazlarda tam genişlik olacak şekilde yapılandırılır.
CSS kodu, bir mobilya sarmalayıcı öğesine odaklanarak bir web sayfası düzeni için stiller tanımlar. Arka plan renkleri, kenar boşlukları, dolgular ve farklı ekran boyutları için duyarlı davranışlar ayarlar. Stiller, karanlık mod özellikleri ve başlık kenarlıkları gibi renkler için özel özellikler içerir. Belirli kurallar, açıklamalar, düğmeler, başlıklar ve meta bilgilerin görünümünü kontrol eder, fare üzerine gelme efektleri ve sosyal medya simgeleri için ayarlamalar yapar. Medya sorguları, düzenin mobilden masaüstü görünümlerine, yan arka planların eklendiği daha geniş ekranlar dahil olmak üzere uyum sağlaması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. Bağlantılar, metin ve sosyal medya simgeleri gibi çeşitli öğeler için renkler, kenarlıklar ve düzen ayarlamaları belirler. Stiller, medya sorguları kullanarak farklı ekran boyutlarına uyum sağlar, daha büyük ekranlara uyacak şekilde genişlikleri ve kenarlıkları değiştirir. Renkler, karanlık mod gibi temalar için CSS değişkenleri kullanılarak yönetilir.
CSS kodu, makale öğeleri için stiller tanımlar ve özel yazı tiplerini yükler. Yorumlar için kenarlık rengini, başlık kenarlık rengiyle eşleşecek şekilde ayarlar. Makale başlıkları için açık bir yazı tipi ağırlığı kullanır, ancak güçlü metin içeren başlıkları kalın yapar. Kod ayrıca Guardian Headline yazı tipi ailesini çeşitli ağırlık ve stillerde, hem normal hem de italik versiyonlarla içe aktarır.
"Guardian Headline Full" yazı tipi, çeşitli stillerle tanımlanır: yarı kalın italik (ağırlık 600), kalın (ağırlık 700), kalın italik (ağırlık 700), siyah (ağırlık 900) ve siyah italik (ağırlık 900). Her stil, WOFF2, WOFF ve TrueType formatlarında yazı tipi dosyalarını içerir.
Ayrıca, "Guardian Titlepiece" yazı tipi de kalın stiliyle (ağırlık 700) tanımlanır ve aynı zamanda WOFF2, WOFF ve TrueType dosyalarına sahiptir.
iOS ve Android cihazlar için, koyu bir arka plan rengi (#1a1a1a) ve belirli özellik renkleri ayarlanır. Karanlık modda, özellik rengi buna göre ayarlanır.
iOS ve Android'de, makale konteynerlerindeki `.element-atom` veya giriş kapıları gibi belirli öğeleri takip eden ilk paragrafın ilk harfine özel stil uygulanır.
Android cihazlar için, standart ve 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. Mobilya sarmalayıcısı içindeki etiketler, kalın, büyük harfli bir yazı tipi ve yeni bir sütun rengi kullanır. Başlıklar 32 piksel, kalın, alt dolgulu ve koyu renkli olarak ayarlanır. Resim şekilleri göreceli olarak konumlandırılır, tam genişlikte kenar boşlukları ve otomatik yüksekliğe sahiptir.
Android cihazlar için, makale konteynerleri 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 başlık 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.
Ayrıca, makale meta veri bölümü her iki işletim sistemi için de tutarlı bir şekilde stilize edilmelidir.
Bu CSS kodu, Android ve iOS cihazlardaki makale konteynerleri için stiller ayarlar. Çeşitli makale türleri ve bileşenleri için kenar boşluklarını, renkleri, dolguları ve düğme görüntülerini ayarlar.
iOS ve Android cihazlarda, özellik, standart ve yorum makale konteynerleri için, küçük resim veya sürükleyici olmayan resimler sıfır kenar boşluğuna, görünüm alanı eksi 24 piksel ve kaydırma çubuğu genişliğinden hesaplanan bir genişliğe ve otomatik yüksekliğe sahiptir. Açıklamalarında dolgu yoktur.
Bu konteynerlerdeki sürükleyici resimler, görünüm alanı eksi kaydırma çubuğu
