يحدد كود CSS هذا أنماطًا لمكتبة التمرير السلس المسماة Lenis. فهو يضمن ضبط ارتفاع الصفحة تلقائيًا ويتحكم في سلوك الفائض عند توقف التمرير. كما يعرف وجوه خطوط مخصصة لعائلة الخط "Guardian Headline Full"، بما في ذلك أوزان وأنماط متنوعة (مثل الخفيف والعادي والمتوسط وشبه الغامق، كل منها بإصدارات عادية ومائلة)، ويحمّلها من عناوين ويب محددة بصيغ ملفات مختلفة.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf) format("truetype");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf) format("truetype");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf) format("truetype");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.ttf) format("truetype");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.ttf) format("truetype");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");
font-weight: 400;
font-style: normal;
}
تتضمن عائلة الخط "Guardian Headline Full" عدة أنماط، كل منها متاح بصيغ متعددة. النمط العادي له وزن خط 400 ونمط خط عادي، مع ملفات بصيغ WOFF وWOFF2 وTrueType. النسخة المائلة لها أيضًا وزن 400 ولكن بنمط مائل. الوزن المتوسط (500) يأتي بنمطين عادي ومائل. وبالمثل، الأوزان شبه الغامقة (600) والغامقة (700) متاحة بتنويعات عادية ومائلة. الوزن الأسود مُقدم بصيغة WOFF2.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf) format("truetype");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-column-gap: 0px;
grid-template-columns: 100%;
grid-template-areas: "media" "title" "headline" "standfirst" "lines" "meta" "body";
}
@media (min-width: 30em) {
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
padding: 0 20px;
max-width: 620px;
}
}
@media (min-width: 46.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 100%;
grid-column-gap: 10px;
grid-template-areas: "title" "headline" "standfirst" "media" "lines" "meta" "body";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: 80px;
}
}
@media (min-width: 61.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas: "title right-column" "headline right-column" "standfirst right-column" "media right-column" "lines right-column" "meta right-column" "body right-column" ". right-column";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: unset;
}
}
@media (min-width: 71.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas: "title border headline right-column" ". border standfirst right-column" ". border media right-column" ". border body right-column" ". border . right-column";
}
#article-body>div .content--interactive-grid .content__standfirst,
.content--interactive>div .content--interactive-grid .content__standfirst,
#comment-body .content--interactive-grid .content__standfirst,
[data-gu-name=body] .content--interactive-grid .content__standfirst,
#feature-body .content--interactive-grid .content__standfirst {
/ تستمر القاعدة هنا /
}
}
يحدد كود CSS أنماطًا محددة لعناصر مختلفة. للمحتوى الشبكي التفاعلي، يزيل الحشو السفلي من قسم الـ standfirst ويضبط حشو التعليقات التوضيحية للأشكال الغامرة. كما يضع الخطوط والبيانات الوصفية داخل تخطيط شبكي، مع تحديد ارتفاعها وهوامشها.
على الشاشات الأكبر، تستخدم الشبكة عرض أعمدة محددًا. للأجهزة المحمولة، يعدل الطباعة في عناوين المقالات، مما يجعل أسماء الأقسام بأحرف كبيرة ويضبط أنماط أسماء المؤلفين. كما يضمن عرض الصور بشكل صحيح ويدير التباعد حول العناصر المضمنة.
يتم تصميم تلميح التمرير بخلفية متدرجة ووضعه في أسفل نافذة العرض، بينما تُعطى التعليقات التوضيحية الثابتة ارتفاعًا ثابتًا ووضعية مطلقة.
يتم وضع شريط التعليقات التوضيحية الثابتة في أسفل يسار الشاشة بخلفية داكنة. يستخدم تخطيطًا مرنًا لتفريغ محتوياته ويتضمن حشوًا. على الشاشات الأكبر، يضيف حدودًا يسارية ويضبط هامشه الأيسر.
في الداخل، يحتوي غلاف التعليقات التوضيحية على التعليقات. يستخدم كل تعليق توضيحي عرضًا مرنًا مع فجوات صغيرة بين العناصر. الأيقونات داخل التعليقات التوضيحية لها أبعاد ثابتة ولون تعبئة محدد. يستخدم نص التعليق التوضيحي خطًا معينًا، ويُقطع بنقاط عندما يكون ذلك ضروريًا، ويتطابق مع لون نص المقالة.
زر تبديل التعليقات التوضيحية شفاف وبدون حدود، ويوضع في أسفل الشريط. تدور أيقونته وتتغير بسلاسة عند التحويم. عند التوسع، يضبط شريط التعليقات التوضيحية ارتفاعه، ويعرض التعليقات بشكل طبيعي دون قطع، ويغير دوران أيقونة التبديل.
لأجهزة iOS وAndroid، تتم إزالة هوامش فقرات التعليقات التوضيحية، ويتم إظهار أو إخفاء عناصر span محددة. عند التوسع على هذه الأجهزة، تطفو فقرة التعليق التوضيحي الأولى لليسار، ويتم عرض الثانية ككتلة. على iOS، يتم أيضًا ضبط الموضع السفلي للشريط الثابت.
تحدد الخصائص المخصصة لـ CSS (متغيرات CSS) نظام ألوان داكن لعناصر المقالة المختلفة مثل الخلفية والنص والروابط واللكمات. يتم تعيين هذه المتغيرات للعنصر الجذري وعناصر المقالة، مع بعض التعديلات لحالات التحويم.
يطبق استعلام الوسائط تفضيل نظام الألوان الداكن، مع تحديد ألوان محددة لعناصر مثل الاقتباسات والخلفيات ما لم يتم اختيار نظام فاتح صراحةً.
يستخدم رأس المقالة تخطيطًا شبكيًا لترتيب مناطق مثل الوسائط والعنوان والجسم. تضيف الفئة الأفقية هامشًا علويًا وحشوًا سفليًا. لمحتوى الجسم الرئيسي هوامش جانبية سلبية على الشاشات الأصغر، والتي تتم إزالتها على الشاشات الأ
