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