Ez a CSS kód egy "Guardian Headline Full" nevű egyéni betűkészlet-családot definiál, több betűvastagsággal és stílussal. Tartalmazza a könnyű, normál, közepes és félig félkövér vastagságokat, mindegyiket normál és dőlt változatban. Minden stílushoz a kód három különböző betűfájl-formátumot (woff2, woff és ttf) biztosít, amelyek a Guardian szerverein találhatók, biztosítva ezzel a széles böngészőkompatibilitást.
@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;
}
@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;
}
A "Guardian Headline Full" betűtípus több stílussal és vastagsággal van definiálva. A normál dőlt stílus a 400-as betűvastagságot használja, és tartalmaz woff2, woff és ttf formátumú fájlokat. A közepes stílus 500-es vastagságú és normál (nem dőlt). A közepes dőlt szintén 500-es vastagságot használ, de dőlt stílusban. Hasonlóképpen, a félig félkövér (600-as vastagság) és a félkövér (700-es vastagság) is rendelkezik normál és dőlt változattal. A fekete stílus (900-es vastagság) normál, és annak dőlt változata is definiálva van. Minden betűfájl a megadott URL-eken található.
A megadott szöveg CSS betűdefiníciók és egy weboldal (valószínűleg a The Guardian) reszponzív rács elrendezési szabályainak keveréke. Itt egy folyékony, természetes angol újrafogalmazás, amely leegyszerűsíti a technikai megfogalmazást, miközben megtartja a jelentést:
Ez a CSS kód egyéni betűtípusokat és a cikktartalom elrendezését határozza meg. Két betűtípust határoz meg: "Guardian Headline"-t nehéz dőlt stílusban és "Guardian Titlepiece"-t félkövérben.
Az elrendezés egy rácsrendszert használ, amely a képernyőmérettől függően változik. A legkisebb képernyőméretnél a rács egyetlen oszlop, a területek függőlegesen egymás alatt helyezkednek el a média, cím, főcím és egyéb elemek számára. Ahogy a képernyő szélesebbé válik, az elrendezés módosul. Közepes képernyőméretnél a rács továbbra is egyetlen oszlop, de néhány terület sorrendje megváltozik. Nagyobb képernyőméretnél kétoszlopos elrendezésre vált, fő tartalomterülettel és jobb oldali oldalsávval. A legszélesebb képernyőméretnél bal oldali szegélyt vezet be, és tovább finomítja az összes rács terület elhelyezését, beleértve a főcímet és az oldalsávot.
Az interaktív rács ábrákhoz, melyeknek immerzív felirataik vannak, a felirat belső margója 4 képpont felül és 0 máshol. A cikk, komment vagy feature tartalomtestek különböző tartalmi területein belül a "lines" és "meta" nevű elemek a rács 2. sorának 1. oszlopától az 5. sor 2. oszlopáig helyezkednek el. A "lines" elemek magassága a tartalomhoz igazodik, és 5 képpont felső margóval rendelkeznek, míg a "meta" elemek 18 képpont felső margóval.
Szélesebb képernyőméretnél (81.25 em felett) ezek az interaktív rácsok egy specifikus oszlopelrendezést használnak: 219px, 1px, 620px, 80px és 300px.
iOS és Android eszközökön a cikkfejlécek specifikus betűtípusokat használnak: a bevezető szöveg Guardian Headline vagy hasonló serif betűtípust használ közepes vastagsággal, a szekció jelzők blokkként jelennek meg nagybetűvel kezdődő első betűvel, a kulcsszegélyek 12 képpont felső belső margóval rendelkeznek, és a szerzők félkövér serif betűtípusban jelennek meg. A cikkeken belül a képábrák automatikus magassággal rendelkeznek, és az atomi elemeket követő bekezdéseknek nincs felső margójuk.
Ezen kívül egyéni betűkészletek vannak definiálva a Guardian Headline Full számára könnyű és könnyű dőlt vastagságban, amelyek specifikus woff2, woff és ttf fájlokból származnak.
A megadott szöveg egy "Guardian Headline Full" nevű betűkészlet-család CSS @font-face szabályainak sorozatának tűnik. Ezek a szabályok különböző betűvastagságokat és stílusokat határoznak meg (mint a normál, dőlt, közepes, félkövér stb.), és meghatározzák a webcímeket, ahol a betűfájlok különböző formátumokban (WOFF2, WOFF és TTF) megtalálhatók.
@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, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !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
