A Guardian Headline Full betƱcsalĂĄd szĂĄmos stĂlust tartalmaz, amelyek mindegyike több formĂĄtumban elĂ©rhetĆ. A vilĂĄgos, normĂĄl, közepes Ă©s fĂ©lig fĂ©lkövĂ©r vastagsĂĄgok ĂĄllnak rendelkezĂ©sre, normĂĄl Ă©s dĆlt vĂĄltozatban egyarĂĄnt. Ezek a betƱtĂpusok a Guardian webes eszköztĂĄrĂĄbĂłl szĂĄrmaznak.
A Guardian Headline Full betƱcsalĂĄd szĂĄmos stĂlust foglal magĂĄban: fĂ©lkövĂ©r (normĂĄl Ă©s dĆlt), fekete (normĂĄl Ă©s dĆlt), vilĂĄgos (normĂĄl Ă©s dĆlt) Ă©s normĂĄl (normĂĄl Ă©s dĆlt). Minden stĂlus elĂ©rhetĆ WOFF2, WOFF Ă©s TrueType formĂĄtumban, a megadott URL-eken hosztolva. A Guardian Titlepiece betƱtĂpus is szerepel fĂ©lkövĂ©r, normĂĄl stĂlusban, ugyanezekkel a fĂĄjlformĂĄtumokkal.
A "Guardian Headline Full" betƱcsalĂĄd szĂĄmos stĂlust Ă©s vastagsĂĄgot tartalmaz, mindegyik elĂ©rhetĆ WOFF2, WOFF Ă©s TrueType formĂĄtumban. RĂ©szletek:
- NormĂĄl dĆlt: 400-as vastagsĂĄg, dĆlt stĂlus
- Közepes: 500-as vastagsĂĄg, normĂĄl stĂlus
- Közepes dĆlt: 500-as vastagsĂĄg, dĆlt stĂlus
- FĂ©lig fĂ©lkövĂ©r: 600-as vastagsĂĄg, normĂĄl stĂlus
- FĂ©lig fĂ©lkövĂ©r dĆlt: 600-as vastagsĂĄg, dĆlt stĂlus
- FĂ©lkövĂ©r: 700-es vastagsĂĄg, normĂĄl stĂlus
- FĂ©lkövĂ©r dĆlt: 700-es vastagsĂĄg, dĆlt stĂlus
- Fekete: 900-es vastagsĂĄg, normĂĄl stĂlus
- Fekete dĆlt: 900-es vastagsĂĄg, dĆlt stĂlus
Minden betƱtĂpusfĂĄjl a megadott URL-eken hosztolva van.
A megadott szöveg CSS kĂłdnak tƱnik webes tartalom stĂlusozĂĄsĂĄhoz, beleĂ©rtve betƱtĂpus-definĂciĂłkat Ă©s reszponzĂv rĂĄcs elrendezĂ©seket kĂŒlönbözĆ kĂ©pernyĆmĂ©retekhez. MeghatĂĄrozza a betƱcsalĂĄdokat, vastagsĂĄgokat, stĂlusokat Ă©s fĂĄjlforrĂĄsokat, valamint rĂĄcsbeĂĄllĂtĂĄsokat kĂŒlönbözĆ kontĂ©ner elemekhez breakpointok között.
Az interaktĂv rĂĄcsos ĂĄbra-feliratok felsĆ paddingje 4 pixel. A rĂĄcsban elnevezett "lines" Ă©s "meta" elemek egy specifikus rĂĄcsterĂŒleten helyezkednek el Ă©s mĂłdosĂtott margĂłval rendelkeznek. Nagyobb kĂ©pernyĆkon a rĂĄcs öt oszlopot hasznĂĄl meghatĂĄrozott szĂ©lessĂ©gekkel.
iOS Ă©s Android eszközökön a cikkfejlĂ©cek specifikus betƱtĂpusokat Ă©s stĂlusokat hasznĂĄlnak: a fĆcĂmek Ă©s szerzĆi sorok Guardian Headline vagy hasonlĂł serif betƱtĂpusban jelennek meg, bizonyos elemek fĂ©lkövĂ©rrel vagy nagybetƱvel. A kĂ©pek Ă©s ĂĄbrĂĄk mĂłdosĂtott magassĂĄggal Ă©s tĂ©rközzel rendelkeznek, Ă©s egy Guardian Headline Full nevƱ egyĂ©ni betƱtĂpus töltĆdik be vilĂĄgos Ă©s vilĂĄgos dĆlt vĂĄltozatokkal.
@font-face {
font-family: 'Guardian Headline Full';
src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.ttf') format('truetype');
font-weight: 400;
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-RegularItalic.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf') format('truetype');
font-weight: 400;
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-Medium.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.ttf') format('truetype');
font-weight: 500;
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-MediumItalic.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.ttf') format('truetype');
font-weight: 500;
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-Semibold.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.ttf') format('truetype');
font-weight: 600;
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-SemiboldItalic.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf') format('truetype');
font-weight: 600;
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-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));
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;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
left: -11px;
}
}
.content__main-column--interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 12px;
padding-top: 12px;
}
.content__main-column--interactive p + .element-atom {
padding-top: 0;
padding-bottom: 0;
margin-top: 12px;
margin-bottom: 12px;
}
.content__main-column--interactive .element-inline {
max-width: 620px;
}
@media (min-width: 61.25em) {
figure[data-spacefinder-role="inline"].element {
max-width: 620px;
}
}
:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, 0.72);
--feature: #c70000;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
.content__main-column--interactive .element.element-atom,
.element.element-atom {
padding: 0;
}
#article-body > div .element-atom:first-of-type + p:first-of-type,
#article-body > div .element-atom:first-of-type + .sign-in-ga {
/ TovĂĄbbi stĂlusok, ha szĂŒksĂ©ges /
}A cikktest bizonyos elemei utĂĄni elsĆ bekezdĂ©snek, interaktĂv tartalomnak, hozzĂĄszĂłlĂĄs testnek, szolgĂĄltatĂĄs testnek Ă©s a `data-gu-name=body` attribĂștummal rendelkezĆ szakaszoknak 14 pixel felsĆ paddingje legyen.
Ezen elemek utĂĄni elsĆ bekezdĂ©s elsĆ betƱje Guardian Headline vagy hasonlĂł serif betƱtĂpussal legyen stĂlusozva, fĂ©lkövĂ©r, 111 pixel mĂ©retben, 92 pixel sormagassĂĄggal. Balra legyen floatolva, nagybetƱs, box-sizing border-box, 8 pixel jobb margĂłval, a szöveg tetejĂ©hez igazĂtva, Ă©s a megadott szĂnvĂĄltozĂłt hasznĂĄlva.
E szakaszokban vĂzszintes vonal utĂĄn közvetlenĂŒl következĆ bekezdĂ©seknek ne legyen felsĆ paddingje.
A fĆ tartalomban, szolgĂĄltatĂĄsi cikkekben, szabvĂĄnyos cikkekben Ă©s hozzĂĄszĂłlĂĄsi cikkekben