Ez a CSS kód egy "Guardian Headline Full" nevű egyedi betűtípust definiál több stílussal és vastagsággal. Megadja a betűfájlokat különböző formátumokban (WOFF2, WOFF és TTF) és azok online elhelyezkedését. A betűtípus magában foglalja a light, regular, medium és semibold vastagságokat, mindegyik normál és dőlt stílusban.
@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özölése van az elemek számára. A bizonyos elemeket követő bekezdések extra felső belső margót kapnak, és e 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 korlátozott. Különböző színváltozók vannak meghatározva az egységes témázáshoz.A meghatározott konténereken belüli idézetek maximális szélessége 620 képpont legyen.
A fő tartalomban és a cikk konténerekben található vitrinelemek feliratai statikus pozícióban legyenek, teljes szélességűek legfeljebb 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 a maximális szélességük 978 képpont, a feliratok belső margója pedig különböző töréspontokon módosul. Közepes 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 igazodjanak, módosított margókkal és felirat belső margóval.
A nagy képernyőkön lévő bútor burkolóknál (furniture wrappers) rácsos elrendezést használunk meghatározott oszlopokkal és sorokkal. A főcímeknek felső szegélyük van, a meta szakaszok viszonylagos pozícióban vannak, a bevezető szöveg linkjeinek és bekezdéseinek meghatározott stílusa van. 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 határoz meg egy cikk fejlécéhez, meghatározott területekkel a cím, főcím, bevezető szöveg, meta információk és portré (fő média) számára. Stílusokat állít be ezekhez az elemekhez, beleértve a betűtípusokat, szegélyeket és térközölést. Az elrendezés különböző képernyőszélességeken módosul: szélesebb képernyőkön (81,25 em felett) részletesebb rácsot használ és módosítja az elemek szélességét; közepes képernyőkön (71,25 em felett) a főcím betűméret nő; kisebb képernyőkön (46,24 em alatt) a fő média a teljes nézeti szélességhez igazodik. A szegélyek és vonalak egyéni színváltozót használnak, és egyes elemek bizonyos töréspontokon elrejtve vagy áthelyezve vannak.A CSS kód stílusokat határoz meg egy weboldal elrendezéséhez, összpontosítva a "furniture-wrapper" nevű komponensre. Ennek a komponensnek sötét háttere van, és a margóit és belső margóit a képernyőméret alapján módosítja. Nagyobb képernyőkön dekoratív oldalsávokat ad hozzá.
Ezen a burkolón belül az olyan elemek, mint a cikk fejlécek, főcímek és meta információk (például közösségi megosztás gombok) vannak stílusozva. A főcímek világosszürke színt és félkövér betűtípust használnak. A közösségi gomboknak színes szegélye van, amely egy témaszínnel egyezik, és rámutatáskor egyszínűvé válnak.
A kód kezeli a feliratok és egy felirat váltó gomb láthatóságát is a média elemekhez. Összességében a stílusok biztosítják, hogy az elrendezés reszponzív és vizuálisan konzisztens legyen különböző eszközökön.Ez a CSS kód stílusokat határoz meg egy weboldal komponenséhez, valószínűleg egy oldalsávhoz vagy tartalom burkolóhoz. Beállítja a szöveg színeit, a linkek viselkedését és az elrendezés módosításait különböző képernyőméretekhez. A linkek meghatározott színekkel és aláhúzással vannak stílusozva, és az elrendezés olyan háttérelemeket tartalmaz, amelyek a nézeti szélesség alapján módosulnak. A média lekérdezések biztosítják, hogy a design különböző eszközökhöz igazodjon, tabletektől a nagy asztali képernyőkig.A CSS kód stílusokat határoz meg a cikk elemekhez és betölt egyedi betűtípusokat. Világos szegélyszínt állít be a hozzászólásokhoz, és módosítja a címsor stílusokat: a cikkekben lévő h2 címsorok alapértelmezés szerint világos vastagságúak, de félkövérré válnak, ha strong tag-et tartalmaznak. Ezen kívül importálja a Guardian Headline Full betűtípus családot különböző vastagságokban és stílusokban (light, regular, medium, semibold, mindegyik normál és dőlt változatban) meghatározott webcímekről.A szöveg úgy tűnik, egy CSS kódrészlet, amely betűtípus definíciókat és stílus szabályokat határoz meg, valószínűleg egy weboldalhoz. Íme egy újraírt, folyékony, természetes angol változat:
Ez a CSS kód több egyedi betűtípus családot határoz meg weboldal használatra. Megadja különböző betűfájlokat (WOFF2, WOFF és TrueType formátumban) a "Guardian Headline Full" betűtípushoz különböző vastagságokban és stílusokban, mint például félkövér dőlt, félkövér, félkövér dőlt, fekete és fekete dőlt. Minden definíció tartalmazza a betűtípus vastagságát és stílusát.
Definiál egy "Guardian Titlepiece" betűtípust is félkövér vastagságban.
Ezen kívül a kód beállít CSS egyéni tulajdonságokat (CSS változókat) a színsémákhoz, különösen sötét módhoz iOS és Android eszközökön. Meghatároz színeket sötét hátterekhez és funkció elemekhez, meghatározott színekkel a normál és sötét módhoz.
Vannak média lekérdezések és konkrét stílus szabályok is a cikk konténerekben lévő első bekezdés első betűjéhez iOS és Android eszközökön, amelyek akkor érvényesek, ha bizonyos HTML struktúrák jelen vannak.Android eszközökön a standard vagy komment cikkek első bekezdésének első betűje egy másodlagos pillér színnel van stílusozva. iOS-en és Android-on egyaránt a cikk fejlécek el vannak rejtve, és a bútor burkolónak (furniture wrapper) meghatározott belső margója van. A címkék ezen a burkolón belül 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érek, alsó belső margóval és sötét színnel vannak beállítva. A képábrák viszonylagos pozícióban vannak, 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átterüknek kell lenniük, lefedniük kell a teljes nézeti szélességet (a görgetősávokat figyelembe véve), és a magasságuk automatikusan igazodjon.
iOS-en és Android-on egyaránt a cikkek bevezető szövegének meghatározott térközölése legyen: 4 képpont belső margó felül, 24 képpont alul és 10 képpont negatív margó jobbra.
A bevezető szövegen belüli bekezdéseknek a Guardian főcím betűtípus családját kell használniuk.
A szövegen belüli linkeket egy meghatározott színnel, a szövegtől 6 képpontra aláhúzással és világosszürke aláhúzószínnel kell stílusozni. 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 igazodnia.
Ezen kívül a cikkek meta szakasza iOS-en és Android-on is megkapja ezeket a stílus szabályokat.Ez a CSS kód stílusokat állít
