Bu CSS kodu, "Guardian Headline Full" adında özel bir yazı tipi ailesini birden fazla stil ve ağırlıkla tanımlar. İnce, normal, orta ve yarı kalın versiyonları içerir ve her biri hem normal hem de italik stillerde mevcuttur. Yazı tipi dosyaları çevrimiçi barındırılır ve üç formatta sağlanır: WOFF2, WOFF ve TrueType (TTF).
@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://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;
}
@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, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !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) {
}
Etkileşimli içerik sütunları için, belirli konumlandırma ve z-index ile sol kenarlık eklenir. Daha büyük ekranlarda, kenarlığın sol konumu hafifçe ayarlanır. Bu sütunlar içindeki atomik öğelerin üst veya alt kenar boşluğu yoktur ancak dolgu içerir. Paragraflar atomik öğelerden önce geldiğinde, dolgu kaldırılır ve bunun yerine kenar boşlukları eklenir. Satır içi öğeler maksimum 620 piksel genişliğe sahiptir.
Döngü rolüne sahip şekiller için, başlıklar daha yüksek bir z-index'e ayarlanır ve döngü düğmeleri belirli boyutlar ve hizalama ile stilize edilir. Kendi barındırılan video öğeleri tam genişliğe ayarlanır, 620 piksel ile sınırlandırılır ve üst ve alt kenar boşlukları içerir. Sürükleyici video düzenleri için, genişlik kısıtlamaları kaldırılır ve kenar boşlukları ayarlanır. Daha geniş ekranlarda, sürükleyici videolar genişlikte genişler ve sola doğru kayar.
Renk değişkenleri, tarih çizgileri, kenarlıklar, başlıklar ve özellik öğeleri için stilleri tanımlar. Karanlık modda, metin ve simge renkleri karanlık temaya uyum sağlar. İçerik sütunları içindeki atomik öğelerin dolgusu yoktur. Belirli kurallar, makaleler, yorumlar ve özellikler gibi farklı içerik bölümlerinde belirli öğelerden veya yatay kurallardan sonraki ilk paragrafın uygun şekilde stilize edilmesini sağlar.
Bir giriş kapısından veya yatay bir kuraldan (sonuncusu hariç) sonraki ilk paragrafın üst dolgusu 14 pikseldir.
Çeşitli içerik gövdeleri içindeki ilk öğe, giriş kapısı veya yatay kuraldan (sonuncusu hariç) sonraki ilk paragrafın ilk harfi için belirli bir süslü baş harf stili uygulanır. Bu, Guardian başlık yazı tipini kullanır, kalındır, 111 piksel boyutunda ve 92 piksel satır yüksekliğine sahiptir. Sola yaslanır, büyük harf kullanır, kenarlık kutusu boyutlandırmasına sahiptir, 8 piksel sağ kenar boşluğu vardır, üste hizalanır ve özel bir renk değişkeni kullanır.
Bu içerik gövdeleri içindeki yatay bir kuralı takip eden paragrafların üst dolgusu yoktur.
Bu içerik gövdeleri içindeki alıntılar maksimum 620 piksel genişliğe sahiptir.
Ana içerik ve makale konteynerlerindeki vitrin öğeleri için başlıklar statik olarak konumlandırılır, 620 piksele kadar tam genişlik alır.
Sürükleyici öğeler, kaydırma çubuğu dikkate alınarak tam görünüm alanı genişliğini kaplar. Daha büyük ekranlarda (71.24em'e kadar), 978 piksel ile sınırlandırılır ve başlık dolgusu farklı kesme noktalarında ayarlanır. Orta ekranlarda (46.25em ile 61.24em arası), maksimum genişlik 738 pikseldir. Daha küçük ekranlarda (46.24em altında), ayarlanmış kenar boşlukları ve başlık dolgusu ile sol kenara hizalanır.
Büyük ekranlardaki (61.25em ve üzeri) mobilya sarmalayıcıları için, başlık bileşenlerini konumlandırmak için tanımlanmış sütunlar ve satırlar ile bir ızgara düzeni kullanılır.
CSS stilleri, bir web sayfasının başlık bölümü olarak adlandırılan "mobilya-sarmalayıcı"nın düzenini ve görünümünü tanımlar. Kenarlıklar, boşluk, tipografi ve farklı ekran boyutlarına uyum sağlayan ızgara yapıları ayarlar.
Daha büyük ekranlar için (71.25em üzeri), başlık, başlık, meta bilgiler, standfirst (alt başlık) ve portre gibi öğeler için belirli sütunlar ve satırlarla karmaşık bir ızgara düzeni oluşturulur. Kenarlıklar ve çizgiler gibi görsel öğeler belirli kesme noktalarında ayarlanır veya kaldırılır. Başlık yazı tipi boyutu artar ve maksimum genişliği daha büyük ekranlarda değişir. Standfirst içindeki bağlantılar, üzerine gelindiğinde rengi değişen alt çizgilerle stilize edilir.
740 pikselden geniş ekranlar için, `.keyline-4` sınıfına veya `[data-gu-name="lines"]` özniteliğine sahip öğeleri gizleyin. `.furniture-wrapper` içinde, bu öğelerin içindeki SVG çizgilerini `--headerBorder` renk değişkenini kullanacak şekilde stilize edin.
740 pikselden geniş ekranlarda, `.furniture-wrapper` içindeki `#meta` kimliğine veya `[data-gu-name="meta"]` özniteliğine sahip öğelerden sağ kenar boşluğunu kaldırın. Bu meta öğeleri için, sosyal bağlantıların, yorum bölümlerinin ve alt açıklamalarının kenarlık rengini `--headerBorder` olarak ayarlayın. Ayrıca, `.content__meta-container_dcr` içindeki `gu-island` bileşenlerini gizleyin.
Standfirst bölümü için (sınıf, kimlik veya `data-gu-name` ile seçilmiş), negatif sol kenar boşluğu ve eşleşen dolgu uygulayın ve konumunu göreceli olarak ayarlayın. Daha geniş ekranlarda (740px üzeri), küçük bir üst dolgu ekleyin. Standfirst içindeki paragrafları 400 yazı tipi ağırlığı, 20 piksel boyut ve 14 piksel alt dolgu ile stilize edin.
Ana medya alanı (kimlik veya `data-gu-name` ile seçilmiş) göreceli olarak konumlandırılır, üst kenar boşluğu yoktur, küçük bir alt kenar boşluğu vardır ve "portre" ızgara alanına yerleştirilir. İç div'lerin tam genişlik almasını ve yatay kenar boşluğu olmamasını sağlayın. Çok geniş ekranlarda (980px üzeri), alt kenar boşluğunu kaldırın. Daha küçük ekranlarda (740px altında), genişliğini kaydırma çubuğu düşülmüş tam görünüm alanı genişliğine ayarlayın ve negatif sol kenar boşluğu uygulayın. 480px ile 740px arası ekranlar için, bu negatif sol kenar boşluğunu -20px'e artırın.
Şekil başlıklarını, belirli dolgu ve CSS değişkenlerinden gelen arka plan/metin renkleri ile altta mutlak olarak konumlandıracak şekilde stilize edin. Genişliğini %100, maksimum genişlik olmadan ayarlayın, alt kenar boşluğunu kaldırın ve minimum yükseklik belirleyin. Başlık içindeki açıklamaları `--headerBorder` kullanarak renklendirin ve SVG'lerini aynı renkle doldurun. İlk açıklamayı gizleyin ve ikinci açıklamayı genişliği %90 ile sınırlı bir blok öğe olarak görüntüleyin. 480px'den geniş ekranlarda, başlığın yatay dolgusunu artırın. Başlıktaki `.hidden` sınıfı opaklığını 0 olarak ayarlar.
Başlık düğmesi, yüksek z-index ile sağ alt yakın civarında mutlak konumlandırılmış bir blok olarak görüntülenir. Dairesel bir arka plana, kenarlık olmamasına ve belirli bir dolguya sahiptir. SVG simgesini hafifçe küçültün. 480px'den geniş ekranlarda, sağ konumunu ayarlayın. Çok geniş ekranlar için (1140px üzeri), `.content__main-column--interactive` sözde öğesinin üstünü ve yüksekliğini ayarlayın. Ayrıca, bu sütun içindeki h2 başlıklarının maksimum genişliğini 620 piksel ile sınırlayın.
Gövdenin `.ios` veya `.android` sını
