Bu CSS kodu, "Guardian Headline Full" adlı özel bir yazı tipi ailesini tanımlar ve bu aile birden fazla yazı tipi ağırlığı ve stili içerir. Açık (light), normal (regular), orta (medium) ve yarı kalın (semibold) ağırlıklarının her biri için normal ve italik çeşitleri bulunur. Yazı tipi dosyaları, Guardian'ın varlık sunucusunda barındırılan WOFF2, WOFF ve TrueType formatlarında sağlanmıştı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://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));
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-cBu bir doğal İngilizce metni değil, CSS kodu bloğu gibi görünüyor. Web öğeleri için kenarlıklar, renkler, boşluklar ve tipografi gibi stil kuralları içeriyor ve muhtemelen bir haber veya makale düzeni için tasarlanmış. Kod, duyarlı tasarım için medya sorgularını içeriyor ve farklı bölümler ve bileşenler için çeşitli görsel özellikleri tanımlıyor.Sağlanan metin, doğal İngilizce metni yerine CSS kodu gibi görünüyor. Stil kuralları, seçiciler ve web düzeni ve tasarımı için medya sorguları içeriyor. Kod olduğu için, anlamı koruyarak akıcı İngilizceye yeniden yazılması uygun değil. Yeniden yazılması amaçlanan İngilizce metni paylaşmak istediyseniz, lütfen onu paylaşın.Sağlanan metin, bir web sayfası düzeni için stil vermeye yönelik CSS kodu gibi görünüyor. Duyarlı tasarım için ızgara yapılarını, medya sorgularını ve renkler, kenarlıklar ve boşluklar gibi görsel özellikleri tanımlıyor. Kod, manşetler, meta bilgiler, standfirst metinleri ve medya kapları gibi öğeler için kurallar içeriyor ve görünümlerini farklı ekran boyutlarına göre ayarlıyor.Furniture-wrapper içindeki figcaption'daki ikinci span, maksimum genişliği %90 olacak şekilde blok olarak ayarlanmıştır. 30em'den geniş ekranlarda, figcaption dolgusu üstte 4px, yanlarda 20px ve altta 12px olarak ayarlanmıştır. Eğer figcaption "hidden" sınıfına sahipse, opaklığı 0 olarak ayarlanır.
Caption düğmesi, mutlak konumlandırılmış, sağ altta, z-index'i 30 olan bir blok olarak görüntülenir. Dairesel bir arka plana, kenarlık olmadan ve belirli bir dolguya sahiptir. SVG simgesi %85 oranında ölçeklendirilmiştir. 30em'den geniş ekranlarda, düğme sağ kenardan 10px uzaklıkta konumlandırılır.
71.25em'den geniş ekranlarda etkileşimli ana sütun için, before sözde öğesi, içeriğin üstüne ve altına 12px uzayacak şekilde ayarlanmıştır, böylece toplamda 24px daha uzun olur. Bu sütundaki H2 başlıkları maksimum 620px genişliği ile sınırlandırılmıştır.
iOS ve Android cihazlarda, koyu mod renkleri tanımlanmıştır: koyu bir arka plan, açık modda bir özellik rengi ve koyu mod için farklı bir özellik rengi. Yeni sütun rengi, mevcutsa birincil sütun değişkenini, aksi takdirde özellik rengini kullanır. Koyu modda, mevcutsa koyu mod sütun değişkenini, aksi takdirde koyu mod özellik rengini kullanır.
iOS ve Android için, makine kaplarındaki belirli öğelerden sonra gelen ilk paragrafın ilk harfi, ikincil sütun rengi (veya yedek olarak siyah) ile stilize edilmiştir. Makale başlığı yüksekliği 0 olarak ayarlanmıştır ve furniture-wrapper'ın dolgusu ayarlanmıştır. Furniture-wrapper içindeki içerik etiketleri kalın yazı tipi ağırlığı ve "Gu" yazı tipi ailesini kullanır.Guardian manşeti, Guardian Headline, Guardian Egyptian Web, Guardian Headline Full ve Georgia yazı tipi ailelerini kullanır ve serif stilindedir. Metin rengi belirli bir değişkene ayarlanmıştır ve metin büyük harfle yazılmıştır.
iOS ve Android cihazlarda, makine kaplarındaki manşet, 32px yazı tipi boyutu, kalın ağırlık, 12px alt dolgu ve koyu gri renk ile stilize edilmiştir.
Bu kaplar içindeki görüntüler, göreceli olarak konumlandırılmıştır, 14px üst kenar boşluğu ve -10px sol kenar boşluğu vardır. Genişlikleri, görünüm alanı eksi kaydırma çubuğu genişliğine göre ayarlanır ve yükseklik otomatik olarak ayarlanır.
Bu görüntülerin iç öğeleri, bağlantılar ve görüntülerin kendileri dahil, şeffaf bir arka plana, görünüm alanı eksi kaydırma çubuğu genişliği ile eşleşen bir genişliğe ve otomatik yüksekliğe sahiptir.
Standfirst bölümü, 4px üst dolgu, 24px alt dolgu ve -10px sağ kenar boşluğuna sahiptir. İçindeki metin, manşetle aynı yazı tipi ailelerini kullanır ve standfirst içindeki bağlantılar da buna göre stilize edilmiştir.iOS ve Android cihazlar için, özellik, standart ve yorum makalelerinin standfirst bölümündeki bağlantılar, belirli bir renk, alt çizgi ve arka plan resmi olmadan stilize edilmiştir. Alt çizgi rengi, üzerine gelindiğinde değişir. Ayrıca, bu makalelerdeki meta bölümünün kenar boşluğu yoktur ve yazar adı ve yazar bağlantıları gibi öğeler tutarlı bir şekilde stilize edilmiştir.iOS ve Android cihazlar için, makale yazar satırlarındaki yazarın adı, belirli bir renk değişkeni kullanılarak stilize edilmiştir. Makine kaplarındaki çeşitli meta veri bölümünün dolgusu yoktur ve içindeki herhangi bir SVG simgesi, konturları için aynı renk değişkenini kullanır.
Showcase öğelerindeki caption düğmesi, esnek bir kap olarak görüntülenir, 5px dolgu ile ortalanır ve 28px x 28px boyutunda, sağdan 14px uzaklıkta konumlandırılır.
Makale gövdesi içeriğinin yatay dolgusu 12px'dir. Standart görüntü öğeleri (küçük resimler ve sürükleyici türler hariç) mevcut genişliği kaplar, kaydırma çubukları için ayarlanır, otomatik yükseklik ve kenar boşluğu olmadan. Altyazılarının dolgusu yoktur. Sürükleyici görüntü öğeleri benzer stil kurallarını izler.Android cihazlar için, makine kaplarındaki sürükleyici görüntüler, görünüm alanı genişliği eksi kaydırma çubuğu genişliği olarak ayarlanmıştır.
Hem iOS hem de Android'de, makale gövdelerindeki alıntılanmış metin, dekoratif öğesi için yeni sütun rengini kullanır. Makale metnindeki bağlantılar, birincil sütun rengi ile stilize edilmiştir, ofsetli bir alt çizgi ile ve alt çizgi için başlık kenarlık rengi kullanılmıştır. Üzerine gelindiğinde, alt çizgi rengi yeni sütun rengine değişir.
Koyu modda, furniture wrapper arka planı koyu gri olur. İçindeki etiketler yeni sütun rengini kullanır. Manşetler arka planlarını kaybeder ve metin için başlık kenarlık rengini benimser. Standfirst paragrafları ve bağlantıları da başlık kenarlık rengini kullanır.iOS ve Android cihazlar için, aşağıdaki CSS kuralları geçerlidir:
- Özellik, standart ve yorum makalelerindeki yazar satırları yeni sütun rengini kullanır.
- Bu makalelerin meta bölümündeki simgeler, konturlar için yeni sütun rengini kullanır.
- Bu makalelerdeki showcase görüntülerinin altyazıları tarih satırı rengini kullanır.
- Makale gövdesi içindeki blok alıntılar yeni sütun rengini kullanır.
- Çeşitli içerik kapları (makale gövdesi, özellik gövdesi ve yorum gövdesi gibi) özellik, standart ve yorum makalelerinde tutarlı bir şekilde stilize edilmiştir.Android cihazlar için, belirli yorum ve makale kaplarının arka plan rengini k
