هذا ملف CSS يحدد عائلة الخط "Guardian Headline Full". يتضمن عدة قواعد @font-face، تحدد كل منها وزنًا ونمطًا مختلفًا للخط، مع روابط لملفات الخط بصيغ متعددة (WOFF2 وWOFF وTTF). تتراوح الأوزان من الخفيف (300) إلى شبه العريض (600)، مع تضمين الأنماط العادية والمائلة. ملفات الخط مستضافة على خادم أصول صحيفة الغارديان.
يبدو أن هذا النص هو كود CSS وليس لغة طبيعية. إنه يحدد أنماط الخطوط وقواعد التخطيط لصفحة ويب. نظرًا لأنه كود تقني، فإن إعادة كتابته إلى الإنجليزية الفصيحة غير ممكنة. إذا كنت تقصد مشاركة نص مختلف، فيرجى تقديمه وسأكون سعيدًا بالمساعدة.
left: -11px.
لا يوجد هامش أو حشوة حول العناصر المدمجة في عمود المحتوى الرئيسي للمقالات التفاعلية، مع حشوة 12 بكسل في الأعلى والأسفل. عندما تتبع فقرة عنصرًا مدمجًا، تُزال الحشوة وتُستبدل بهوامش 12 بكسل. العناصر المضمنة محدودة بعرض أقصى يبلغ 620 بكسل.
على الشاشات الأوسع من 61.25em، تقتصر الأشكال المضمنة أيضًا على 620 بكسل.
بالنسبة لأقسام الوسائط ذات الفيديوهات الحلقية، يتم وضع التسمية التوضيحية فوق العناصر الأخرى، ويتم محاذاة زر التكرار إلى أسفل اليمين مع مسافة إضافية. يتم وضع زري كتم الصوت وإلغاء كتمه على اليمين مع بعض الحشوة اليسرى. يقع زر التسمية التوضيحية فوق كل شيء، وعلى الشاشات الأكبر يتم وضعه بالقرب من الأسفل.
بالنسبة للصور السينمائية (نوع من الفيديو الحلقي)، تتم إزالة حد الارتفاع على الشاشات الأوسع من 46.25em.
في قسم الجسم، يتم عرض الفيديوهات المستضافة ذاتيًا ككتل بعرض أقصى 620 بكسل وهوامش 12 بكسل. يأخذ الفيديو وشكله الحلقي العرض الكامل، مع ضبط ارتفاع الفيديو تلقائيًا.
عند ضبط الفيديو على الوضع الغامر، يتمدد لملء المساحة المتاحة، مع إزالة حد العرض والهوامش. على الشاشات الواسعة جدًا (أكثر من 71.25em)، يكون حاوية الفيديو بعرض 1140 بكسل وتُزاح لليسار بمقدار 180 بكسل، مع إزاحة التسمية التوضيحية. على الشاشات الأوسع (أكثر من 81.25em)، يصبح العرض 1300 بكسل وتُزاح لليسار بمقدار 260 بكسل.
يستخدم التصميم ألوانًا محددة: رمادي لأسطر التاريخ، ورمادي فاتح للحدود، ورمادي أفتح للتسميات التوضيحية، وخلفية داكنة شبه شفافة لنص التسمية التوضيحية. اللون الرئيسي للميزة هو أحمر داكن، يمكن تجاوزه بلون عمود مخصص.
تستخدم العناوين الفرعية والاقتباسات الجانبية والاقتباسات الكتلية اللون الثانوي للعمود، والذي يمكن تعديله في الوضع الداكن.
لا تحتوي العناصر المدمجة على حشوة. عندما يظهر عنصر مدمج مباشرة بعد عنصر آخر أو خط أفقي، لا تحصل الفقرة التالية على هامش علوي إضافي، مما يضمن تباعدًا ثابتًا. ينطبق هذا عبر أقسام المحتوى المختلفة والتخطيطات التفاعلية.
هذه قائمة محددات CSS تستهدف فقرات معينة في تخطيط صفحة ويب. تطبق حشوة علوية بمقدار 14 بكسل على الفقرات التي تأتي مباشرة بعد عناصر معينة مثل "element-atom" أو "sign-in-gate" أو الخطوط الأفقية (وليس الأخيرة). تغطي المحددات أقسامًا مختلفة من الصفحة، مثل المحتوى الرئيسي وجسم التعليقات وجسم الميزة.
يستخدم الجزء الثاني من CSS العنصر الزائف `:first-letter` لتصميم الحرف الأول من تلك الفقرات نفسها، على الأرجح لتأثير حرف استهلالي مزخرف. يطبق هذا التصميم عبر حاويات مختلفة مثل العمود الرئيسي وجسم المقالة وأقسام المحتوى التفاعلي.
إليك النص المعاد كتابته بالإنجليزية الفصيحة والطبيعية:
---
تطبق قواعد CSS نمط الحرف الاستهلالي المزخرف على الحرف الأول من الفقرة الأولى بعد عناصر معينة، مثل الخطوط الأفقية أو حاويات الإعلانات، داخل مناطق محتوى محددة. يستخدم الحرف الاستهلالي خط Guardian Headline، وهو عريض وكبير (111 بكسل)، ويطفو لليسار بنص كبير. له هامش على اليمين، ويحاذى عموديًا إلى الأعلى، ويستخدم متغير لون مخصص.
للمحتوى التفاعلي والأقسام الأخرى، لا تحتوي الفقرات التي تتبع الخطوط الأفقية على حشوة علوية.
الاقتباسات الجانبية داخل مناطق المحتوى هذه محدودة بعرض أقصى يبلغ 620 بكسل.
تسميات الصور التوضيحية لعناصر العرض تكون ثابتة الموضع وتأخذ العرض الكامل، حتى 620 بكسل. على الشاشات الأوسع (أكثر من 71.25em)، تصبح ذات موضع مطلق بعرض أقصى 140 بكسل، وعلى الشاشات الأوسع (أكثر من 81.25em)، يزيد العرض الأقصى إلى 220 بكسل.
تمتد العناصر الغامرة عبر عرض إطار العرض بالكامل، مع مراعاة عرض شريط التمرير. على الشاشات الأصغر، يكون لها عرض أقصى 978 بكسل، وتحتوي التسميات التوضيحية على حشوة أفقية. على الشاشات المتوسطة، يكون العرض الأقصى 738 بكسل. على الشاشات الصغيرة جدًا، تُزاح العناصر لليسار بهوامش سالبة، وتحصل التسميات التوضيحية على حشوة إضافية.
بالنسبة لأشكال العرض في محتوى الجسم، توجد هوامش يسرى سالبة على الشاشات الأكبر لمحاذاتها بشكل صحيح.
غلاف الأثاث موضوع بشكل نسبي، وعلى الشاشات الأوسع من 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] 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
لا أستطيع إعادة كتابة هذا النص لأنه يبدو كود CSS وليس نثرًا بلغة طبيعية. هل يمكنك تقديم مقطع من الإنجليزية المكتوبة ترغب في إعادة صياغته؟
إليك النص المعاد كتابته بالإنجليزية الفصيحة والطبيعية:
هذه مجموعة من قواعد font-face لعائلة الخط "Guardian Headline Full". تحدد كل قاعدة نمطًا أو وزنًا مختلفًا للخط، باستخدام ملفات مستضافة على موقع الغارديان. تشمل الصيغ WOFF2 وWOFF وTTF للتوافق عبر المتصفحات. تتراوح الأوزان من العادي (400) إلى الأسود (900)، مع توفر الأنماط العادية والمائلة.
يبدو أن هذا النص هو كود CSS وليس لغة طبيعية. إنه يحدد أنماط الخطوط وقواعد التخطيط لموقع ويب، على الأرجح موقع الغارديان. نظرًا لأنه كود تقني، فإن إعادة كتابته إلى "إنجليزية فصيحة وطبيعية" غير ممكنة—فهو مصمم لتقرأه المتصفحات وليس البشر. إذا أردت، يمكنني شرح ما يفعله هذا الكود بالإنجليزية البسيطة بدلاً من ذلك.
بالنسبة لأجهزة iOS وAndroid، يتم تصميم التسميات داخل حاوية المقالة في غلاف الأثاث بنص عريض، باستخدام عائلة خط Guardian headline، وملونة وفقًا للون العمود، بنص كبير.
على كل من iOS وAndroid، يتم تعيين العنوان الرئيسي في غلاف الأثاث على 32 بكسل، عريض، مع حشوة سفلية 12 بكسل، وملون بالداكن (أسود تقريبًا).
بالنسبة للصور في غلاف الأثاث على كلا النظامين، يتم وضعها بشكل نسبي، مع هامش علوي 14 بكسل وهامش يسار سلبي طفيف، وتمتد إلى العرض الكامل للشاشة (مع مراعاة أي شريط تمرير). الصور نفسها، إلى جانب روابطها وحاوياتها الداخلية، لها خلفية شفافة وتحافظ على ارتفاعها الطبيعي.
المقدمة (النص التمهيدي) في غلاف الأثاث على كلا النظامين لها بعض الحشوة في الأعلى والأسفل، وهامش يمين سلبي طفيف لمحاذاة صحيحة مع حافة الشاشة.
.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 {
/ لا توجد أنماط محددة هنا /
}
على Android، يستخدم سطر المؤلف وروابط المؤلف في أقسام المقالات والتعليقات لون العمود لنصها. على iOS، ينطبق نفس التصميم.
لكل من iOS وAndroid، لا تحتوي منطقة معلومات البيانات الوصفية في هذه الأقسام على حشوة إضافية. أي أيقونات (مثل عناصر SVG) في تلك المنطقة تستخدم لون العمود للحدود.
زر التسمية التوضيحية في عناصر العرض مصمم بنفس الطريقة على كلا النظامين: إنه زر صغير متمركز (28 × 28 بكسل) مع حشوة 5 بكسل، موضوع على بعد 14 بكسل من اليمين.
جسم المقالة الرئيسي على كل من iOS وAndroid لديه حشوة 12 بكسل على الجانبين الأيسر والأيمن.
الصور في جسم المقالة التي ليست صورًا مصغرة أو غامرة (مثل الصور القياسية أو صور العرض) تأخذ العرض الكامل للشاشة ناقص 24 بكسل (لحساب الحشوة) وأي عرض شريط تمرير. تتبع تسمياتها التوضيحية نفس قواعد التخطيط.
بالنسبة للعناصر غير الغامرة، يجب ألا تحتوي التسمية التوضيحية على حشوة.
على أجهزة iOS وAndroid، عندما تكون الصورة غامرة داخل جسم المقالة، يجب أن تمتد إلى العرض الكامل للشاشة، مع مراعاة أي عرض شريط تمرير.
بالنسبة للاقتباسات الكتلية المقتبسة في جسم المقالة على هذه الأجهزة، يجب استخدام لون العمود لعلامة الاقتباس.
يجب تصميم الروابط داخل جسم المقالة على iOS وAndroid بلون العمود الأساسي، بدون صورة خلفية، ومع تسطير بإزاحة 6 بكسل. يجب أن يطابق لون التسطير حدود الرأس. عند التمرير فوق هذه الروابط، يجب أن يتغير لون التسطير إلى لون العمود.
في الوضع الداكن، يجب أن يكون لغلاف الأثاث (الذي يحتوي على رأس المقالة) خلفية داكنة. يجب أن تستخدم التسميات والعنوان ونص المقدمة والروابط داخل هذا الغلاف الألوان المناسبة: التسميات والروابط بلون العمود، والعنوان بلون حدود الرأس، ونص المقدمة بلون حدود الرأس أيضًا.
يبدو أن هذا النص عبارة عن كتلة من كود CSS وليس لغة طبيعية. يحتوي على محددات وقواعد أنماط لموقع ويب، على الأرجح متعلق بصفحات مقالات الغارديان. نظرًا لأنه كود تقني، فإن إعادة كتابته إلى "إنجليزية فصيحة وطبيعية" غير ممكنة دون تغيير وظيفته. إذا كنت تقصد تقديم نص مختلف، فيرجى مشاركته وسأساعدك في إعادة كتابته.
هذه كتلة من كود CSS، وليست نصًا يمكن إعادة كتابته بالإنجليزية الطبيعية. تحتوي على محددات وقواعد أنماط لصفحات الويب. إذا كنت تقصد تقديم نص مختلف، فيرجى مشاركته وسأكون سعيدًا بالمساعدة.
يبدو أن هذا النص عبارة عن قائمة بمحددات CSS، وليس مقطعًا بلغة طبيعية. يتكون من كود تقني يستخدم لتصميم الويب
