Acest cod CSS definește o familie de fonturi personalizată numită „Guardian Headline Full” cu multiple greutăți și stiluri de font. Include greutăți light, regular, medium și semibold, fiecare atât în stil normal, cât și în italic. Fișierele de font sunt furnizate în formatele WOFF2, WOFF și TrueType, găzduite pe serverul de asset-uri al Guardian.
Familia de fonturi Guardian Headline Full include mai multe stiluri, fiecare disponibil în multiple formate (WOFF2, WOFF și TTF). Stilurile sunt:
- Bold (greutate 700, stil normal)
- Bold Italic (greutate 700, stil italic)
- Black (greutate 900, stil normal)
- Black Italic (greutate 900, stil italic)
- Light (greutate 300, stil normal)
- Light Italic (greutate 300, stil italic)
- Regular (greutate 400, stil normal)
- Regular Italic (greutate 400, stil italic)
În plus, fontul Guardian Titlepiece este disponibil în Bold (greutate 700, stil normal).
Familia de fonturi „Guardian Headline Full” include multiple fișiere de font în diverse greutăți și stiluri. Fiecare font este disponibil în formatele WOFF2, WOFF și TrueType, găzduite la URL-urile specificate. Greutățile variază de la 400 (regular) la 900 (black), cu atât stiluri normale, cât și italice furnizate pentru fiecare greutate.
@font-face {
font-family: Guardian Headline;
src: 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;
}
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-column-gap: 0px;
grid-template-columns: 100%;
grid-template-areas:
"media"
"title"
"headline"
"standfirst"
"lines"
"meta"
"body";
}
@media (min-width: 30em) {
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
padding: 0 20px;
max-width: 620px;
}
}
@media (min-width: 46.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 100%;
grid-column-gap: 10px;
grid-template-areas:
"title"
"headline"
"standfirst"
"media"
"lines"
"meta"
"body";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: 80px;
}
}
@media (min-width: 61.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas:
"title right-column"
"headline right-column"
"standfirst right-column"
"media right-column"
"lines right-column"
"meta right-column"
"body right-column"
". right-column";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: unset;
}
}
@media (min-width: 71.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas:
"title border headline right-column"
". border standfirst right-column"
". border media right-column"
". border body right-column"
". border . right-column";
}
#article-body>div .content--interactive-grid .content__standfirst,
.content--interactive>div .content--interactive-grid .content__standfirst,
#comment-body .content--interactive-grid .content__standfirst,
[data-gu-name=body] .content--interactive-grid .content__standfirst,
#feature-body .content--interactive-grid .content__standfirst {
padding-bottom: 0;
}
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
/ Stilizarea capturilor continuă aici /
}
}
Pentru capturile figurilor immersive și conținutul gridului interactiv, padding-ul este setat la 4 pixeli în partea de sus și 0 în altă parte. Elementele cu numele „lines” și „meta” din within gridurile interactive sunt poziționate într-o anumită zonă de grid. Elementele „lines” au o înălțime setată să se potrivească conținutului lor și o margine superioară de 5 pixeli, în timp ce elementele „meta” au o margine superioară de 18 pixeli.
Pe ecranele mai late de 81,25 em, gridurile interactive utilizează un layout cu cinci coloane cu lățimi fixe și flexibile.
Pe dispozitivele iOS și Android, antetele articolelor utilizează fonturi și greutăți specifice pentru textul standfirst, etichetele de secțiune și byline-uri. Etichetele de secțiune sunt capitalizate, iar liniile cheie au padding ajustat. Imaginile figurilor au fundaluri transparente, iar imaginile sunt ușor deplasate spre dreapta. Titlurile au fundaluri transparente, padding ajustat și utilizează o dimensiune de font de 24 de pixeli cu o înălțime de linie de 115%.
Pentru Android, titlurile principale și secundare sunt setate să se afișeze ca blocuri. Atât pe iOS, cât și pe Android, titlurile secundare sunt stilizate cu greutate light de font, aliniere la stânga și încheiere de text echilibrată.
Kicker-ele articolelor nu au padding, iar copia lor este ascunsă.
Elementele byline și data publicării utilizează un font de 17px cu greutate normală și înălțime de linie de 130%. Textul byline și link-urile de autor sunt colorate #707070.
Paragrafele standfirst sunt setate la 20px, stil normal, greutate light și înălțime de linie de 115%. Link-urile din within paragrafele standfirst sunt bold, colorate #707070, cu o bordură inferioară și fără imagine de fundal.
Textul titlului este colorat #dcdcdc.
Imaginile și containerele lor sunt setate la o lățime de 100vw minus 20px, cu înălțime automată și o lățime maximă de 620px. Elementele interioare ale figurilor au înălțimea setată la unset. Imaginile showcase au o lățime maximă de 280px.
Anumite secțiuni și aside-uri care urmează navigației sunt ascunse. Elementele atom nu au margine sau padding.
Elementele showcase și conținutul lor au o lățime maximă de 210px, crescând la 260px pentru viewport-uri mai late de 61,25em. Capturile span within elementele inline și showcase sunt, de asemenea, stilizate în consecință.
Pentru capturile din within corp, textul span este setat la 14px, o culoare gri deschis (#707070) și afișat inline. Primul span din capturile pentru elementele inline și showcase este setat la inline-block.
Pe ecranele mai late de 71,25em, capturile pentru elementele inline și showcase sunt poziționate relativ și au lățimea resetată.
Pentru articolele cu conținut interactiv, layout-ul utilizează zone de grid numite „header”, „headline”, „standfirst”, „lines”, „meta” și „body”. Pe ecrane mai mari (71,25em și mai sus), layout-ul grid se schimbă în trei coloane cu zone pentru „header”, „meta”, „border”, „standfirst” și „body”. Marginea coloanei principale este eliminată, bordura stângă este ascunsă, iar lățimea paragrafului este setată la 620px.
Elementele titlului au setări specifice de font: Guardian Headline sau fonturi similare, dimensiune 24px, greutate light (300) și o culoare gri deschis (#dcdcdc). Padding-ul este 0–10px pe ecrane mici, 0–20px pe ecrane medii (30em și mai sus) și eliminat pe ecrane mari (71,25em și mai sus).
Liniile cheie și liniile sunt ascunse. Pe ecrane mari, antetul articolului este poziționat absolut la 20px din stânga.
Link-urile antetului articolului utilizează o dimensiune de font de 17px și stil normal. Padding-ul superior al antetului este de 2px, iar etichetele au o bordură superioară și padding (0–10px pe ecrane mici, 0–20px pe ecrane medii). Pe ecrane mai mari (46,25em și mai sus), bordura superioară este eliminată, iar padding-ul este setat la 0 pe cele mai mari ecrane (71,25em și mai sus).
Acest cod CSS stilizează elementele dintr-un articol interactiv.
Pentru titlurile și link-urile articolelor, setează înălțimea liniei la 115% și culoarea textului la #ff5943. Când se trece cu mouse-ul peste link-urile titlurilor, culoarea sublini
