Bu CSS kodu, "Guardian Headline Full" adlı özel bir yazı tipi ailesini birden fazla yazı tipi ağırlığı ve stiliyle tanımlar. Hem normal hem de italik versiyonları olan light, regular, medium ve semibold ağırlıklarını içerir. Yazı tipleri, Guardian'ın sunucularından üç farklı dosya formatında yüklenir: WOFF2, WOFF ve TrueType.
@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 ekstra ü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ı temalandırma için çeşitli renk değişkenleri tanımlanmıştır.
Belirli konteynırlar içindeki alıntılar maksimum 620 piksel genişliğe sahip olmalıdır.
Ana makalelerdeki, özel yazılardaki, standart makalelerdeki ve yorumlardaki vitrin öğeleri için altyazılar statik olarak konumlandırılmalı, tam genişliği kaplamalı ve ayrıca maksimum 620 piksel genişliğe sahip 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 (71.24em üzeri), maksimum genişlikleri 978px'dir ve altyazı dolguları farklı kırılma noktalarında ayarlanır. Orta boy ekranlarda (46.25em ile 61.24em arasında), maksimum genişlik 738px'dir. Daha küçük ekranlarda (46.24em altında), bu öğelerin sol kenar boşluğu olmamalı ve sol kenara hizalanmalı, çok küçük ekranlar için ayarlanmış kenar boşlukları ve altyazı dolguları olmalıdır.
Büyük ekranlardaki (61.25em üzeri) mobilya sarmalayıcısı için, tanımlanmış sütun ve satırlarla bir ızgara düzeni kullanılır. Başlıklar üst kenarlık alır, meta bilgiler göreceli olarak konumlandırılır ve standfirst metni bağlantılar ve boşluk için belirli bir stile sahiptir. Bu sarmalayıcı içindeki şekiller, ayarlanmış kenar boşluklarına ve satır içi öğeler için maksimum 630px genişliğe sahiptir. Çok büyük ekranlarda (71.25em üzeri), ızgara şablonu daha fazla sütun içerecek şekilde ayarlanır.
CSS, başlık, ana başlık, standfirst, meta bilgiler ve bir portre için alanları olan bir sayfa başlığı için bir ızgara düzeni tanımlar. Farklı ekran boyutlarında bu öğeler için belirli boyutlar ve konumlar belirler. Stilleme, sosyal medya simgeleri, altyazılar ve mobil ve masaüstü görünümlerdeki duyarlı davranış için ayarlamalarla birlikte kenarlıklar, yazı tipleri ve renkler içerir.
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ı, ana başlıklar ve meta bilgiler (sosyal paylaşım düğmeleri gibi) gibi öğeler stilize edilir. Ana başlıklar 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 altyazıların ve bir altyazı açma/kapama 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ı görünümlerini 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. Kod ayrıca bileşen içindeki çeşitli öğeler için kenarlıkları ve boşlukları yönetir.
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 varsayılan olarak hafif bir yazı tipi ağırlığı kullanır, ancak başlık güçlü bir etiket içerdiğinde kalına geçer.
Ayrıca, Guardian Headline Full yazı tipi ailesini çeşitli ağırlıklar ve stillerde (light, regular, medium, semibold, her biri normal ve italik versiyonlarla) Guardian'ın sunucularından içe aktarır, tarayıcı uyumluluğu için birden fazla dosya formatı belirtir.
"Guardian Headline Full" yazı tipi, birkaç stil ile tanımlanmıştır: semibold italic (ağırlık 600), bold (ağırlık 700), bold italic (ağırlık 700), black (ağırlık 900) ve black italic (ağırlık 900). Her stil, Guardian'ın sunucularında barındırılan WOFF2, WOFF ve TrueType formatlarında yazı tipi dosyalarını içerir.
Ayrıca, "Guardian Titlepiece" yazı tipi, kalın stilinde (ağırlık 700) ve ayrıca WOFF2, WOFF ve TrueType dosyalarıyla tanımlanmıştır.
iOS ve Android cihazlar için, koyu bir arka plan rengi ve belirli özellik renkleri ayarlanmıştır. Koyu modda, özellik rengi buna göre ayarlanır.
iOS ve Android'de, belirli CSS kuralları, `.element-atom` gibi belirli öğeleri veya giriş kapılarını takip eden belirli makale konteynırlarındaki ilk paragrafın ilk harfini stilize etmek için 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, yeni bir sütun rengiyle kalın, büyük harfli bir yazı tipi kullanır. Ana başlıklar 32px, kalın, alt dolgulu ve koyu renkli olarak ayarlanır. Görsel şekiller göreceli olarak konumlandırılır, tam genişlikte kenar boşlukları ve otomatik yüksekliğe sahiptir.
Android cihazlar için, makale konteynırları içindeki görseller ş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 bir boşluğa sahip olmalıdır: üstte 4 piksel dolgu ve altta 24 piksel dolgu, sağda 10 piksel negatif kenar boşluğu ile.
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 alt çizgi rengiyle, arka plan görseli veya kenarlık olmadan stilize edilmelidir. Üzerine gelindiğinde, alt çizgi bağlantının metin rengiyle eşleşecek şekilde değişmelidir.
Ayrıca, hem iOS hem de Android'deki makalelerdeki meta veri bölümü belirli bir stil almalıdır.
Bu CSS kodu, iOS ve Android cihazlardaki makale konteynırları için stiller belirler. Çeşitli makale türleri ve bileşenleri için kenar boşluklarını, renkleri, dolguyu ve düğme görüntülerini ayarlar.
