Bu, "Guardian Headline Full" font ailesini tanımlayan bir CSS stil sayfasıdır. Her biri fontun farklı bir ağırlığını ve stilini belirten birden fazla font-face kuralı içerir ve font dosyalarının çeşitli formatlardaki (WOFF2, WOFF ve TTF) URL'lerini belirtir. Ağırlıklar hafif (300) ile yarı kalın (600) arasında değişir ve hem normal hem de italik stiller dahildir. Font dosyaları The 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ı İngilizce'ye yeniden yazmak uygulanabilir değildir. Farklı bir metin paylaşmak istediyseniz, lütfen sağlayın, memnuniyetle yardımcı olurum.
sol: -11px.
Etkileşimli makaleler için ana içerik sütunu, gömülü öğelerin etrafında kenar boşluğu veya dolgu içermez, üstte ve altta 12px dolgu bulunur. Bir paragrafı gömülü bir öğe takip ettiğinde, dolgu kaldırılır ve yerine 12px kenar boşlukları gelir. Satır içi öğeler maksimum 620px genişlikle sınırlandırılmıştır.
61.25em'den geniş ekranlarda, satır içi figürler de 620px ile sınırlandırılmıştır.
Döngülü videolar içeren medya bölümleri için, başlık diğer öğelerin üzerine konumlandırılır ve döngü düğmesi ekstra boşlukla sağ alta hizalanır. Sessize alma ve sese açma düğmeleri soldan dolgulu olarak sağa yerleştirilir. Başlık düğmesi her şeyin üzerinde durur ve daha büyük ekranlarda alta yakın konumlandırılır.
Sinemagraflar (bir tür döngülü video) için, 46.25em'den geniş ekranlarda yükseklik sınırı kaldırılır.
Gövde bölümünde, kendi kendine barındırılan videolar maksimum 620px genişlik ve 12px kenar boşluklarıyla bloklar halinde görüntülenir. Video ve döngü figürü tam genişliği kaplar, video yüksekliği otomatik olarak ayarlanır.
Bir video sürükleyici moda ayarlandığında, mevcut alanı dolduracak şekilde genişler, genişlik sınırını ve kenar boşluklarını kaldırır. Çok geniş ekranlarda (71.25em üzeri), video kabı 1140px genişliğindedir ve 180px sola kaydırılır, başlık girintilidir. Daha da geniş ekranlarda (81.25em üzeri), 1300px genişliğe ulaşır ve 260px sola kayar.
Tasarım belirli renkler kullanır: tarih satırları için gri, kenarlıklar için açık gri, başlıklar için daha açık gri ve başlık metni için yarı saydam koyu bir arka plan. Ana özellik rengi koyu kırmızıdır ve özel bir sütun rengiyle geçersiz kılınabilir.
Alt başlıklar, alıntılar ve blok alıntılar, karanlık modda ayarlanabilen ikincil sütun rengini kullanır.
Gömülü öğelerin dolgusu yoktur. Gömülü bir öğe başka bir öğenin veya yatay bir çizginin hemen ardından geldiğinde, sonraki paragraf ekstra üst kenar boşluğu almaz, böylece tutarlı boşluk sağlanır. Bu, farklı içerik bölümleri ve etkileşimli düzenler arasında geçerlidir.
Bu, bir web sayfası düzeninde belirli paragrafları hedefleyen bir CSS seçici listesidir. "element-atom", "sign-in-gate" veya yatay çizgiler (sonuncusu hariç) gibi belirli öğelerin hemen ardından gelen paragraflara 14 piksel üst dolgu uygular. Seçiciler sayfanın ana içerik, yorum gövdesi ve özellik gövdesi gibi farklı bölümlerini kapsar.
CSS'nin ikinci kısmı, aynı paragrafların ilk harfini stilize etmek için `:first-letter` sözde öğesini kullanır, muhtemelen bir damla başlık efekti için. Bu stili ana sütun, makale gövdesi ve etkileşimli içerik bölümleri gibi çeşitli kaplara uygular.
---
CSS kuralları, belirli içerik alanlarında yatay çizgiler veya reklam kapları gibi belirli öğelerden sonraki ilk paragrafın ilk harfine damla başlık stili uygular. Damla başlık Guardian Headline fontunu kullanır, kalındır, büyüktür (111px) ve büyük harflerle sola yüzer. Sağda kenar boşluğu vardır, dikey olarak üste hizalanır ve özel bir renk değişkeni kullanır.
Etkileşimli içerik ve diğer bölümler için, yatay çizgileri takip eden paragrafların üst dolgusu yoktur.
Bu içerik alanlarındaki alıntılar maksimum 620px genişlikle sınırlandırılmıştır.
Vitrin öğeleri için görsel başlıkları statik olarak konumlandırılır ve 620px'e kadar tam genişliği kaplar. 71.25em'den geniş ekranlarda, mutlak konumlandırılır ve maksimum 140px genişliğe sahip olur; 81.25em'den geniş ekranlarda maksimum genişlik 220px'e çıkar.
Sürükleyici öğeler, kaydırma çubuğu genişliğini hesaba katarak tam görünüm genişliğini kaplar. Daha küçük ekranlarda maksimum 978px genişliğe sahiptirler ve başlıklar yatay dolguya sahiptir. Orta ekranlarda maksimum genişlik 738px'dir. Çok küçük ekranlarda, öğe negatif kenar boşluklarıyla sola kaydırılır ve başlıklar ekstra dolgu alır.
Gövde içeriğindeki vitrin figürleri için, daha büyük ekranlarda bunları doğru hizalamak için negatif sol kenar boşlukları vardır.
Mobilya sarmalayıcı göreceli olarak konumlandırılır ve 61.25em'den geniş ekranlarda ek stil 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%;
}
}
height:100%;position:absolute;left:calc((100vw - 1298px)/-2);background-color:var(--darkBackground);border-right:1px solid var(--headerBorderColor)}.furniture-wrapper:after{content:"";width:calc((100vw - 1298px)/2);height:100%;position:absolute;right:calc((100vw - 1298px)/-2);background-color:var(--darkBackground)}.furniture-wrapper .article-header,.furniture-wrapper [data-gu-name=title] a,.furniture-wrapper [data-gu-name=title] span{color: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{border-top:1px solid var(--headerBorderColor)}}.furniture-wrapper #headline h1,.furniture-wrapper [data-gu-name=headline] h1,.furniture-wrapper .headline h1{font-weight:700;color:#dcdcdc}.furniture-wrapper #headline figure,.furniture-wrapper [data-gu-name=headline] figure,.furniture-wrapper .headline figure{margin-top:0;margin-bottom:2px}@media (min-width: 71.25em){.furniture-wrapper #meta:before,.furniture-wrapper [data-gu-name=meta]:before{background-color: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{color:#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{border-color:var(--headerBorderColor);color: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{fill: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{color:var(--darkBackground);background-color: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{fill:var(--darkBackground)}.furniture-wrapper #meta div,.furniture-wrapper [data-gu-name=meta] div{color:#dcdcdc}.furniture-wrapper #meta a,.furniture-wrapper [data-gu-name=meta] a{color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper #meta a:hover,.furniture-wrapper [data-gu-name=meta] a:hover{color:var(--new-pillar-colour, --darkModeFeature);text-decoration-color: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{border-bottom:none;color:var(--new-pillar-colour, --darkModeFeature);background-image:none!important;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--headerBorder, #dcdcdc);text-decoration-thickness: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{border-bottom:none;text-decoration-color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper .standfirst p,.furniture-wrapper #standfirst p,.furniture-wrapper [data-gu-name=standfirst] p{color:#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 yazamıyorum çünkü CSS kodu gibi görünüyor, doğal dil düzyazısı değil. Yeniden ifade etmemi istediğiniz yazılı İngilizce bir pasaj sağlayabilir misiniz?
İşte akıcı, doğal İngilizce ile yeniden yazılmış metin:
Bu, "Guardian Headline Full" font ailesi için bir dizi font-face kuralıdır. Her kural, Guardian'ın web sitesinde barındırılan dosyaları kullanarak fontun farklı bir stilini veya ağırlığını tanımlar. Formatlar, tarayıcılar arası uyumluluk için WOFF2, WOFF ve TTF içerir. Ağırlıklar normal (400) ile siyah (900) arasında değişir ve hem normal hem de italik stiller mevcuttur.
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—tarayıcılar tarafından okunmak içindir, insanlar tarafından değil. İsterseniz, bu kodun ne yaptığını düz İngilizce ile açıklayabilirim.
iOS ve Android cihazlar için, makale kabının mobilya sarmalayıcısındaki etiketler, Guardian başlık font ailesini kullanan kalın metinle stilize edilir 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) renktedir.
Her iki platformda mobilya sarmalayıcısındaki görseller için, göreceli olarak konumlandırılır, üstte 14 piksel kenar boşluğu ve hafif negatif sol kenar boşluğu vardır ve ekranın tam genişliğine uzanırlar (herhangi bir kaydırma çubuğunu hesaba katarak). Görsellerin kendileri, bağlantıları ve iç kapları şeffaf bir arka plana sahiptir ve doğal yüksekliklerini korur.
Her iki platformda mobilya sarmalayıcısındaki giriş metni (standfirst), üstte ve altta biraz dolguya ve ekran kenarıyla doğru hizalamak için hafif negatif sağ kenar boşluğuna sahiptir.
.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;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
border-bottom: none;
}
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a:hover {
text-decoration-color: var(--new-pillar-colour);
}
body.ios #feature-article-container .furniture-wrapper .meta,
body.ios #standard-article-container .furniture-wrapper .meta,
body.ios #comment-article-container .furniture-wrapper .meta,
body.android #feature-article-container .furniture-wrapper .meta,
body.android #standard-article-container .furniture-wrapper .meta,
body.android #comment-article-container .furniture-wrapper .meta {
margin: 0;
}
body.ios #feature-article-container .furniture-wrapper .meta .byline,
body.ios #feature-article-container .furniture-wrapper .meta .byline__author,
body.ios #feature-article-container .furniture-wrapper .meta span.byline__author a,
body.ios #feature-article-container .furniture-wrapper .meta .meta__byline span,
body.ios #standard-article-container .furniture-wrapper .meta .byline,
body.ios #standard-article-container .furniture-wrapper .meta .byline__author,
body.ios #standard-article-container .furniture-wrapper .meta span.byline__author a,
body.ios #standard-article-container .furniture-wrapper .meta .meta__byline span,
body.ios #comment-article-container .furniture-wrapper .meta .byline,
body.ios #comment-article-container .furniture-wrapper .meta .byline__author,
body.ios #comment-article-container .furniture-wrapper .meta span.byline__author a,
body.ios #comment-article-container .furniture-wrapper .meta .meta__byline span,
body.android #feature-article-container .furniture-wrapper .meta .byline,
body.android #feature-article-container .furniture-wrapper .meta .byline__author,
body.android #feature-article-container .furniture-wrapper .meta span.byline__author a,
body.android #feature-article-container .furniture-wrapper .meta .meta__byline span,
body.android #standard-article-container .furniture-wrapper .meta .byline,
body.android #standard-article-container .furniture-wrapper .meta .byline__author,
body.android #standard-article-container .furniture-wrapper .meta span.byline__author a,
body.android #standard-article-container .furniture-wrapper .meta .meta__byline span,
body.android #comment-article-container .furniture-wrapper .meta .byline,
body.android #comment-article-container .furniture-wrapper .meta .byline__author,
body.android #comment-article-container .furniture-wrapper .meta span.byline__author a,
body.android #comment-article-container .furniture-wrapper .meta .meta__byline span {
/ Burada belirli bir stil tanımlanmamıştır /
}
Android'de, makale ve yorum bölümlerindeki imza ve yazar bağlantıları metinleri için sütun rengini kullanır. iOS'ta aynı stil uygulanır.
Hem iOS hem Android için, bu bölümlerdeki meta bilgi alanı ekstra dolguya sahip değildir. Bu alandaki herhangi bir simge (SVG öğeleri gibi) kontur için sütun rengini kullanır.
Vitrin öğelerindeki başlık düğmesi her iki platformda da aynı şekilde stilize edilir: sağdan 14 piksel konumlandırılmış, 5 piksel dolgulu küçük, ortalanmış bir düğmedir (28 x 28 piksel).
Hem iOS hem Android'de ana makale gövdesi sol ve sağ taraflarda 12 piksel dolguya sahiptir.
Makale g
