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 változatban. A betűtípusok a Guardian szervereiről töltődnek be WOFF2, WOFF és TrueType formátumban, hogy biztosítsák a kompatibilitást a különböző böngészők között.
@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;
}
@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--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) {
}
Az interaktív tartalom oszlopokhoz bal oldali szegélyt adnak hozzá, meghatározott pozicionálással és z-indexszel. Nagyobb képernyőkön a szegély bal pozíciója kissé módosul. Ezeken belül az atomi elemeknek nincs felső vagy alsó margójuk, de tartalmaznak belső térközt. Ha bekezdések előzik meg az atomi elemeket, a belső térköz eltűnik, és helyette margók kerülnek hozzáadásra. A soron belüli elemek maximális szélessége korlátozott.
Közepes képernyőkön és afölött a beágyazott ábrák maximális szélessége be van állítva. A hurok-ábrákat tartalmazó média szakaszokban a feliratok a tetejére kerülnek rétegezésre, és a hurok gombok stílusa meghatározott méretekkel és igazítással rendelkezik. A felirat gombok a tetejére kerülnek.
A test szakaszban a saját szerveren tárolt videó szigetek teljes szélességet vesznek fel egy maximumig, középre igazított margókkal. A hurok-ábrák és a videók ezen szigeteken belül szintén teljes szélességet vesznek fel. Az immerzív video elemek esetében a szélességi korlátozások megszűnnek, és a margók módosulnak. Nagyobb képernyőkön az immerzív videók szélességben bővülnek és balra tolódnak, a feliratok pedig ennek megfelelően behúzódnak.
A színváltozók különböző felhasználói felületi elemeket határoznak meg, mint például dátumvonalak, szegélyek, feliratok és funkciószínek, a pillérszínek pedig befolyásolják az alcímeket, idézeteket és blokkidézeteket. Sötét módban ezek a színek a sötét téma szerint alkalmazkodnak.
A tartalom oszlopokon belüli atomi elemeknek nincs belső térközük. Konkrét szabályok módosítják az első bekezdéseket bizonyos elemek vagy vízszintes vonalak után a különböző tartalmi területeken, mint a cikkek, interaktív tartalmak, hozzászólások és funkciók, biztosítva a megfelelő térközölést és elrendezést.
A bejelentkezési kapu vagy egy vízszintes vonal (kivéve az utolsót) utáni első bekezdés felső belső térköze 14 képpont.
Az első betűje az első bekezdésnek, amely bizonyos elemeket követ, mint egy atom, bejelentkezési kapu vagy vízszintes vonal (nem az utolsó) a különböző tartalmi területeken (cikk test, interaktív tartalom, hozzászólások, funkciók vagy `data-gu-name` attribútummal rendelkező elemek, amelynek értéke "body"), speciális kiemelt betűstílust kap. Ez a stílus meghatározott címsor betűtípusokat használ, a betűméretet 111px-re állítja 92px-es sormagassággal, balra lebegtet, nagybetűssé teszi, 8px jobb margót ad hozzá, a szöveg tetejéhez igazítja, és egy egyéni változóval színezi a kiemelt betűket.
A bekezdések, amelyek közvetlenül egy vízszintes vonalat követnek ezekben a tartalmi területeken, ne kapjanak felső belső térközt.
Az idézetek ezeken belül a tartalmi területeken legfeljebb 620 képpont szélesek lehetnek.
A fő tartalomban, funkciócikkekben, szabványos cikkekben és hozzászólási szakaszokban található bemutató elemek feliratai statikusan pozicionáltak, teljes szélességet vesznek fel maximum 620 képpontig.
Az immerzív elemek a teljes nézeti szélességet lefedik, figyelembe véve a görgetősávot. Nagyobb képernyőkön (71.24em-ig) a maximális szélességük 978px, a felirat belső térköze pedig különböző töréspontokon módosul. Közepes képernyőkön (46.25em és 61.24em között) a maximális szélesség 738px. Kisebb képernyőkön (46.24em alatt) az immerzív elemek a bal széléhez igazodnak, módosított margókkal és felirat belső térközzel.
Szélesebb képernyőkön (61.25em felett) a bútor burkoló CSS Grid elrendezést használ meghatározott oszlopokkal és sorokkal az olyan elemek pozicionálásához, mint a cím, főcím, metaadatok, bevezető és portré terület.
A CSS stílusok egy cikk komponensek elrendezési burkolóját határozzák meg. A főcímeknek felső szegélyük van, és méretük 32px-ről 50px-re nő nagyobb képernyőkön, a maximális szélességük is változik. A meta információk széles képernyőkön dekoratív felső vonalat tartalmaznak. A bevezető szakasz aláhúzott linkekkel rendelkezik egyéni színnel, amely hover állapotban változik, és első bekezdésének kisebb képernyőkön felső szegélye van, amely nagyobb képernyőkön eltűnik. Egy függőleges elválasztó vonal jelenik meg a bevezetőben széles képernyőkön.
Elrendezési rácsok vannak meghatározva 71.25em és szélesebb, valamint 81.25em és szélesebb képernyőkön, meghatározva az oszlop- és sorsablonokat az olyan elemek pozicionálásához, mint a cím, főcím, meta, bevezető és portré területek. Az ábráknak konkrét margói és maximális szélességeik vannak. Összességében a stílusok irányítják a cikk fejléceinek és bevezető tartalmának reszponzív megjelenítését.
740px-nél szélesebb képernyőkön rejtse el a `.keyline-4` osztállyal vagy a `[data-gu-name="lines"]` attribútummal rendelkező elemeket. A `.furniture-wrapper` belül stílusozza az ezen elemeken belüli SVG vonalakat egy egyéni színváltozóval.
Közepes képernyőkön és afölött távolítsa el a jobb margót az `#meta` azonosítóval vagy a `[data-gu-name="meta"]` attribútummal rendelkező elemektől.
A meta szakaszon belül állítsa be a közösségi linkek, hozzászólási elemek és azok gyermek span elemeinek szegélyszínét egy egyéni változóra. Rejtse el minden `gu-island` elemet egy adott tárolón belül.
A bevezető szakasz esetében módosítsa a pozicionálását és belső térközét, bal oldali eltolást adva hozzá. Közepes képernyőkön adjon hozzá kis felső belső térközt. Stílusozza a benne lévő bekezdést normál betűvastagsággal, 20px-es mérettel és alsó belső térközzel.
A fő média terület relatívan pozicionált, a 'portré' rács területre helyezett, és konkrét margókat kap. Biztosítsa, hogy a belső div elemei teljes szélességet vegyenek fel. Nagyobb képernyőkön távolítsa el az alsó margót. Kisebb képernyőkön módosítsa a szélességet és bal margót, további módosítással közepesen kis képernyőkön.
Stílusozza az ábra feliratokat, hogy alul jelenjenek meg egyéni háttér- és szövegszínnel, felülírva az alapértelmezett szélességet és margókat. Rejtse el az első belső span elemet és jelenítse meg a másodikat, korlátozva annak szélességét. Közepes képernyőkön módosítsa a felirat belső térközét. Egy rejtett állapot átlátszóvá teszi a feliratot.
Egy felirat gomb jobb alsó sarokban pozicionált, kör alakú háttérrel és skálázott ikonnal stílusozva, pozíciója közepes képernyőkön módosul.
Az interaktív cikk oszlopok esetében nagyon nagy képernyőkön módosítsa egy pszeudo-elem pozícióját és magasságát. Korlátozza a második szintű címsorok szélességét is.
iOS vagy Android esetén definiáljon egy sötét téma színváltozókat. Sötét módban módosítsa az elsődleges szín változót.
iOS eszközök
