Bu CSS kodu, "Guardian Headline Full" yazı tipi ailesini çeşitli ağırlıklar ve stillerle tanımlar. Hem normal hem de italik stillerde hafif (300), normal (400), orta (500) ve yarı kalın (600) versiyonları içerir. Yazı tipi dosyaları, Guardian'ın web varlıklarından WOFF2, WOFF ve TrueType formatlarında sağlanmıştır.
Bu CSS kodu, Guardian web sitesinin başlıkları ve başlık parçası için birkaç yazı tipi ailesi tanımlar. "Guardian Headline Full" ailesi için hafif (300), normal (400), kalın (700) ve siyah (900) ağırlıklar da dahil olmak üzere farklı yazı tipi ağırlıklarını ve stillerini (normal ve italik) belirtir. Her yazı tipi, tarayıcı uyumluluğu için birden fazla formatta (WOFF2, WOFF ve TrueType) sağlanır. Ayrıca, aynı dosya formatlarıyla kalın ağırlıkta (700) "Guardian Titlepiece" yazı tipi ailesini tanımlar.
Bu CSS kodu, "Guardian Headline Full" yazı tipi ailesi için farklı ağırlık ve stillere (normal ve italik) sahip birden fazla yazı tipi yüzü tanımlar. Yazı tipleri, Guardian'ın varlık sunucusunda barındırılan çeşitli dosya formatlarından (WOFF2, WOFF ve TrueType) kaynaklanır. Ağırlıklar normal (400) ile siyah (900) arasında değişerek, yazı tipinin farklı tipografik bağlamlarda kullanılabilmesini sağlarken web platformları arasında tutarlılığı korur.
Bu metin, bir web sitesi (muhtemelen The Guardian) için yazı tipi stillerini ve duyarlı ızgara düzenlerini tanımlayan CSS kodu gibi görünüyor. Farklı ağırlıklar ve stiller için yazı tipi dosyalarını belirtiyor, ardından başlık, medya ve gövde metni gibi içerik alanlarını yeniden düzenlemek için çeşitli ekran genişliklerinde değişen ızgara şablonları oluşturuyor. Kod, en iyi görüntüleme için farklı cihaz boyutlarında dolgu, sütun aralığı ve öğe konumlandırmasını ayarlıyor.
Belirli içerik alanlarındaki etkileşimli ızgara şekilleri için, başlık dolgusu üstte 4 piksel ve diğer yerlerde 0 olarak ayarlanmıştır.
Çeşitli içerik bölümlerinde, etkileşimli ızgaralar içindeki "lines" ve "meta" adlı öğeler, ızgaranın 2. satırdan 5. satıra ve 1. sütundan 2. sütuna kadar olan alanına konumlandırılmıştır. "Lines" öğeleri, içeriğine sığan bir yüksekliğe ve 5 piksel üst kenar boşluğuna sahipken, "meta" öğeleri 18 piksel üst kenar boşluğuna sahiptir.
Daha geniş ekranlarda (min-genişlik: 81.25em), bu bölümlerdeki etkileşimli ızgaralar, belirli genişliklere sahip beş sütunlu bir düzen kullanır.
iOS ve Android cihazlar için, makale başlıkları özelleştirilmiş stillere sahiptir: standfirst metni orta ağırlıkta belirli bir yazı tipi ailesi kullanır, bölüm girişleri ilk harfleri büyük harfle blok olarak görüntülenir, çizgilerin üst dolgusu artırılır, yazar bilgisi kalın serif yazı tipi kullanır, resim şekilleri yüksekliğini otomatik olarak ayarlar ve atomik öğeleri takip eden paragrafların üst kenar boşluğu yoktur.
Ayrıca, hafif ve hafif italik ağırlıklardaki Guardian Headline Full için yazı tipi yüzleri, ilgili kaynak dosyaları ve formatlarla tanımlanmıştır.
Bu metin, çeşitli stiller ve ağırlıklarla "Guardian Headline Full" adında özel bir yazı tipi ailesi tanımlar. Normal, orta, yarı kalın ve kalın versiyonları içerir ve her biri normal ve italik stillerde mevcuttur. Yazı tipi dosyaları, Guardian'ın web sitesinden WOFF2, WOFF ve TrueType formatlarında sağlanmıştır.
```css
@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-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;
left: -11px;
}
}
.content__main-column--interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 12px;
padding-top: 12px;
}
.content__main-column--interactive p + .element-atom {
padding-top: 0;
padding-bottom: 0;
margin-top: 12px;
margin-bottom: 12px;
}
.content__main-column--interactive .element-inline {
max-width: 620px;
}
@media (min-width: 61.25em) {
figure[data-spacefinder-role="inline"].element {
max-width: 620px;
}
}
:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, 0.72);
--feature: #c70000;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
.content__main-column--interactive .element.element-atom,
.element.element-atom {
padding: 0;
}
#article-body > div .element-atom:first-of-type + p:first-of-type,
#article-body > div .element-atom:first-of-type + .sign-in-ga {
/ Gerekirse buraya ek stiller eklenebilir /
}
```
Makale gövdeleri, etkileşimli içerik, yorumlar ve özellikler gibi çeşitli içerik bölümlerindeki ilk paragrafın üst dolgusu 14 piksel olacaktır. Ayrıca, bu paragrafların ilk harfi, büyük, büyük harfli bir düşen baş harf olarak görünecek şekilde belirli bir yazı tipi, boyut ve renkle stilize edilecektir.
Yatay bir çizgiyi takip eden paragraflar için üst dolgu kaldırılmıştır.
Vitrin öğeleri için başlıklar, maksimum 620 piksel genişliğinde statik konuma ayarlanmıştır.
Sarmalayıcı öğeler, 71.24em'den küçük ekranlarda maksimum 978 piksele ayarlanarak tam görünüm alanı genişliğini kaplar. Başlıklarının dolgusu, daha küçük cihazlarda 10 pikselden orta boy ekranlarda 20 piksele kadar değişen ekran boyutuna göre değişir.
```css
@media (max-width: 46.24em) {
.element.element--immersive.element-immersive {
margin-left: -10px !important;
margin-right: 0 !important;
left: 0;
}
}
@media (max-width: 46.24em) and (min-width: 30em) {
.element.element--immersive.element-immersive {
margin-left: -20px !important;
}
.element.element--immersive.element-immersive figcaption {
padding-inline: 20px;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: [title-start headline-start meta-start standfirst-start] repeat(5, 1fr) [title-end headline-end meta-end standfirst-end portrait-start] repeat(5, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start] .75fr [standfirst-end meta-start] auto [meta-end portrait-end];
}
.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name=headline] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(--headerBorder);
}
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name=meta] {
position: relative;
padding-top: 2px;
margin-right: 0;
}
.furniture-wrapper .standfirst .content__standfirst,
.furniture-wrapper #standfirst .content__standfirst,
.furniture-wrapper [data-gu-name=standfirst] .content__standfirst {
margin-bottom: 4px;
}
.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name=standfirst] ul li {
font-size: 20px;
}
.furniture-wrapper .standfirst li a,
.furniture-wrapper .standfirst a,
.furniture-wrapper #standfirst li a,
.furniture-wrapper #standfirst a,
.furniture-wrapper [data-gu-name=standfirst] li a,
.furniture-wrapper [data-gu-name=standfirst] a {
border-bottom: none;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
}
.furniture-wrapper .standfirst li a:hover,
.furniture-wrapper .standfirst a:hover,
.furniture-wrapper #standfirst li a:hover,
.furniture-wrapper #standfirst a:hover,
.furniture-wrapper [data-gu-name=standfirst] li a:hover,
.furniture-wrapper [data-gu-name=standfirst] a:hover {
text-decoration-color: var(--new-pillar-colour);
}
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=standfirst] p:first-of-type {
border-top: 1px solid var(--headerBorder);
padding-bottom: 0;
}
}
@media (min-width: 61.25em) and (min-width: 71.25em) {
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=standfirst] p:first-of-type {
border-top: unset;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role=inline].element {
max-width: 630px;
}
}
@media (min-width: 71.25em) {
.furniture-wrapper {
grid-template-columns:
