Denne CSS-kode definerer en brugerdefineret skrifttypefamilie kaldet "Guardian Headline Full" med flere stilarter og vægte. Den inkluderer let, normal, medium og semibold versioner, hver tilgængelig i både normal og kursiv stil. Skrifttypefilerne er hostet online og leveres i tre formater: WOFF2, WOFF og TrueType (TTF).
@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) {
}
For interaktive indholdskolonner tilføjes en venstre kant med specifik positionering og z-index. På større skærme justeres kantens venstre position let. Inden for disse kolonner har atomare elementer ingen top- eller bundmargener men inkluderer polstring. Når afsnit går forud for atomare elementer, fjernes polstring og margener tilføjes i stedet. Inline-elementer er begrænset til en maksimal bredde på 620px.
For figurer med en loop-rolle er billedtekster sat til en højere z-index, og loop-knapper er designet med specifikke dimensioner og justering. Selvhostede videoelementer er sat til fuld bredde, begrænset til 620px, og inkluderer top- og bundmargener. For immersive videolayouts fjernes breddebegrænsninger, og margener justeres. På bredere skærme udvides immersive videoer i bredden og forskydes mod venstre.
Farvevariabler definerer stilarter for datolinjer, kanter, billedtekster og feature-elementer. I mørk tilpasning tilpasses tekst- og ikonfarver til et mørkt tema. Atomare elementer inden for indholdskolonner har ingen polstring. Specifikke regler sikrer, at det første afsnit efter visse elementer eller vandrette linjer er korrekt formateret på tværs af forskellige indholdssektioner som artikler, kommentarer og features. Det første afsnit efter en signeringsbarriere eller en vandret linje (undtagen den sidste) har en top-polstring på 14 pixels.
For det første bogstav i det første afsnit efter et indledende element, en signeringsbarriere eller en vandret linje (undtagen den sidste) inden for forskellige indholdskroppe, anvendes en specifik drop cap-stil. Denne bruger Guardian Headline-skrifttypen, er fed, 111 pixels i størrelse med 92 pixels linjehøjde. Den flyder til venstre, er med store bogstaver, bruger border-box størrelsesjustering, har en 8-pixels højre margin, justerer til toppen og bruger en brugerdefineret farvevariabel.
Afsnit umiddelbart efter en vandret linje inden for disse indholdskroppe har ingen top-polstring.
Pullquotes inden for disse indholdskroppe har en maksimal bredde på 620 pixels.
Billedtekster for showcase-elementer i hovedindhold og artikelcontainere er positioneret statisk, tager fuld bredde op til 620 pixels.
Immersive elementer spænder over hele viewport-bredden, under hensyntagen til rullebjælken. På større skærme (op til 71.24em) er de begrænset til 978 pixels, med billedtekstpolstring justeret ved forskellige breakpoints. På mellemstore skærme (46.25em til 61.24em) er den maksimale bredde 738 pixels. På mindre skærme (under 46.24em) justeres de til venstre kant med justerede margener og billedtekstpolstring.
For furniture wrappers på store skærme (61.25em og derover) bruges et grid-layout med definerede kolonner og rækker til positionering af overskriftselementer. CSS-stilarterne definerer layout og udseende for en websides header-sektion, omtalt som "furniture-wrapper". Den sætter kanter, afstand, typografi og grid-strukturer, der tilpasser sig på tværs af forskellige skærmstørrelser.
For større skærme (over 71.25em) etableres et komplekst grid-layout med specifikke kolonner og rækker for elementer som titel, overskrift, meta-information, standfirst (underoverskrift) og portræt. Visuelle elementer som kanter og linjer justeres eller fjernes ved visse breakpoints. Overskriftens skriftstørrelse øges, og dens maksimale bredde ændres på større skærme. Links inden for standfirst er designet med understregninger, der skifter farve ved hover.
For skærme bredere end 740 pixels skjules elementer med klassen `.keyline-4` eller attributten `[data-gu-name="lines"]`. Inden for `.furniture-wrapper` styles SVG-stregene i disse elementer til at bruge farvevariablen `--headerBorder`.
På skærme bredere end 740 pixels fjernes højre margin fra elementer med ID `#meta` eller attributten `[data-gu-name="meta"]` inden i `.furniture-wrapper`. For disse meta-elementer sættes kantfarven for sociale links, kommentarsektioner og deres child spans til `--headerBorder`. Skjul også eventuelle `gu-island`-komponenter inden for `.content__meta-container_dcr`.
For standfirst-sektionen (valgt via klasse, ID eller `data-gu-name`) anvendes en negativ venstre margin og tilsvarende polstring, og dens position sættes til relativ. På bredere skærme (over 740px) tilføjes en lille top-polstring. Afsnit inden for standfirst styles med en font-vægt på 400, en størrelse på 20 pixels og en bund-polstring på 14 pixels.
Hovedmedieområdet (valgt via ID eller `data-gu-name`) er positioneret relativt, har ingen topmargin, en lille bundmargin og placeres i "portræt"-grid-området. Sikre, at dets indre divs tager fuld bredde og har ingen horisontal margin. På meget brede skærme (over 980px) fjernes bundmargenen. På mindre skærme (under 740px) sættes dens bredde til fuld viewport-bredde minus eventuel rullebjælke, og anvend en negativ venstre margin. For skærme mellem 480px og 740px øges denne negative venstre margin til -20px.
Style figurbilledtekster til at være positioneret absolut i bunden, med specifik polstring og baggrunds-/tekstfarver fra CSS-variabler. Sæt deres bredde til 100% uden maksimal bredde, fjern bundmargenen og sæt en minimumshøjde. Farv spans inden for billedteksten ved hjælp af `--headerBorder`, og fyld deres SVG'er med samme farve. Skjul det første span og vis det andet span som et blok-element, begræns dets bredde til 90%. På skærme bredere end 480px øges billedtekstens horisontale polstring. En klasse `.hidden` på billedteksten sætter dens opacitet til 0.
Billedtekstknappen vises som en blok, positioneret absolut nær nederste højre, med en høj z-index. Den har en cirkulær baggrund, ingen kant og specifik polstring. Skaler dens SVG-ikon let ned. På skærme bredere end 480px justeres dens højre position. For meget brede skærme (over 1140px) justeres toppen og højden af `.content__main-column--interactive` pseudo-elementet. Begræns også den maksimale bredde af h2-overskrifter inden for denne kolonne til 620 pixels.
For rootelementet, når body har en `.ios` eller `.android` klasse, defineres et sæt mørk tilstandsfarvevariabler. I en præference for mørk farveskema opdateres variablen `--new-pillar-colour` tilsvarende.
På iOS-enheder sigtes mod det første bogstav i afsnit i specifikke kontekster. Det gælder for iOS- og Android-enheder, inden for forskellige artikelcontainere og kropssektioner, efter visse elementer som `.element-atom`, `.sign-in-gate` eller `#sign-in-gate`. Dette gælder også, hvis et signeringsbarriere-element vises mellem det første element og afsnittet. Det første bogstav i det første afsnit efter en signeringsbarriere, eller efter et element-atom efterfulgt af en signeringsbarriere, skal farves ved hjælp af den sekundære pillar-variabel. Dette gælder for feature-, standard- og kommentarartikelcontainere på både iOS og Android.
På iOS og Android skal artikelheaderens højde være sat til nul i feature-, standard- og kommentarartikelcontainere.
Furniture wrapperen i disse containere skal have top-polstring på 4 pixels og horisontal polstring på 10 pixels. Indholdsmærkaterne inden i skal bruge en fed, serif skrifttypefamilie, farves med den nye pillar-variabel og have teksten med store bogstaver.
Overskrifter inden for furniture wrapperen skal være 32 pixels i størrelse, fede, have en bund-polstring på 12 pixels og bruge farven #121212.
Billedelementer inden i furniture wrapperen skal være positioneret relativt, have en topmargin på 14 pixels, en venstre margin på -10 pixels, en bredde beregnet som viewport-bredden minus rullebjælkebredden og en automatisk højde. Dette gælder for det indre figure, billede og link-elementer inden for feature-artikelcontainere på iOS. For iOS- og Android-enheder er billeder inden i artikelcontainere sat til at have en gennemsigtig baggrund, med en bredde svarende til den fulde viewport-bredde minus rullebjælkebredden og en automatisk højde.
Standfirst-sektionen i disse containere har en top-polstring på 4 pixels, en bund-polstring på 24 pixels og en højre margin på -10 pixels.
Afsnit inden for standfirst bruger Guardian Headline-skrifttypefamilien.
Links inden i standfirst er designet med en specifik farve, en understregning placeret 6 pixels fra teksten og en dekorativ linjefarve, uden kant. For Android-enheder, når der hoveres over links i kommentarartiklens standfirst-sektion, skal understregningsfarven matche den nye pillar-farve.
For både iOS- og Android-enheder
