هذه كتلة من كود CSS تحدد خطوطًا مخصصة لموقع ويب. وهي تُعدّ عائلة خط "Guardian Headline Full" بأنماط وأوزان مختلفة، مثل الخفيف والعادي والمتوسط وشبه العريض، مع نسخ عادية ومائلة لكل منها. يحدد الكود من أين يتم تنزيل ملفات الخط، باستخدام تنسيقات مختلفة مثل WOFF2 وWOFF وTTF لضمان التوافق عبر المتصفحات.
هذه كتلة من كود CSS، وليست نصًا أدبيًا. وهي تحدد أنماط الخطوط وقواعد التخطيط لموقع ويب. إليك شرح مبسط باللغة الإنجليزية لما يفعله الكود:
يُعدّ الكود خطوطًا مخصصة لموقع Guardian، بما في ذلك "Guardian Headline Full" بأوزان مختلفة (عريض، أسود، ونسخهما المائلة) و"Guardian Titlepiece" بالخط العريض. يتم تحميل هذه الخطوط من خادم أصول Guardian بتنسيقات متعددة (WOFF2 وWOFF وTTF) لضمان التوافق عبر المتصفحات.
كما يحتوي على قواعد تصميم متجاوب لتخطيط صفحة محدد يسمى "content__main-column--interactive". على الشاشات الأوسع (أكثر من 71.25em)، يحصل هذا العمود على هامش أيسر بمقدار 160 بكسل، وعلى الشاشات الأوسع (أكثر من 81.25em)، يزيد الهامش إلى 240 بكسل. داخل هذا العمود، تُقيَّد عناصر معينة مثل "element-atom" بعرض أقصى يبلغ 620 بكسل، ولكن على الشاشات الأصغر (أقل من 46.24em)، يمكن أن تأخذ العرض الكامل.
بالنسبة لعناصر "element-showcase"، لا يوجد لها هامش أيسر على الجوال، ولكن على الشاشات المتوسطة (46.25em فما فوق)، تكون محدودة بعرض 620 بكسل، وعلى الشاشات الكبيرة (71.25em فما فوق)، يمكن أن تتسع إلى 860 بكسل. عناصر "Element-immersive" مصممة لتكون بعرض كامل: على الجوال، تمتد عبر كامل منفذ العرض، وعلى الشاشات المتوسطة تنزاح قليلاً وتمتد إلى ما بعد العمود، وعلى الشاشات الكبيرة تتماشى بشكل طبيعي مع عرض أقصى يبلغ 1260 بكسل.
أخيرًا، الفقرات والقوائم داخل هذا العمود محدودة أيضًا بعرض 620 بكسل، وهناك عنصر زخرفي شبه زائف (":before") يمتد على كامل ارتفاع العمود زائد 15 بكسل، مع حد أدنى للارتفاع يبلغ 100 بكسل، ويتم وضعه في الأعلى.
.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;
}
}
[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 {
/ لا توجد أنماط محددة محددة هنا؛ من المحتمل أن قائمة المحددات تهدف إلى استهداف هذه العناصر لغرض ما. /
}
تُطبق القواعد التالية على الحرف الأول من فقرات معينة، مما يمنحه نمطًا كبيرًا وعريضًا بأحرف كبيرة. يؤثر هذا على الفقرات التي تأتي مباشرة بعد عناصر محددة مثل الخطوط الأفقية أو كتل المحتوى، ولكن فقط عندما تكون الفقرة الأولى في أقسام الجسم أو المميزة. يستخدم التنسيق خط Guardian headline، ويضبط حجم الخط على 111 بكسل، ويحاذي الحرف إلى اليسار بهامش طفيف. يتم التحكم في اللون بواسطة خاصية مخصصة، مع fallback إلى لون العمود.
بالنسبة للمحتوى التفاعلي وأجسام المقالات، الفقرات التي تتبع خطًا أفقيًا أو حاوية فتحات إعلانية لا تحتوي على حشوة علوية إضافية.
الاقتباسات المنسدلة في أقسام الجسم والمميزة والتعليق والتفاعلية محدودة بعرض أقصى يبلغ 620 بكسل.
تسميات توضيحية للصور المميزة تكون عادةً في وضع ثابت وتأخذ العرض الكامل، حتى 620 بكسل. ومع ذلك، على الشاشات الأوسع (أكثر من 71.25em)، تصبح في وضع مطلق مع عرض أقصى يبلغ 140 بكسل، وعلى الشاشات الأوسع (أكثر من 81.25em)، يزيد العرض الأقصى إلى 220 بكسل.
العناصر الغامرة تمتد إلى عرض منفذ العرض الكامل، مع مراعاة عرض شريط التمرير. على الشاشات الأصغر (حتى 71.24em)، تكون محدودة بـ 978 بكسل، وتحتوي تسمياتها التوضيحية على حشوة أفقية تتكيف مع حجم الشاشة—10 بكسل على الشاشات الصغيرة جدًا و20 بكسل على الشاشات المتوسطة. بين 46.25em و61.24em، يكون العرض الأقصى 738 بكسل. على الشاشات الصغيرة جدًا (حتى 46.24em)، يتم إزاحة العنصر إلى اليسار بهوامش سالبة، ويتم ضبط حشوة التسمية التوضيحية على 20 بكسل على الشاشات التي يبلغ عرضها 30em على الأقل.
بالنسبة لأشكال العرض في أعمدة الجسم أو التفاعلية، يتم تطبيق هامش أيسر سالب بمقدار 160 بكسل على الشاشات الأوسع من 71.25em.
[body] .content__main-column--interactive figure.element.element--showcase.element-showcase {
margin-left: -240px !important;
}
.furniture-wrapper {
position: relative;
}
@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);
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: .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] .25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] .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 {
/ لم يتم تحديد أنماط إضافية /
}
}
.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:has(.ios, .android) {
--darkBackground: #1a1a1a;
--feature: #c70000;
--darkmodeFeature: #ff5943;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
@media (prefers-color-scheme: dark) {
:root:has(.ios, .android) {
--new-pillar-colour: var(--darkmode-pillar, var(--darkmodeFeature));
}
}
body.ios #feature-article-container .element-atom:first-of-type + p:first-letter,
body.ios #feature-article-container .element-atom:first-of-type + .sign-in-gate + p:first-letter,
body.ios #feature-article-container .element-atom:first-of-type + #sign-in-gate + p:first-letter,
body.ios #standard-article-container .element-atom:first-of-type + p:first-letter,
body.ios #standard-article-container .element-atom:first-of-type + .sign-in-gate + p:first-letter,
body.ios #standard-article-container .element-atom:first-of-type + #sign-in-gate + p:first-letter,
body.ios #comment-article-container .element-atom:first-of-type + p:first-letter,
body.ios #comment-article-container .element-atom:first-of-type + .sign-in-gate + p:first-letter,
body.ios #comment-article-container .element-atom:first-of-type + #sign-in-gate + p:first-letter,
body.android #feature-article-container .element-atom:first-of-type + p:first-letter,
body.android #feature-article-container .element-atom:first-of-type + .sign-in-gate + p:first-letter,
body.android #feature-article-container .element-atom:first-of-type + #sign-in-gate + p:first-letter,
body.android #standard-article-container .element-atom:first-of-type + p:first-letter,
body.android #standard-article-container .element-atom:first-of-type + .sign-in-gate + p:first-letter,
body.android #standard-article-container .element-atom:first-of-type + #sign-in-gate + p:first-letter,
body.android #comment-article-container .element-atom:first-of-type + p:first-letter,
body.android #comment-article-container .element-atom:first-of-type + .sign-in-gate + p:first-letter,
body.android #comment-article-container .element-atom:first-of-type + #sign-in-gate + p:first-letter {
color: var(--new-pillar-colour, #ffffff);
}
body.ios #feature-article-container .furniture-wrapper,
body.ios #standard-article-container .furniture-wrapper,
body.ios #comment-article-container .furniture-wrapper,
body.android #feature-article-container .furniture-wrapper,
body.android #standard-article-container .furniture-wrapper,
body.android #comment-article-container .furniture-wrapper {
padding: 4px 10px 0;
}
body.ios #feature-article-container .furniture-wrapper .content__labels,
body.ios #standard-article-container .furniture-wrapper .content__labels,
body.ios #comment-article-container .furniture-wrapper .content__labels,
body.android #feature-article-container .furniture-wrapper .content__labels,
body.android #standard-article-container .furniture-wrapper .content__labels,
body.android #comment-article-container .furniture-wrapper .content__labels {
font-weight: 700;
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
color: var(--new-pillar-colour);
text-transform: capitalize;
}
body.ios #feature-article-container .furniture-wrapper h1,
body.ios #standard-article-container .furniture-wrapper h1,
body.ios #comment-article-container .furniture-wrapper h1,
body.android #feature-article-container .furniture-wrapper h1,
body.android #standard-article-container .furniture-wrapper h1,
body.android #comment-article-container .furniture-wrapper h1 {
font-size: 32px;
font-weight: 700;
padding-bottom: 12px;
color: #121212;
}
body.ios #feature-article-container .furniture-wrapper figure.element-image,
body.ios #standard-article-container .furniture-wrapper figure.element-image,
body.ios #comment-article-container .furniture-wrapper figure.element-image,
body.android #feature-article-container .furniture-wrapper figure.element-image,
body.android #standard-article-container .furniture-wrapper figure.element-image,
body.android #comment-article-container .furniture-wrapper figure.element-image {
position: relative;
margin: 14px 0 0 -10px;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto;
}
/* على iOS وAndroid، لجميع أنواع المقالات (مميزة، قياسية، تعليق)،
اجعل الصور وحاوياتها بعرض كامل وشفافة */
body.ios #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #feature-article-container .furniture-wrapper figure.element-image img,
body.ios #feature-article-container .furniture-wrapper figure.element-image a,
body.ios #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #standard-article-container .furniture-wrapper figure.element-image img,
body.ios #standard-article-container .furniture-wrapper figure.element-image a,
body.ios #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #comment-article-container .furniture-wrapper figure.element-image img,
body.ios #comment-article-container .furniture-wrapper figure.element-image a,
body.android #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #feature-article-container .furniture-wrapper figure.element-image img,
body.android #feature-article-container .furniture-wrapper figure.element-image a,
body.android #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #standard-article-container .furniture-wrapper figure.element-image img,
body.android #standard-article-container .furniture-wrapper figure.element-image a,
body.android #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #comment-article-container .furniture-wrapper figure.element-image img,
body.android #comment-article-container .furniture-wrapper figure.element-image a {
background-color: transparent;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto !important;
}
/ على iOS وAndroid، لجميع أنواع المقالات، اضبط تباعد المقدمة /
body.ios #feature-article-container .furniture-wrapper .standfirst,
body.ios #standard-article-container .furniture-wrapper .standfirst,
body.ios #comment-article-container .furniture-wrapper .standfirst,
body.android #feature-article-container .furniture-wrapper .standfirst,
body.android #standard-article-container .furniture-wrapper .standfirst,
body.android #comment-article-container .furniture-wrapper .standfirst {
padding-top: 4px;
padding-bottom: 24px;
margin-right: -10px;
}
/ على iOS وAndroid، لجميع أنواع المقالات، اضبط خط فقرات المقدمة /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner p,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner p,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner p,
body.android #feature-article-container .furniture-wrapper .standfirst__inner p,
body.android #standard-article-container .furniture-wrapper .standfirst__inner p,
body.android #comment-article-container .furniture-wrapper .standfirst__inner p {
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
}
/ على iOS وAndroid، لجميع أنواع المقالات، قم بتنسيق الروابط في المقدمة /
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;
}
/ على iOS وAndroid، لجميع أنواع المقالات، قم بتنسيق حالات التمرير للروابط في المقدمة /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfirعند التمرير، الروابط داخل المقدمة (بما في ذلك عناصر القائمة والروابط العادية) في حاويات المقالات لأجهزة iOS وAndroid سيكون لون خطها السفلي مضبوطًا على لون العمود الجديد.
بالنسبة لقسم meta في حاويات المقالات هذه على كل من iOS وAndroid، لا يوجد هامش. نص التوقيع، بما في ذلك اسم المؤلف وأي نطاقات ذات صلة، سيستخدم أيضًا لون العمود الجديد.
قسم meta__misc ليس له حشوة، وأي أيقونات SVG بداخله ستتبع نفس قواعد التنسيق.
body.ios #feature-article-container .furniture-wrapper .meta__misc svg,
body.ios #standard-article-container .furniture-wrapper .meta__misc svg,
body.ios #comment-article-container .furniture-wrapper .meta__misc svg,
body.android #feature-article-container .furniture-wrapper .meta__misc svg,
body.android #standard-article-container .furniture-wrapper .meta__misc svg,
body.android #comment-article-container .furniture-wrapper .meta__misc svg {
stroke: var(--new-pillar-colour);
}
body.ios #feature-article-container .furniture-wrapper figure.element-image.element--showcase figcaption,
body.ios #standard-article-container .furniture-wrapper figure.element-image.element--showcase figcaption,
body.ios #comment-article-container .furniture-wrapper figure.element-image.element--showcase figcaption,
body.android #feature-article-container .furniture-wrapper figure.element-image.element--showcase figcaption,
body.android #standard-article-container .furniture-wrapper figure.element-image.element--showcase figcaption,
body.android #comment-article-container .furniture-wrapper figure.element-image.element--showcase figcaption {
color: var(--dateline);
}
body.ios #feature-article-container .
