این یک بلوک کد CSS است که خانواده فونت «Guardian Headline Full» را برای استفاده در وبسایت تعریف میکند. شامل چندین قانون font-face است که هر کدام وزن متفاوت (سبک، معمولی، متوسط، نیمهپررنگ) و سبک (معمولی یا ایتالیک) فونت را مشخص میکنند. برای هر تغییر، کد فایلهای فونت را در قالبهای مختلف (WOFF2، WOFF و TTF) فراهم میکند تا سازگاری با مرورگرهای مختلف تضمین شود. فایلهای فونت در سرور داراییهای گاردین میزبانی میشوند.
این متن به نظر میرسد کد CSS باشد، نه نثر زبان طبیعی. سبکهای فونت و قوانین چیدمان را برای یک صفحه وب تعریف میکند. از آنجا که کد فنی است، بازنویسی آن به انگلیسی روان کاربرد ندارد. اگر منظورتان به اشتراکگذاری متن دیگری بود، لطفاً آن را ارائه دهید و خوشحال میشوم کمک کنم.
left: -11px.
ستون محتوای اصلی برای مقالات تعاملی هیچ حاشیه یا padding دور عناصر جاسازیشده ندارد، با ۱۲ پیکسل padding در بالا و پایین. وقتی یک پاراگراف با یک عنصر جاسازیشده دنبال میشود، padding حذف و با حاشیههای ۱۲ پیکسلی در هر دو طرف جایگزین میشود. عناصر درونخطی به حداکثر عرض ۶۲۰ پیکسل محدود میشوند. در صفحهنمایشهای عریضتر از ۶۱.۲۵em، شکلهای علامتگذاریشده بهعنوان درونخطی نیز به ۶۲۰ پیکسل محدود میشوند.
برای بخشهای رسانهای حاوی ویدیوهای حلقهای، زیرنویس با z-index برابر ۶ در بالا لایهبندی میشود و دکمه حلقه در پایین سمت راست با حاشیه پایین ۴۰ پیکسل و حاشیه راست ۳ پیکسل قرار میگیرد. دکمههای بیصدا و با صدا به سمت راست با padding چپ اضافی تراز میشوند. دکمه زیرنویس z-index بالایی دارد و در صفحهنمایشهای بزرگتر، ۲۰ پیکسل از پایین فاصله دارد. برای ویدیوهای سینماگراف در صفحهنمایشهای عریضتر از ۴۶.۲۵em، محدودیت ارتفاع حذف میشود.
در بخش body، ویدیوهای خودمیزبان بهصورت بلوک با حداکثر عرض ۶۲۰ پیکسل و حاشیههای ۱۲ پیکسلی نمایش داده میشوند. ویدیوهای حلقهای و عناصر ویدیویی آنها عرض کامل را پر میکنند، نسبت تصویر را حفظ میکنند و در مرکز قرار میگیرند. اگر ویدیوی حلقهای روی حالت همهجانبه تنظیم شود، با بدون حاشیه به عرض کامل گسترش مییابد. در صفحهنمایشهای عریضتر از ۷۱.۲۵em، ویدیوهای همهجانبه به عرض ۱۱۴۰ پیکسل کشیده میشوند و ۱۸۰ پیکسل به چپ منتقل میشوند، با زیرنویسهایی که ۲۰ پیکسل تورفتگی دارند. در صفحهنمایشهای عریضتر از ۸۱.۲۵em، آنها به ۱۳۰۰ پیکسل رشد میکنند و ۲۶۰ پیکسل به چپ منتقل میشوند.
طراحی از متغیرهای CSS برای رنگها استفاده میکند: dateline خاکستری تیره است، حاشیههای سرصفحه خاکستری روشن، زیرنویسها خاکستری متوسط با پسزمینه تیره نیمهشفاف، و رنگ ویژه قرمز تیره است. رنگ ستون اصلی بهطور پیشفرض به رنگ ویژه تنظیم میشود. زیرعنوانها، نقلقولهای کشیده و نقلقولهای بلوکی از رنگ ستون ثانویه استفاده میکنند که در حالت تیره با سایه متفاوت سازگار میشود.
ستونهای محتوای تعاملی هیچ padding دور عناصر جاسازیشده ندارند. وقتی یک عنصر جاسازیشده بلافاصله بعد از عنصر دیگر یا خط افقی ظاهر میشود، پاراگراف بعدی هیچ حاشیه بالای اضافی دریافت نمیکند. این در انواع مختلف ظروف، از جمله بدنه اصلی مقاله و بخشهای تعاملی اعمال میشود.
این یک لیست انتخابگر CSS فنی است، بنابراین بازنویسی آن به «انگلیسی روان و طبیعی» ساده نیست. با این حال، میتوانم قصد را ساده و به انگلیسی ساده توضیح دهم:
---
این قوانین CSS برای پاراگرافهایی اعمال میشوند که بلافاصله بعد از عناصر خاصی (مانند ویجتهای تعاملی، اعلانهای ورود یا خطوط افقی) در بخشهای مختلف محتوا قرار میگیرند. قانون اول padding بالای اضافی (۱۴ پیکسل) به آن پاراگرافها اضافه میکند. قانون دوم حرف اول آن پاراگرافها را با افکت حرف اول بزرگ (drop cap) سبکدهی میکند.
---
اگر منظورتان بازنویسی خود CSS برای وضوح بود، این نسخه فشرده است:
```css
/* فاصله بالای پاراگرافهایی که بعد از عناصر خاص میآیند */
.element-atom:first-of-type + p:first-of-type,
.sign-in-gate + p:first-of-type,
#sign-in-gate + p:first-of-type,
.element-atom + p:first-of-type,
hr:not(.last-horizontal-rule) + p,
hr:not(.last-horizontal-rule) + .ad-slot-container + p {
padding-top: 14px;
}
/* اعمال حرف اول بزرگ به حرف اول آن پاراگرافها */
.content__main-column--interactive .element-atom:first-of-type + p:first-of-type::first-letter,
.content__main-column--interactive .sign-in-gate + p:first-of-type::first-letter,
.content__main-column--interactive #sign-in-gate + p:first-of-type::first-letter,
.content__main-column--interactive .element-atom + p:first-of-type::first-letter,
.content__main-column--interactive hr:not(.last-horizontal-rule) + p::first-letter,
.content__main-column--interactive hr:not(.last-horizontal-rule) + .ad-slot-container + p::first-letter,
#article-body > div .element-atom:first-of-type + p:first-of-type::first-letter,
#article-body > div .sign-in-gate + p:first-of-type::first-letter,
#article-body > div #sign-in-gate + p:first-of-type::first-letter,
#article-body > div .element-atom + p:first-of-type::first-letter,
#article-body > div hr:not(.last-horizontal-rule) + p::first-letter,
#article-body > div hr:not(.last-horizontal-rule) + .ad-slot-container + p::first-letter,
.content--interactive > div .element-atom:first-of-type + p:first-of-type::first-letter,
.content--interactive > div .sign-in-gate + p:first-of-type::first-letter,
.content--interactive > div #sign-in-gate + p:first-of-type::first-letter,
.content--interactive > div .element-atom + p:first-of-type::first-letter,
.content--interactive > div hr:not(.last-horizontal-rule) + p::first-letter,
.content--interactive > div hr:not(.last-horizontal-rule) + .ad-slot-container + p::first-letter,
#comment-body .element-atom:first-of-type + p:first-of-type::first-letter,
#comment-body .sign-in-gate + p:first-of-type::first-letter,
#comment-body #sign-in-gate + p:first-of-type::first-letter,
#comment-body .element-atom + p:first-of-type::first-letter,
#comment-body hr:not(.last-horizontal-rule) + p::first-letter,
#comment-body hr:not(.last-horizontal-rule) + .ad-slot-container + p::first-letter,
[data-gu-name="body"] .element-atom:first-of-type + p:first-of-type::first-letter,
[data-gu-name="body"] .sign-in-gate + p:first-of-type::first-letter,
[data-gu-name="body"] #sign-in-gate + p:first-of-type::first-letter,
[data-gu-name="body"] .element-atom + p:first-of-type::first-letter,
[data-gu-name="body"] hr:not(.last-horizontal-rule) + p::first-letter,
[data-gu-name="body"] hr:not(.last-horizontal-rule) + .ad-slot-container + p::first-letter {
/* سبک حرف اول بزرگ اینجا قرار میگیرد */
}
```
---
اگر چیز دیگری منظورتان بود، لطفاً شفافسازی کنید و بر اساس آن تنظیم میکنم.
در اینجا متن بازنویسیشده به انگلیسی روان و طبیعی آمده است:
---
قوانین CSS سبکدهی خاصی را به حرف اول پاراگراف اول بعد از عناصر خاصی (مانند خطوط افقی یا ظروف تبلیغاتی) در بخشهای خاصی از صفحه اعمال میکنند. این حرف اول بهصورت یک حرف بزرگ، پررنگ و با حروف بزرگ با استفاده از فونت تیتر گاردین، با اندازه ۱۱۱ پیکسل و ارتفاع خط ۹۲ پیکسل سبکدهی میشود. به سمت چپ شناور است، حاشیه در سمت راست دارد و از رنگی استفاده میکند که توسط یک ویژگی سفارشی تعریف شده است (با بازگشت به رنگ ستون).
برای پاراگرافهایی که بعد از یک خط افقی (با یا بدون ظرف تبلیغاتی) میآیند، padding بالا حذف میشود.
نقلقولهای کشیده (نقلقولهای برجسته) در مناطق محتوای اصلی به حداکثر عرض ۶۲۰ پیکسل محدود میشوند.
برای تصاویر نمایشی (تصاویر بزرگ ویژه)، زیرنویس بهصورت ایستا قرار میگیرد و عرض کامل، تا ۶۲۰ پیکسل را اشغال میکند. در صفحهنمایشهای عریضتر (بیش از ۷۱.۲۵em)، زیرنویس کاملاً مطلق با حداکثر عرض ۱۴۰ پیکسل میشود و در صفحهنمایشهای حتی عریضتر (بیش از ۸۱.۲۵em)، حداکثر عرض به ۲۲۰ پیکسل افزایش مییابد.
عناصر همهجانبه (تصاویر یا ویدیوهای تمامعرض) عرض کامل viewport را با در نظر گرفتن عرض نوار اسکرول پوشش میدهند. در صفحهنمایشهای کوچکتر (زیر ۷۱.۲۴em)، آنها به ۹۷۸ پیکسل محدود میشوند و زیرنویس padding افقی دریافت میکند (۱۰ پیکسل در صفحهنمایشهای بسیار کوچک، ۲۰ پیکسل در صفحهنمایشهای کمی بزرگتر). بین ۴۶.۲۵em و ۶۱.۲۴em، حداکثر عرض ۷۳۸ پیکسل است. در صفحهنمایشهای بسیار کوچک (زیر ۴۶.۲۴em)، عنصر با حاشیههای منفی به لبه چپ کشیده میشود و padding زیرنویس بر اساس آن تنظیم میشود.
در صفحهنمایشهای بزرگتر (بیش از ۷۱.۲۵em)، شکلهای نمایشی در بدنه با حاشیه منفی ۱۶۰ پیکسل به چپ منتقل میشوند و در صفحهنمایشهای حتی بزرگتر (بیش از ۸۱.۲۵em)، این مقدار به ۲۴۰ پیکسل افزایش مییابد.
ظرف مبلمان (ظرفی برای عناصر چیدمان خاص) بهصورت نسبی قرار میگیرد و در صفحهنمایشهای عریضتر از ۶۱.۲۵em، سبکدهی اضافی اعمال میشود (اگرچه قانون اینجا قطع شده است).
.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) برای سازگاری با مرورگرها اشاره میکند. سبکها شامل معمولی، ایتالیک، متوسط، متوسط ایتالیک، نیمهپررنگ، نیمهپررنگ ایتالیک، پررنگ، پررنگ ایتالیک و سیاه هستند. فایلهای فونت در سرور داراییهای گاردین میزبانی میشوند.
این متن به نظر میرسد کد CSS باشد، نه زبان طبیعی. سبکهای فونت و قوانین چیدمان را برای یک وبسایت، احتمالاً وبسایت گاردین، تعریف میکند. از آنجا که کد فنی است، بازنویسی آن به «انگلیسی روان و طبیعی» کاربرد ندارد. با این حال، میتوانم خلاصهای به انگلیسی ساده از آنچه کد انجام میدهد ارائه دهم:
---
این کد فونتهای سفارشی را تنظیم میکند و چیدمان را برای دستگاههای موبایل (iOS و اندروید) تنظیم میکند. سه نوع فونت تعریف میکند: «Guardian Headline Full» در سبکهای معمولی، پررنگ و ایتالیک، بهعلاوه «Guardian Titlepiece» در پررنگ. همچنین طرحهای رنگی را برای حالت تیره تنظیم میکند و از قرمز بهعنوان رنگ اصلی تأکید استفاده میکند. برای مقالات موبایل، سرصفحه را پنهان میکند، فاصلهها را تنظیم میکند و اطمینان حاصل میکند که حرف اول پاراگرافهای خاص از رنگ خاصی استفاده میکند. کد ظروف مقاله خاصی را هدف قرار میدهد و این سبکها را فقط در پلتفرمهای موبایل اعمال میکند.
برای دستگاههای iOS و اندروید، برچسبهای داخل ظرف مبلمان مقاله با متن پررنگ، با استفاده از خانواده فونت تیتر گاردین، و با رنگ ستون رنگآمیزی میشوند، با متن با حروف بزرگ.
در هر دو iOS و اندروید، تیتر اصلی در ظرف مبلمان ۳۲ پیکسل، پررنگ، با ۱۲ پیکسل padding پایین تنظیم میشود و به رنگ تیره (تقریباً سیاه) است.
برای تصاویر در ظرف مبلمان در هر دو پلتفرم، آنها بهصورت نسبی قرار میگیرند، با حاشیه بالای ۱۴ پیکسل و حاشیه چپ منفی ۱۰ پیکسل. عرض تصویر کل عرض viewport را پوشش میدهد (با در نظر گرفتن هر نوار اسکرول) و ارتفاع بهطور خودکار تنظیم میشود. خود تصویر، همراه با ظرف داخلی و پیوند آن، پسزمینه شفاف دارد و همان اندازهگیری عرض کامل را با ارتفاع خودکار حفظ میکند.
متن مقدماتی (standfirst) در ظرف مبلمان در هر دو پلتفرم ۴ پیکسل padding بالا و ۲۴ پیکسل padding پایین دارد، با حاشیه راست منفی ۱۰ پیکسل. پاراگرافهای داخل متن مقدماتی بر اساس آن سبکدهی میشوند
