Guardian Headline Full yazı tipi ailesi, her biri farklı ağırlık ve italik stillerine sahip çeşitli stiller içerir. İnce versiyon (ağırlık 300) hem düz hem de italik stillerde mevcuttur, aynı şekilde normal versiyon (ağırlık 400) da öyledir. Orta (ağırlık 500) ve yarı kalın (ağırlık 600) stillerinin de düz ve italik seçenekleri vardır. Her yazı tipi dosyası, Guardian'ın sunucularından WOFF2, WOFF ve TrueType formatlarında temin edilebilir.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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, 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) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
}
}Ana interaktif içerik sütunu, elementler için özel stillendirmeye sahiptir. Örneğin, atomların üst ve alt kenar boşluğu yoktur ancak 12px dolgu (padding) vardır. Bir paragraf bir atomu takip ettiğinde, atomun dolgusu kaldırılır ve kenar boşlukları 12px olarak ayarlanır. Satır içi elementler 620px genişliğinde sınırlandırılmıştır.
Döngü (loop) rolüne sahip şekiller (figures) için, altyazı (caption) z-index değeri 6 olacak şekilde konumlandırılır. Bir döngü butonu, sağ alta hizalanmış, belirli kenar boşluklarına sahip ve 32px genişliğinde olacak şekilde stilize edilir. Altyazı butonunun z-index değeri 100'dür.
Kendi barındırılan video elementleri %100 genişliğe, 620px ile sınırlı maksimum genişliğe sahip olacak şekilde ayarlanır, blok olarak görüntülenir ve 12px kenar boşluklarına sahiptir. Video ve onun konteyneri ayrıca 620px'ye kadar tam genişlik alır ve ortalanır. Eğer video sürükleyici (immersive) ise, genişlik sınırı ve kenar boşlukları kaldırılır, tamamen genişler. Daha büyük ekranlarda, sürükleyici videolar negatif sol kenar boşluğu ile 1140px genişliğe genişler ve daha da büyük boyutlarda, daha büyük bir negatif kenar boşluğu ile 1300px genişliğe ulaşır.
Renk değişkenleri, tarih çizgisi grisi, başlık kenarlığı, altyazı metni ve özellik kırmızısı gibi çeşitli tema renklerini tanımlar. Karanlık modda, bazı renkler karanlık tema paletine göre ayarlanır.
Makale gövdesi içinde, bir atom veya yatay çizgiden sonraki ilk paragrafın ekstra üst dolgusu vardır. Ayrıca, bir atomdan sonraki ilk paragrafın ilk harfi stilize edilir, ancak buradaki özel stil tam olarak detaylandırılmamıştır.Bu CSS kodu, bir web sitesinin farklı bölümlerindeki süslü baş harfler (drop caps), alıntı kutuları (pullquotes) ve çeşitli düzen elementleri için stiller tanımlar. Süslü baş harfler belirli bir yazı tipi, boyut ve renkle stilize edilir ve sola yaslanır. Alıntı kutularına maksimum bir genişlik verilir. Vitrin (showcase) elementleri için, altyazılar statik konuma, tam genişliğe ve 620px maksimum genişliğe sahip olacak şekilde ayarlanır.
Sürükleyici (immersive) elementler, kaydırma çubuğu hariç tam görüntü alanı genişliğini alacak şekilde ayarlanır. 71.24em'den küçük ekranlarda, maksimum genişlikleri 978px olacak şekilde ayarlanır ve altyazı dolgusu ekran boyutuna göre değişir. Orta boy ekranlarda (46.25em ile 61.24em arası), maksimum genişlik 738px'dir. Küçük ekranlarda (46.24em altı), sürükleyici elementlere, görüntü alanı kenarına kadar genişlemeleri için negatif sol kenar boşlukları verilir ve altyazı dolgusu buna göre ayarlanır.
Daha büçük ekranlar için (61.25em üstü), mobilya sarmalayıcısı (furniture wrapper) için bir ızgara düzeni kullanılır, başlık, manşet, standfirst, meta ve portre bölümleri için tanımlanmış satırlarla iki sütunlu bir yapı oluşturulur. Manşet elementlerinin ilk çocuğuna üst kenarlık eklenir ve meta bölümünün konumu mutlak (absolute) olarak ayarlanır.Mobilya sarmalayıcısı, standfirst içeriğinin 2 piksel üst dolgulu ve sağ kenar boşluğu olmayan göreli bir konuma sahip olmasını sağlar. Standfirst içinde, ana içerik alanının 4 piksel alt kenar boşluğu vardır. Standfirst içindeki liste öğeleri 20 piksel yazı tipi boyutu kullanır. Standfirst içindeki bağlantılar, liste öğelerindekiler dahil, kenarlık veya arka plan resmi olmadan, 6 piksel ofsetli ve özel bir renk kullanılarak altı çizili olarak stilize edilir. Üzerine gelindiğinde, alt çizgi rengi yeni bir sütun rengine değişir.
Standfirst içindeki ilk paragrafın üst kenarlığı vardır ve alt dolgusu yoktur. Daha büyük ekranlar için (61.25em ve üstü), eğer ekran aynı zamanda en az 71.25em genişliğindeyse, üst kenarlık kaldırılır. En az 61.25em genişliğindeki ekranlar için, şekillerin sol kenar boşluğu yoktur ve satır içi olduklarında maksimum 630 piksel genişliğe sahiptirler.
71.25em ve daha geniş ekranlarda, mobilya sarmalayıcısı belirli sütun ve satırlarla bir ızgara düzeni kullanır. Meta bölümünden önce 540 piksel genişliğinde dekoratif bir çizgi görünür. Standfirst içindeki paragrafların üst kenarlığı yoktur ve standfirst içeriğinden önce dikey bir çizgi eklenir. Daha da büyük ekranlar için (81.25em ve üstü), ızgara daha fazla sütun ve satırla ayarlanır, meta öncesi dekoratif çizgi 620 piksele genişler ve standfirst öncesi dikey çizgi hafifçe kayar.
Makale başlığı veya başlık bölümündeki etiketlerin 2 piksel üst dolgusu vardır. Manşet, kalın yazı tipi ağırlığı, 620 piksel maksimum genişlik ve 32 piksel yazı tipi boyutu kullanır. Daha büyük ekranlarda (71.25em ve üstü), manşet maksimum 540 piksel genişliğe ve 50 piksel yazı tipi boyutuna ayarlanır.
Orta boy ekranlar için (46.25em ve üstü), ana hatlar veya çizgi elementlerinin sağ kenar boşluğu yoktur. Daha büyük ekranlarda (61.25em ve üstü), bu çizgiler gizlenir. Çizgiler, kontur için özel bir renk kullanır.Bu CSS kodu, özellikle mobilya temalı bir sarmalayıcı için bir web sayfası düzeni stillerini tanımlar. Meta bilgileri, standfirst metni, ana medya ve altyazılar gibi elementler için çeşitli özellikler belirler. Stillere, kenar boşlukları, dolgu, renkler ve konumlandırma ayarlamaları dahildir ve medya sorguları kullanılarak farklı ekran boyutları için özel kurallar içerir. Tasarım, renkler için `--darkBackground` ve `--headerBorderColor` gibi özel CSS değişkenleri kullanır ve elementlerin görüntü alanı genişliğine bağlı olarak gizlenmesini veya görüntülenmesini sağlar. Sarmalayıcı koyu bir arka plana sahiptir ve mobilden masaüstüne kadar cihazlar için duyarlı davranış içerir.Bu CSS kodu, furniture-wrapper sınıfı içindeki elementleri stillendirir. Manşetler (h1) kalın ve açık gri renktedir (#dcdcdc). Manşetlerdeki şekillerin üst kenar boşluğu yoktur ve küçük bir alt kenar boşluğu vardır.
71.25em'den geniş ekranlar için, meta bölümünden önce renkli bir çizgi görünür. Meta bölümündeki metin ve özetler açık gri renktedir. Sosyal medya bağlantıları ve butonları renkli bir kenarlığa sahiptir ve metin ve simgeler için belirli bir renk kullanır, bu renk üzerine gelindiğinde koyu bir arka plana dönü
