Ez a CSS kód egy "Guardian Headline Full" nevű egyedi betűkészlet-családot definiál, több betűvastagsággal és stílussal. Tartalmaz világos, normál, közepes és félig félkövér vastagságokat, mindegyiket normál és dőlt stílusban is. A betűfájlok WOFF2, WOFF és TrueType formátumban érhetők el, a Guardian szerverein tárolva.@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;
}
div#maincontent:focus {
box-shadow: none !important;
}
#init-1, #end-1, #init-2, #end-2, #init-3, #end-3, #init-4, #end-4, #init-5, #end-5,
h2#interactive-slot-1, h2#interactive-slot-2, h2#interactive-slot-3, h2#interactive-slot-4, h2#interactive-slot-5 {
visibility: hidden;
height: 0;
margin: 0;
padding: 0;
border: none;
}
:root {
--fires-bg-color: #0b0a32;
--headline-bg-color: #0b0a32;
--custom-text-color: #fff;
--article-border: #fac99b;
--primary-accent-color: #fac99b;
--secondary-accent-color: #ff5943;
--tertiary-accent-color: #59433c;
--block-quote-fill: var(--primary-accent-color);
--share-button: var(--primary-accent-color);
--share-button-hover: var(--fires-bg-color);
--interactive-block-background-datawrapper: transparent;
--branding-border: var(--tertiary-accent-color);
--section-background: #ffffff;
--interactive-block-background: transparent;
--caption-text: var(--primary-accent-color);
--sub-meta-label-text: #fff;
--dateline: var(--secondary-accent-color);
--sub-meta-background: --fires-bg-color;
--sub-meta-text: var(--primary-accent-color);
--sub-meta-text-hover: var(--fires-bg-color);
--straight-lines: var(--primary-accent-color);
--article-meta-lines: var(--primary-accent-color);
--article-background: var(--fires-bg-color);
}
li:before {
background-color: var(--secondary-accent-color) !important;
}
body {
background-color: var(--fires-bg-color) !important;
}
.content--interactive {
background-color: transparent !important;
}
body .content--interactive h1,
body .article h1 {
order: 1;
text-align: left;
color: #fff;
min-width: 50%;
margin: 0 auto 13px 10px;
color: var(--secondary-accent-color) !important;
}
.content__standfirst p {
margin: 0 auto 13px 10px;
}
.content__label__link span {
margin: 0 0 0 10px !important;
}A konténer összefoglalónak 10 képpont bal margója van, és a szövegéhez egy meghatározott kiemelő színt használ. A data-print-layout attribútum "hide" értékre állított elemei nem jelennek meg.
Az interaktív tartalomban és cikkekben található bekezdések és főcímek egyedi szövegszíneket használnak. A főcím betűméret 3 rem-re van állítva, közepes méretű képernyőkön 2,5 rem-re módosul. A másodlagos címek világos betűvastagsággal, 32 képpont mérettel és egyedi szövegszínnel vannak stílusozva.
Az interaktív tartalom bevezető szövege elsődleges kiemelő színt használ, és maximális szélessége 320 képpont. A cikkeken és interaktív tartalmon belüli hivatkozások másodlagos kiemelő színnel vannak színezve. A címcímke hivatkozás is az elsődleges kiemelő színt használja.
A test egy átfogó színsémát határoz meg CSS egyéni tulajdonságokkal a szöveg, hátterek, vonalak, gombok, kiemelések és meghatározott márkaszínek számára. A teljes oldal háttere egy egyéni változóval van beállítva.
A cikkfejléceknek és testeknek átlátszó a hátterük. Az interaktív tartalom fő oszlopa módosítja szélességét és eltávolítja az alapértelmezett margókat. Az első ábrának és az első atom elemmel színes alsó szegélyük van.
A fő interaktív cikk konténer kitölti a teljes nézeti terület szélességét vízszintes görgetés nélkül, és egy meghatározott rács területet használ. Nagyobb képernyőkön a kialakítás többoszlopos rácsot használ. A cikk test teljesen kitölti a rácsot és elrejti a túlcsordulást.
Egy szegély elem rejtett, és a fő tartalom területének nincs felső margója. Nagyon széles képernyőknél a rács egy 1300 képpontos központi oszlopot határoz meg bal margóval a nem test elemek számára. Ez a központi oszlop és margó különböző töréspontoknál módosul különböző képernyőszélességekhez.
Az interaktív rácsban lévő nem test elemek magasabb veremezési sorrenddel rendelkeznek, és nagyobb képernyőkön oldalsó belső margót kapnak. Androidon és iOS-en a cikk testnek nincs belső margója, és a fejléc abszolút pozíciójú, átlátszó háttérrel. A szerzői sor szövege és a meta szekción belüli hivatkozások szintén átlátszóságot tartanak fenn ezeken a mobil platformokon.A szerzői sor, szerzői hivatkozások és címcímkék másodlagos kiemelő színt használnak. A meta-szerzői sor komponensnek 10 képpont bal margója van. A szerzői hivatkozásoknak 13 képpont alsó margója van. A cím és címsor szekcióknak 5vh felső belső margójuk van, a címnek emellett 4 képpont alsó belső margója is. A vonalak elem és a meta szekció szegélyei Androidon és iOS-en rejtettek.
Androidon és iOS-en a közzététel dátumának 4 képpont felső belső margója van. A meta szekcióban lévő közösségi média gombok másodlagos kiemelő színt használnak szövegükhöz és szegélyeikhez, ikonjaikat pedig ugyanezzel a színnel töltik ki. A tartalom meta konténerben lévő ikonok rejtettek. Az interaktív rácsban lévő összes nem test elemnek 10 képpont bal és jobb belső margója van. A meta területen lévő közösségi média szekciónak nincs felső szegélye, és a hozzászólás szekció rejtett. A megosztás gomb másodlagos kiemelő színre változik fehér ikonnal rámutatáskor.
Az első atom elem ábra minden oszlopot átfog 12 képpont alsó margóval. Az immerzív elem ábrák teljes szélességűek, legfeljebb 1260 képpontig, oldalsó margók nélkül, és a másodiktól az utolsó előtti oszlopig terjednek.
Kis képernyőkön (30 em alatt) a fő oszlopban lévő összes nem immerzív elemnek 10 képpont oldalsó margója van. Közepes képernyőkön (46,25 em felett) a fő interaktív oszlop relatív pozíciójú, bal oldalon függőleges vonallal. A nem atom elemek a test rács oszlopába kerülnek.
Különböző képernyőméretekhez a kialakítás meghatározott rács sablonokat használ:
- 46,25 em és 61,24 em között: háromoszlopos kialakítás.
- 61,25 em és 71,24 em között: négyoszlopos kialakítás.
- 71,25 em és 81,24 em között: ötoszlopos kialakítás bal és jobb oszlopokkal.
- 81,25 em felett: ötoszlopos kialakítás szélesebb oszlopokkal.
A cím 20dvh-ra van pozicionálva a tetejétől, teljes szélességű, felső margó nélkül. 20 em és 46,24 em közötti képernyőkön 10dvh-ra kerül. A címcímkéknek nincs szegélyük.
A címsor szintén 20dvh-nál van, teljes szélességű, sötét háttérrel, belső margóval és felső szegéllyel. Közepes képernyőkön 10dvh-ra kerül.
A standfirst 20dvh-nál van pozicionálva, teljes szélességű, sötét háttérrel és belső margóval. Közepes képernyőkön 10dvh-ra kerül.
Az interaktív rács területeket határoz meg a címsor, standfirst, média, vonalak, meta és test számára.
A meta szekció teljes szélességű, 20dvh-nál pozicionálva, sötét háttérrel és 5 z-indexszel. Közepes képernyőkön 10dvh-ra kerül. A dátumvonalnak 10 képpont bal margója van.A svelte-scroller-outer blokk megjelenítéssel és relatív pozicionálással jelenik meg.A CSS kód stílusokat határoz meg egy görgető komponenshez, és tartalmaz betűkészlet szabályokat a Guardian Headline Full betűkészlet-családhoz. A görgető blokk megjelenítéssel, relatív pozicionálással és teljes szélességgel rendelkezik. Előtere magasabb z-indexszel van beállítva és törli a lebegéseket, míg a háttér konténer abszolút pozíciójú, nincs mutatóeseménye, és a transzformáció változásokhoz van optimalizálva. A betűkészlet szabályok a Guardian szervereiről töltik be a Guardian Headline Full betűkészlet különböző vastagságait és stílusait, világos, normál, közepes és félig félkövér változatokat határozva meg normál és dőlt stílusban, WOFF2, WOFF és TTF formátumok támogatásával.A Guardian egyedi betűkészleteket használ címsoraihoz és címdarabokhoz. Ezek a betűkészletek a szervereikről töltődnek be több formátumban, mint például WOFF2, WOFF és TTF, hogy széles böngésző kompatibilitást biztosítsanak. Minden betűváltozat, mint a félkövér vagy dőlt, meghatározott vastagságokkal és stílusokkal van definiálva.
Az oldal tartalmaz egy betöltési átfedést forgó animációval, amely az adatlekérés során jelenik meg. A fő tartalom terület egy teljes képernyős térképet és egy görgethető narratív szekciót tartalmaz. Ezen szekción belüli szövegdobozok stílusos hátterrel, szegéllyel és tipográfiával rendelkeznek, a Guardian Egyptian Web betűkészletét használva törzsszöveghez. Egyes szövegrészek kiemelt háttérszínnel vannak hangsúlyozva.A CSS 12 képpontos szegély sugarat határoz meg, és betölti a Guardian Headline Full betűkészlet-családot. Ez több betűfájlt tartalmaz különböző vastagságokban és stílusokban (világos, normál, közepes, félig félkövér és dőlt változataik) a Guardian szervereiről. A fájlok WOFF2, WOFF és TrueType formátumban érhetők el, hogy széles bö
