Bu, "Guardian Headline Full" font ailesini çeşitli font ağırlıkları ve stilleriyle tanımlayan bir CSS kod bloğudur. Her biri fontun kaynak dosyalarını farklı formatlarda (WOFF2, WOFF ve TTF) belirten ve ilgili font ağırlığını ve font stilini ayarlayan birden fazla @font-face kuralı içerir. Ağırlıklar hafif (300) ile yarı kalın (600) arasında değişir ve hem normal hem de italik stiller mevcuttur. Font dosyaları Guardian'ın varlık sunucusunda barındırılır.
Bu metin CSS kodu gibi görünüyor, doğal dil değil. Bir web sayfası için font stillerini ve yerleşim kurallarını tanımlar. Teknik kod olduğu için "akıcı, doğal İngilizce"ye yeniden yazmak uygulanabilir değildir. Ancak, ne yaptığına dair sade bir İngilizce özet sağlayabilirim:
---
Bu, özel fontları yükleyen ve bir web sayfasının ana içerik alanının yerleşimini ayarlayan bir dizi CSS kuralıdır. "Guardian Headline" ve "Guardian Titlepiece" yazı tipleri için kalın ve italik sürümler dahil font dosyalarını tanımlar. Ayrıca farklı ekran boyutları için boşluk ve genişlik kuralları belirleyerek içeriğin mobil, tablet ve masaüstü cihazlarda düzgün görüntülenmesini sağlar. Örneğin, kenar boşluklarını ayarlar, belirli öğeleri ortalar ve daha büyük ekranlarda dikey bir çizgi ekler.
sol: -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;
}
}
[data-gu-name="media"]:has(figure.loop) figure.loop figcaption:not(.hidden) {
z-index: 6;
}
[data-gu-name="media"]:has(figure.loop) figure.loop button[data-link-name*="gu-video-loop"] {
align-self: flex-end;
margin-bottom: 40px;
margin-right: 3px;
}
[data-gu-name="media"]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid="unmute-icon"]),
[data-gu-name="media"]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid="mute-icon"]) {
right: 0;
padding-left: 10px;
}
[data-gu-name="media"]:has(figure.loop) #caption-button {
z-index: 100;
}
@media (min-width: 61.25em) {
[data-gu-name="media"]:has(figure.loop) #caption-button {
bottom: 20px;
}
}
@media (min-width: 46.25em) {
[data-gu-name="media"]:has(figure.cinemagraph) .cinemagraph > div {
max-height: unset;
}
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"] {
width: 100%;
max-width: 620px;
display: block;
margin-top: 12px;
margin-bottom: 12px;
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"] figure.loop,
[data-gu-name="body"] gu-island[name="SelfHostedVideo"] figure.loop video {
width: 100%;
height: auto;
max-width: 620px;
margin: 0 auto;
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) {
max-width: unset;
margin: 12px 0;
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) figure.loop,
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) figure.loop video {
max-width: unset;
margin: 0;
}
@media (min-width: 71.25em) {
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) {
width: 1140px;
margin-left: -180px;
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) figure figcaption {
margin-left: 20px;
}
}
@media (min-width: 81.25em) {
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) {
width: 1300px;
margin-left: -260px;
}
}
:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, .72);
--feature: #c70000;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
:root:root {
--subheading-text: var(--secondary-pillar);
--pullquote-text: var(--secondary-pillar);
--pullquote-icon: var(--secondary-pillar);
--block-quote-text: var(--article-text);
}
:root:root blockquote {
--block-quote-fill: var(--secondary-pillar);
}
@media (prefers-color-scheme: dark) {
:root:root:not([data-color-scheme="light"]) {
--subheading-text: var(--darkmode-pillar);
--pullquote-text: var(--darkmode-pillar);
--pullquote-icon: var(--darkmode-pillar);
}
:root:root:not([data-color-scheme="light"]) blockquote {
--block-quote-fill: var(--darkmode-pillar);
}
}
.content__main-column--interactive .element.element-atom,
.element.element-atom {
padding: 0;
}
.content__main-column--interactive .element-atom:first-of-type + p:first-of-type,
.content__main-column--interactive .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
.content__main-column--interactive .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
.content__main-column--interactive .element-atom:first-of-type + .element-atom + p:first-of-type,
.content__main-column--interactive hr:not(.last-horizontal-rule) + p,
.content__main-column--interactive hr:not(.last-horizontal-rule) + .ad-slot-container + p,
#article-body > div .element-atom:first-of-type + p:first-of-type,
#article-body > div .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
#article-body > div .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
#article-body > div .element-atom:first-of-type + .element-atom + p:first-of-type,
#article-body > div hr:not(.last-horizontal-rule) + p,
#article-body > div hr:not(.last-horizontal-rule) + .ad-slot-container + p,
.content--interactive > div .element-atom:first-of-type + p:first-of-type,
.content--interactive > divBu, teknik bir CSS seçici listesidir, düz bir metin değildir. İşlevini kaybetmeden akıcı, doğal İngilizceye yeniden yazılamaz. Farklı bir metin sağlamak istediyseniz, lütfen paylaşın, yardımcı olmaktan mutluluk duyarım.
İşte akıcı, doğal İngilizceyle yeniden yazılmış metin:
---
CSS kuralları, sayfanın belirli bölümlerindeki belirli öğelerden (yatay çizgiler veya reklam kapları gibi) sonra gelen ilk paragrafın ilk harfine bir gömme başlık stili uygular. Bu stil Guardian Headline fontunu kullanır, kalındır, büyüktür (111px) ve büyük harflerle sola kayar. Bir kenar boşluğu ve dikey hizalama içerir ve renk özel bir özellik tarafından ayarlanır.
Etkileşimli içerik ve diğer belirtilen bölümler için, yatay bir çizgiden (veya onu takip eden bir reklam kabından) sonraki ilk paragrafın üst dolgusu yoktur.
Bu bölümlerdeki alıntılar maksimum 620px genişlikle sınırlıdır.
Tanıtım görselleri için, başlık statik olarak konumlandırılır ve varsayılan olarak tam genişliği (620px'e kadar) kaplar. Daha geniş ekranlarda (71.25em üzeri), başlık mutlak konumlandırılır ve maksimum genişliği 140px olur; daha da geniş ekranlarda (81.25em üzeri), maksimum genişlik 220px'e çıkar.
Sarmalayıcı öğeler tam görünüm genişliğini kaplar (kaydırma çubuğu hesaba katılır). Daha küçük ekranlarda (71.24em altı), 978px ile sınırlandırılır ve başlık yatay dolguya sahiptir (çok küçük ekranlarda 10px, biraz daha büyüklerde 20px). 46.25em ile 61.24em arasında, maksimum genişlik 738px'dir. Çok küçük ekranlarda (46.24em altı), öğe negatif kenar boşluklarıyla sola kaydırılır (10px veya 30em üzeri ekranlarda 20px) ve başlık dolgusu buna göre ayarlanır.
Gövde veya etkileşimli sütunlardaki tanıtım figürleri için, sol kenar boşluğu daha büyük ekranlarda negatiftir: 71.25em üzeri ekranlarda -160px ve 81.25em üzeri ekranlarda -240px.
Mobilya sarmalayıcısı göreceli olarak konumlandırılır ve 61.25em üzeri ekranlarda ek stiller uygulanır (kural eksik olsa da).
.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] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start] 0.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);
text-decoration-thickness: 1px;
}
.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: [title-start headline-start meta-start] repeat(2, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(7, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
content: "";
width: 540px;
position: absolute;
top: 0;
background-color: var(--headerBorder);
height: 1px;
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name="standfirst"] p {
border-top: unset;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
content: "";
width: 1px;
background-color: var(--headerBorder);
height: 100%;
position: absolute;
top: 0;
left: 0.5px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(8, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] 0.75fr [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
width: 620px;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
left: -0.5px;
}
}
.furniture-wrapper .article-header .content__labels > div,
.furniture-wrapper [data-gu-name="title"].content__labels > div {
padding-top: 2px;
}
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name="headline"] h1,
.furniture-wrapper .headline h1 {
font-weight: 600;
max-width: 620px;
font-size: 32px;
}
@media (min-width: 71.25em) {
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name="headline"] h1,
.furniture-wrapper .headline h1 {
max-width: 540px;
font-size: 50px;
}
}
@media (min-width: 46.25em) {
.furniture-wrapper .keyline-4,
.furniture-wrapper [data-gu-name="lines"] {
margin-right: 0;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper .keyline-4,
.furniture-wrapper [data-gu-name="lines"] {
display: none;
}
}
.furniture-wrapper .keyline-4 svg,
.furniture-wrapper [data-gu-name="lines"] svg {
stroke: var(--headerBorder);
}
@media (min-width: 46.25em) {
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name="meta"] {
margin-right: 0;
}
}
.furniture-wrapper #meta .meta__social,
.furniture-wrapper #meta .meta__social ul li a span,
.furniture-wrapper #meta .meta__comment,
.furniture-wrapper [data-gu-name="meta"] .meta__social,
.furniture-wrapper [data-gu-name="meta"] .meta__social ul li a span,
.furniture-wrapper [data-gu-name="meta"] .meta__comment {
border-color: var(--headerBorder);
}
.furniture-wrapper #meta .content__meta-container_dcr > div > gu-island,
.furniture-wrapper [data-gu-name="meta"] .content__meta-container_dcr > div > gu-island {
display: none;
}
.furniture-wrapper .standfirst,
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name="standfirst"] {
margin-left: -10px;
padding-left: 10px;
position: relative;
}
@media (min-width: 46.25em) {
.furniture-wrapper .standfirst,
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name="standfirst"] {
padding-top: 2px;
}
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name="standfirst"] p {
font-weight: 400;
font-size: 20px;
padding-bottom: 14px;
}
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
position: relative;
margin-top: 0;
margin-bottom: 2px;
grid-area: portrait;
}
.furniture-wrapper #main-media div div,
.furniture-wrapper [data-gu-name="media"] div div {
width: 100%;
margin-inline: 0;
}
@media (min-width: 61.25em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
margin-bottom: 0;
}
}
@media (max-width: 46.24em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
width: calc(100vw - var(--scrollbar-width, 0px));
margin-left: -10px;
}
}
@media (max-width: 46.24em) and (min-width: 30em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
margin-left: -20px;
}
}
.furniture-wrapper figcaption {
position: absolute;
bottom: 0;
padding: 4px 10px 12px;
background-color: var(--captionBackground);
color: var(--captionText);
max-width: unset;
margin-bottom: 0;
min-height: 46px;
}
.furniture-wrapper figcaption span {
color: var(--headerBorder);
}
.furniture-wrapper figcaption span svg {
fill: var(--headerBorder);
}
.furniture-wrapper figcaption span:nth-of-type(1) {
display: none;
}
.furniture-wrapper figcaption span:nth-of-type(2) {
display: inline;
max-width: 90%;
}
@media (min-width: 30em) {
.furniture-wrapper figcaption {
padding: 4px 20px 12px;
}
}
.furniture-wrapper figcaption.hidden {
opacity: 0;
}
.furniture-wrapper #caption-button {
display: block;
position: absolute;
bottom: 10px;
right: 8px;
z-index: 30;
background-color: var(--captionBackground);
border: none;
border-radius: 50%;
padding: 6px 5px 5px;
}
.furniture-wrapper #caption-button svg {
transform: scale(0.85);
}
@media (min-width: 30em) {
.furniture-wrapper #caption-button {
right: 10px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive:before {
top: -12px !important;
height: calc(100% + 24px) !important;
}
}
.content__main-column--interactive h2 {
max-width: 620px;
}
:root {
--new-pillar-colour: var(--darkmode-pillar, var(--darkModeFeature)) !important;
--headerBorderColor: #606060;
--darkModeFeature: #ff5943;
}
nav + section {
display: none;
}
nav + aside {
display: none;
}
aside + section {
display: none;
}
.furniture-wrapper {
background-color: var(--darkBackground);
margin: 0 -10px;
padding: 0 10px 4px;
}
@media (min-width: 30em) {
.furniture-wrapper {
margin: 0 -20px;
padding: 0 20px 8px;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper {
padding: 0 20px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper:before {
content: "";
width: calc((100vw - 1298px) / 2);
height: 100%;
}
}
yükseklik:100%;konum:mutlak;sol:calc((100vw - 1298px)/-2);arka plan rengi:var(--darkBackground);sağ kenarlık:1px solid var(--headerBorderColor)}.furniture-wrapper:after{içerik:"";genişlik:calc((100vw - 1298px)/2);yükseklik:100%;konum:mutlak;sağ:calc((100vw - 1298px)/-2);arka plan rengi:var(--darkBackground)}}.furniture-wrapper .article-header,.furniture-wrapper [data-gu-name=title] a,.furniture-wrapper [data-gu-name=title] span{renk:var(--new-pillar-colour, --darkModeFeature)}@media (min-width: 61.25em){.furniture-wrapper #headline>div:first-child,.furniture-wrapper [data-gu-name=headline]>div:first-child,.furniture-wrapper .headline>div:first-child{üst kenarlık:1px solid var(--headerBorderColor)}}.furniture-wrapper #headline h1,.furniture-wrapper [data-gu-name=headline] h1,.furniture-wrapper .headline h1{font ağırlığı:700;renk:#dcdcdc}.furniture-wrapper #headline figure,.furniture-wrapper [data-gu-name=headline] figure,.furniture-wrapper .headline figure{üst kenar boşluğu:0;alt kenar boşluğu:2px}@media (min-width: 71.25em){.furniture-wrapper #meta:before,.furniture-wrapper [data-gu-name=meta]:before{arka plan rengi:var(--headerBorderColor)}}.furniture-wrapper #meta details,.furniture-wrapper #meta summary,.furniture-wrapper #meta summary span,.furniture-wrapper [data-gu-name=meta] details,.furniture-wrapper [data-gu-name=meta] summary,.furniture-wrapper [data-gu-name=meta] summary span{renk:#dcdcdc}.furniture-wrapper #meta .meta__social a,.furniture-wrapper #meta .meta__social button,.furniture-wrapper [data-gu-name=meta] .meta__social a,.furniture-wrapper [data-gu-name=meta] .meta__social button{kenarlık rengi:var(--headerBorderColor);renk:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper #meta .meta__social a svg,.furniture-wrapper #meta .meta__social button svg,.furniture-wrapper [data-gu-name=meta] .meta__social a svg,.furniture-wrapper [data-gu-name=meta] .meta__social button svg{dolgu:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper #meta .meta__social a:hover,.furniture-wrapper #meta .meta__social button:hover,.furniture-wrapper [data-gu-name=meta] .meta__social a:hover,.furniture-wrapper [data-gu-name=meta] .meta__social button:hover{renk:var(--darkBackground);arka plan rengi:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper #meta .meta__social a:hover svg,.furniture-wrapper #meta .meta__social button:hover svg,.furniture-wrapper [data-gu-name=meta] .meta__social a:hover svg,.furniture-wrapper [data-gu-name=meta] .meta__social button:hover svg{dolgu:var(--darkBackground)}.furniture-wrapper #meta div,.furniture-wrapper [data-gu-name=meta] div{renk:#dcdcdc}.furniture-wrapper #meta a,.furniture-wrapper [data-gu-name=meta] a{renk:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper #meta a:hover,.furniture-wrapper [data-gu-name=meta] a:hover{renk:var(--new-pillar-colour, --darkModeFeature);metin dekorasyon rengi:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper .standfirst a,.furniture-wrapper .standfirst li a,.furniture-wrapper #standfirst a,.furniture-wrapper #standfirst li a,.furniture-wrapper [data-gu-name=standfirst] a,.furniture-wrapper [data-gu-name=standfirst] li a{alt kenarlık:yok;renk:var(--new-pillar-colour, --darkModeFeature);arka plan görüntüsü:yok!önemli;metin dekorasyonu:alt çizgi;metin alt çizgi ofseti:6px;metin dekorasyon rengi:var(--headerBorder, #dcdcdc);metin dekorasyon kalınlığı:1px}.furniture-wrapper .standfirst a:hover,.furniture-wrapper .standfirst li a:hover,.furniture-wrapper #standfirst a:hover,.furniture-wrapper #standfirst li a:hover,.furniture-wrapper [data-gu-name=standfirst] a:hover,.furniture-wrapper [data-gu-name=standfirst] li a:hover{alt kenarlık:yok;metin dekorasyon rengi:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper .standfirst p,.furniture-wrapper #standfirst p,.furniture-wrapper [data-gu-name=standfirst] p{renk:#dcdcdc}@media (min-width: 61.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{bo
Bu metni yeniden yazmama yardımcı olamam çünkü CSS kodu gibi görünüyor, doğal dil düzyazısı değil. Üzerinde çalışmamı istediğiniz farklı bir metin varsa, paylaşmaktan çekinmeyin.
İşte akıcı, doğal İngilizceyle yeniden yazılmış metin:
Bu, "Guardian Headline Full" font ailesi için bir dizi font-face kuralıdır. Her kural, fontun farklı bir stilini ve ağırlığını tanımlar ve tarayıcılar arası uyumluluk için aynı dosya setini farklı formatlarda (WOFF2, WOFF ve TTF) işaret eder. Stiller normal, italik, orta, yarı kalın, kalın ve siyahı içerir ve her ağırlık için karşılık gelen italik sürümler bulunur. Font dosyaları Guardian'ın varlık sunucusunda barındırılır.
Bu metin CSS kodu gibi görünüyor, doğal dil değil. Muhtemelen The Guardian'ın web sitesi için font stillerini ve yerleşim kurallarını tanımlar. Teknik kod olduğu için "akıcı, doğal İngilizce"ye yeniden yazmak uygulanabilir değildir. Ancak, kodun ne yaptığına dair sade bir İngilizce özet sağlayabilirim:
---
Bu kod özel fontlar kurar ve mobil cihazlar (iOS ve Android) için yerleşimi ayarlar. Üç font ailesi tanımlar—Guardian Headline Full (normal, kalın ve italik stillerle) ve Guardian Titlepiece—dosyalarına bağlanarak. Ayrıca karanlık mod için renk değişkenleri ayarlar ve mobilde makale başlığının gizlenmesini ve içeriğin düzgün boşluklanmasını sağlar. Ek olarak, belirli öğelerden sonraki ilk paragrafın ilk harfini belirli bir renk kullanacak şekilde stiller.
iOS ve Android cihazlar için, makale kabının mobilya sarmalayıcısındaki etiketler, Guardian başlık font ailesini kullanarak kalın metinle stillendirilir ve sütun rengine göre renklendirilir, büyük harflerle.
Hem iOS hem Android'de, mobilya sarmalayıcısındaki ana başlık 32 piksel, kalın, altında 12 piksel dolgu ile ayarlanır ve koyu (neredeyse siyah) renklidir.
Her iki platformda mobilya sarmalayıcısındaki görüntüler için, göreceli olarak konumlandırılır, üst kenar boşluğu 14 piksel ve sol kenar boşluğu -10 pikseldir. Görüntü genişliği tam görünüm genişliğini kaplar (herhangi bir kaydırma çubuğu hesaba katılır) ve yükseklik otomatik olarak ayarlanır. Görüntünün kendisi, iç kabı ve bağlantısı şeffaf bir arka plana sahiptir ve aynı tam genişlik boyutlandırmasını otomatik yükseklikle korur.
Mobilya sarmalayıcısındaki standfirst (tanıtım metni) her iki platformda 4 piksel üst dolgu ve 24 piksel alt dolguya sahiptir, negatif sağ kenar boşluğu 10 pikseldir. Standfirst içindeki paragraflar buna göre stillendirilir.
.ment-article-container .furniture-wrapper .standfirst__inner p {
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
}
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a {
color: var(--new-pillar-colour) !important;
background-image: none !important;
