Ez a CSS kód egy "Guardian Headline Full" nevű egyéni betűkészlet-családot definiál, amely több betűvastagsággal és stílussal rendelkezik. Tartalmazza a világos (300), normál (400), közepes (500) és félig félkövér (600) vastagságokat, mindegyik elérhető normál és dőlt változatban is. A betűfájlok WOFF2, WOFF és TrueType formátumban érhetők el a Guardian eszközszervereiről.
Ez a CSS kód számos betűkép-stílust definiál a Guardian Headline Full és Guardian Titlepiece betűkészlet-családokhoz. Minden egyes @font-face szabály különböző vastagságokat és stílusokat (normál vagy dőlt) határoz meg, és több fájlformátumot (WOFF2, WOFF és TrueType) biztosít a böngészőkompatibilitás érdekében. A betűtípusok a Guardian eszközszerverén hosztolódnak, és a világostól a feketéig terjedő vastagságváltozatokat tartalmaznak, ahol alkalmazható, a megfelelő dőlt stílusokkal.
```css
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
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-Medium.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.ttf) format("truetype");
font-weight: 500;
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-MediumItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.ttf) format("truetype");
font-weight: 500;
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-Semibold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.ttf) format("truetype");
font-weight: 600;
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-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;
}
```
Ez a CSS kód egy weboldal elrendezésének stílusait határozza meg, beállítva elemeket, mint például a főcímek, meta információk és média a képernyő mérete alapján. A főcímek félkövér betűstílusra vannak állítva meghatározott szélességgel és betűmérettel, amely nagyobb képernyőméreteknél változik. Közepes képernyőméreteknél egyes margók eltávolításra kerülnek, nagyobb képernyőméreteknél pedig bizonyos vonalak elrejtésre kerülnek. A közösségi és hozzászólási elemeknek a fejléc színével megegyező szegélye van, és egyes komponensek nem jelennek meg.
A bevezető szöveg szakasznak bal oldali kitöltése és pozicionálása van, a bekezdések szövege normál vastagságú és nagyobb betűméretű. A fő média elemek relatívan pozicionáltak, teljes szélességet vesznek fel kisebb képernyőméreteknél, és igazítják a margókat. A feliratok egy háttérszínnel és szövegszínnel vannak stílusozva, alul pozicionálva, és tartalmaznak egy gombot a láthatóság váltásához, amely jobb oldalon jelenik meg. Interaktív tartalom oldalakon a címsoroknak maximális szélessége van, és sötét mód támogatás is be van kapcsolva iOS és Android eszközökre, színváltozókkal a funkciókhoz és hátterekhez.
Az interaktív rácsos ábrák számára, amelyek magukba foglaló feliratokkal rendelkeznek a szövegtörzsben, a funkció szövegtörzsben vagy a data-gu-name szövegtörzsben, a felirat kitöltése felül 4 képpont, máshol 0.
Különböző tartalmi területeken, mint a cikk szövegtörzse, interaktív tartalom, hozzászólás szövegtörzse és funkció szövegtörzse, a vonalak és meta rács területei a 2-től 5-ig sorok és 1-től 2-ig oszlopok között vannak meghatározva. A vonalak maximális tartalommagassággal és 5 képpont felső margóval rendelkeznek, míg a meta elemeknek 18 képpontos felső margójuk van.
Nagyobb képernyőméreteknél, legalább 81.25em szélességnél, ezen tartalmi területek rács sablon oszlopai 219px, 1px, 620px, 80px és 300px-re vannak beállítva.
iOS és Android eszközökre a cikk fejlécének bevezető szövege specifikus betűkészlet-családokat használ közepes vastagsággal. A cikk kikker szakasz blokkként jelenik meg, és annak első betűje nagybetűs. A keyline-4 elemnek 12 képpontos felső kitöltése van.
A meta egyéb szakaszában a szerzői sorban a szerző félkövér betűkészlet-családot használ, és a benne lévő hivatkozások szintén félkövérek. A cikkek képes ábráinak automatikus a magassága, és az atomi elemeket követő bekezdéseknek nincs felső margójuk.
A Guardian Headline Full betűkép-stílusai világos és világos dőlt vastagságokkal vannak definiálva, forrásként woff2, woff és truetype fájlokkal szolgálva.
A Guardian Headline Full betűkészlet-család különféle stílusokat és vastagságokat tartalmaz, mint például normál, közepes, félig félkövér és félkövér, mindegyik elérhető normál és dőlt változatban. Ezek a betűtípusok online hosztolva vannak, és különböző fájlformátumokban, mint WOFF2, WOFF és TrueType tölthetők be webes használatra.
```css
@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;
}
@media (min-width: 71.25em) {
.content__main-column--interactive {
margin-left: 160px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive {
margin-left: 240px;
}
}
.content__main-column--interactive .element-atom {
max-width: 620px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-atom {
max-width: 100%;
}
}
.content__main-column--interactive .element-showcase {
margin-left: 0;
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-showcase {
max-width: 620px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-showcase {
max-width: 860px;
}
}
.content__main-column--interactive .element-immersive {
max-width: 1100px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-immersive {
width: calc(100vw - var(--scrollbar-width));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width)) !important;
}
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}
@media (max-width: 71.24em) {
.content__main-column--interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(0);
width: auto;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive .element-immersive {
max-width: 1260px;
}
}
.content__main-column--interactive p,
.content__main-column--interactive ul {
max-width:
