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, mindegyik normál és dőlt változatban. 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://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://interactive.guim.co.uk/fonts/garnett/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: 620px;
}
.content__main-column--interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: "";
}
@media (min-width: 71.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
Az interaktív tartalom oszlopának bal oldali szegélye és meghatározott térközei vannak az elemek számára. A bizonyos elemeket követő bekezdéseknek extra felső belső margója van, és ezen bekezdések első betűje nagy, színes süllyesztett iniciálként van stílusozva. A soron belüli elemek és ábrák maximális szélessége nagyobb képernyőkön 620px. Különböző színváltozók vannak definiálva az egységes témázáshoz.
A bizonyos konténerekben lévő idézetek maximális szélessége 620 képpont legyen.
A fő tartalomban és cikk konténerekben lévő bemutató elemek feliratai statikusan pozícionálva legyenek, teljes szélességgel, maximum 620 képpontig.
Az immerzív elemek a teljes nézeti szélességet lefedjék, mínusz a görgetősáv. Nagyobb képernyőkön maximum 978 képpontra korlátozódnak, a felirat belső margója közepes képernyőkön módosul. Középméretű képernyőkön a maximális szélesség 738 képpont. Kisebb képernyőkön az immerzív elemek a bal széléhez igazodnak, módosított margókkal és felirat belső margóval.
Nagyobb képernyőkön a bútor burkolóknál rács elrendezést használunk, meghatározott oszlopokkal és sorokkal. A főcímeknek felső szegélye van, a meta szakaszok relatívan pozícionáltak, a bevezető tartalom tartalmaz specifikus stílusozást a linkekhez és bekezdésekhez. A burkolón belüli ábráknak nincs bal margójuk, és maximum 630 képpont szélesek lehetnek, ha soron belüliek. Extra nagy képernyőkön a rács sablon oszlopai módosulnak.
A CSS egy rács elrendezést definiál egy cikk fejlécéhez, meghatározott területekkel a cím, főcím, bevezető, meta információk és egy portré kép számára. Szegélyek, tipográfia és térköz stílusait állítja be, ezeket a tulajdonságokat módosítva különböző képernyőméretekhez média lekérdezésekkel. Például a főcím betűmérete nagyobb képernyőkön nő, és bizonyos elemek elrejtődnek vagy áthelyeződnek a nézeti terület változásával. A fő média terület úgy van konfigurálva, hogy mobileszközökön teljes szélességű legyen.
A CSS kód stílusokat definiál egy weboldal elrendezéséhez, egy bútor burkoló elemre fókuszálva. Háttérszíneket, margókat, belső margókat és reszponzív viselkedést állít be különböző képernyőméretekhez. A stílusok tartalmaznak egyéni tulajdonságokat a színekhez, mint például sötét mód funkciók és fejléc szegélyek. Konkrét szabályok irányítják a feliratok, gombok, főcímek és meta információk megjelenését, a rámutatási effektusok és közösségi média ikonok módosításaival. A média lekérdezések biztosítják, hogy az elrendezés mobiltól asztali nézetekig alkalmazkodjon, beleértve a szélesebb képernyőket, ahol oldalsó háttérek kerülnek hozzáadásra.
Ez a CSS kód stílusokat definiál egy weboldal komponenshez, valószínűleg egy oldalsávhoz vagy tartalom burkolóhoz. Színeket, szegélyeket és elrendezési módosításokat állít be különböző elemekhez, mint a linkek, szöveg és közösségi média ikonok. A stílusok média lekérdezésekkel alkalmazkodnak különböző képernyőméretekhez, a szélességeket és szegélyeket módosítva, hogy nagyobb képernyőkön illeszkedjenek. A színeket CSS változókkal kezeli a témákhoz, mint például sötét mód.
A CSS kód stílusokat definiál cikk elemekhez és betölt egyéni betűkészleteket. Beállítja a hozzászólások szegély színét, hogy egyezzen a fejléc szegély színével. A cikk címsoraihoz könnyű betűvastagságot használ, de a félkövér szöveget tartalmazó címsorokat félkövérré teszi. A kód importálja a Guardian Headline betűkészlet családot különböző vastagságokban és stílusokban, beleértve a könnyű, normál, közepes és félig félkövér változatokat, mind normál, mind dőlt verzióban.
A "Guardian Headline Full" betűkészlet több stílussal van definiálva: félig félkövér dőlt (vastagság 600), félkövér (vastagság 700), félkövér dőlt (vastagság 700), fekete (vastagság 900) és fekete dőlt (vastagság 900). Minden stílus tartalmaz betűfájlokat WOFF2, WOFF és TrueType formátumban.
Ezen kívül a "Guardian Titlepiece" betűkészlet is definiálva van félkövér stílusban (vastagság 700), szintén WOFF2, WOFF és TrueType fájlokkal.
iOS és Android eszközökhöz egy sötét háttérszín (#1a1a1a) és specifikus funkció színek vannak beállítva. Sötét módban a funkció szín ennek megfelelően módosul.
iOS és Android rendszereken speciális stílusozás vonatkozik a cikk konténerekben lévő első bekezdés első betűjére, bizonyos elemeket követve, mint például `.element-atom` vagy bejelentkezési kapuk.
Android eszközökön a standard és hozzászólás cikkek első bekezdésének első betűje a másodlagos pillér színnel van stílusozva. iOS és Android rendszereken egyaránt a cikk fejlécek el vannak rejtve, és a bútor burkolónak specifikus belső margója van. A bútor burkolón belüli címkék félkövér, nagybetűs betűtípust használnak egy új pillér színnel. A főcímek 32px-re, félkövérre vannak állítva, alsó belső margóval és sötét színnel. A kép ábrák relatívan pozícionáltak, teljes szélességű margókkal és automatikus magassággal.
Android eszközökön a cikk konténerekben lévő képeknek átlátszó háttérrel kell rendelkezniük, lefedniük a teljes nézeti szélességet (figyelembe véve a görgetősávokat), és automatikusan kell igazodniuk a magasságukhoz.
iOS és Android rendszereken egyaránt a cikkek bevezető szövegének specifikus térközökkel kell rendelkeznie: 4 képpont belső margó felül, 24 képpont alul és 10 képpont negatív margó jobbra.
A bevezető szöveg belsejében lévő bekezdéseknek a Guardian főcím betűkészlet családját kell használniuk.
A szöveg belsejében lévő linkeket egy specifikus színnel kell stílusozni, egy aláhúzással, amely 6 képpontra van pozícionálva a szöveg alatt, és világosszürke aláhúzó színnel. Nem lehet háttérképük vagy alsó szegélyük. Rámutatáskor az aláhúzásnak a link szövegének színéhez kell változnia.
Ezen kívül a cikk metaadat szakaszának konzisztensen kell stílusozva lennie mindkét operációs rendszerhez.
Ez a CSS kód stílusokat állít be Android és iOS eszközökön lévő cikk konténerekhez. Módosítja a margókat, színeket, belső margókat és gombok megjelenítését különböző cikktípusokhoz és azok összetevőihez.
iOS és Android eszközökön, a feature, standard és hozzászólás cikk konténerekben, a nem bélyegkép vagy immerzív képeknek nulla margójuk van, a nézeti terület mínusz 24 képpont és a görgetősáv szélességéből számított szélességük, és automatikus magasságuk. A felirataiknak nincs belső margójuk.
Ezekben a konténerekben az immerzív képeknek a nézeti terület mínusz a görgetősáv szélességéből számított szélességük van.
A cikk törzsében lévő próza belsejében, idézett idézőblokkok a dekoratív elemükhöz az új pillér színt használják. A linkek az elsődleges pillér színnel vannak stílusozva, egy 6px eltol
