Rodina písma Guardian Headline Full zahrnuje několik stylů, každý s různou tloušťkou a kurzívou. Tyto fonty jsou dostupné v různých formátech, jako jsou woff2, woff a ttf, a jsou hostovány na serverech Guardianu. Styl se pohybuje od lehkého po polotučný, s verzemi jak běžnými, tak kurzívními.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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, 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) {
.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;
}
}
Hlavní interaktivní obsahový sloupec má specifické styly pro prvky. Prvky uvnitř tohoto sloupce nemají horní ani dolní okraje, ale obsahují odsazení. Když za prvkem následuje odstavec, mezera se odpovídajícím způsobem upraví. Řádkové prvky jsou omezeny na maximální šířku 620 pixelů.
Na větších obrazovkách jsou také vložené obrázky omezeny na 620 pixelů. Video prvky s funkcí opakování mají vlastní stylování tlačítek a pozicování. Vlastní videa se zobrazují jako bloky, zabírají celou šířku až do 620 pixelů, s vycentrovaným zarovnáním. Imersivní video prvky přesahují tento limit, odstraňují omezení šířky a upravují okraje. Na širších obrazovkách se imersivní videa dále rozšiřují, s upravenými levými okraji pro zarovnání.
Barevné proměnné definují různé prvky motivu, jako je datová řádka, ohraničení, popisky a barvy funkcí. Ty se přizpůsobují preferencím tmavého režimu. V těle článku dostává první odstavec po určitých prvcích dodatečné horní odsazení a první písmeno může být stylováno odlišně.
CSS kód definuje styly pro iniciály, výňatky a různé layoutové prvky napříč různými sekcemi webu. Iniciály jsou stylovány specifickým fontem, velikostí a barvou a jsou zarovnány doleva. Výňatkům je nastavena maximální šířka. U prvků typu showcase jsou popisky pozicovány staticky s nastavenou šířkou. Imersivní prvky jsou nastaveny na plnou šířku viewportu, s úpravami pro různé velikosti obrazovek, včetně specifických okrajů a odsazení pro menší zařízení. Obal nábytku používá CSS Grid pro layout na větších obrazovkách, vytváří více sloupcovou strukturu a definuje oblasti mřížky pro prvky jako nadpis a meta informace. Také přidává horní ohraničení prvnímu potomku nadpisových prvků.
Obal nábytku nastavuje obsah úvodního textu na relativní pozici s horním odsazením 2 pixelů a bez pravého okraje. Uvnitř úvodního textu má hlavní obsahová oblast spodní okraj 4 pixely. Položky seznamu uvnitř úvodního textu používají velikost písma 20 pixelů. Odkazy uvnitř úvodního textu, včetně těch v položkách seznamu, nemají ohraničení, žádný obrázek na pozadí a jsou podtrženy s odsazením 6 pixelů, s použitím vlastní barvy pro podtržení. Při najetí myší se barva podtržení změní na novou barvu pilíře.
První odstavec v úvodním textu má horní ohraničení a žádné spodní odsazení. Pro větší obrazovky (61.25em a výše), pokud je obrazovka také alespoň 71.25em široká, je horní ohraničení odstraněno. Na obrazovkách širších než 61.25em nemají obrázky levý okraj a řádkové prvky s konkrétní rolí jsou omezeny na maximální šířku 630 pixelů.
Pro obrazovky široké alespoň 71.25em používá obal nábytku mřížkový layout s definovanými sloupci a řádky. Meta sekce obsahuje horní ohraničení vytvořené pseudo-prvkem, který je 540 pixelů široký. Odstavce v úvodním textu nemají horní ohraničení a před úvodním textem je přidána svislá čára pomocí dalšího pseudo-prvku.
Na ještě větších obrazovkách (81.25em a výše) se mřížkový layout upravuje s různými velikostmi sloupců a řádků. Horní ohraničení meta sekce se rozšiřuje na 620 pixelů a svislá čára před úvodním textem se mírně posouvá.
Štítky uvnitř hlavičky článku nebo sekce nadpisu mají horní odsazení 2 pixely. Nadpis používá tučnou tloušťku písma, maximální šířku 620 pixelů a velikost písma 32 pixelů. Pro obrazovky široké alespoň 71.25em se nadpis upravuje na maximální šířku 540 pixelů a velikost písma 50 pixelů.
Na středních obrazovkách (46.25em a výše) nemají prvky s třídou keyline-4 nebo specifickým datovým atributem pravý okraj. Na větších obrazovkách (61.25em a výše) jsou tyto prvky skryty. Jejich SVG obsah používá vlastní barvu pro tahy.
Tento CSS kód definuje styly pro layout webové stránky, zejména pro sekci obalu nábytku. Nastavuje různé vlastnosti pro prvky jako meta informace, úvodní text, hlavní média a popisky. Styly zahrnují úpravy okrajů, odsazení, barev a pozicování, s konkrétními pravidly pro různé velikosti obrazovek pomocí mediálních dotazů. Kód také definuje vlastní barevné proměnné a zajišťuje, že určité prvky jsou skryty nebo zobrazeny na základě podmínek. Celkově vytváří responzivní design, který se přizpůsobuje různým zařízením při zachování konzistentního vizuálního motivu.
CSS kód styluje prvky uvnitř třídy furniture-wrapper. Nadpisy (h1) jsou tučné a světle šedé (#dcdcdc). Obrázky v nadpisech nemají horní okraj a mají malý spodní okraj.
Pro obrazovky širší než 71.25em se před meta sekcí objeví barevná čára. Text a shrnutí v meta sekci jsou světle šedé. Odkazy na sociální média a tlačítka mají barevné ohraničení a používají specifickou barvu pro text a ikony, která se při najetí myší změní na tmavé pozadí.
Odkazy v meta sekci používají specifickou barvu a zachovávají ji při najetí myší s odpovídajícími podtrženími. V sekci úvodního textu jsou odkazy podtrženy světle šedou barvou, která se při najetí myší mění, a text odstavce je světle šedý. Na širších obrazovkách může první odstavec získat nebo ztratit horní ohraničení. Položky seznamu v úvodním textu jsou také světle šedé.
Pro obrazovky širší než 71.25em se před úvodním textem objeví čára. Na obrazovkách širších než 46.25em dostane obal tmavé pozadí a pravé ohraničení.
CSS definuje styly pro layoutový obal s dekorativními postranními lištami, které se přizpůsobují na základě šířky viewportu. Nastavuje ohraničení, pozadí a pozicuje pseudo-prvky (`:before` a `:after`) pro vytvoření těchto postranních lišt, vypočítává jejich šířku a umístění vzhledem k viewportu a posuvníku. Výpočty šířky se mění na konkrétních zlomových bodech (61.25em, 71.25em, 81.25em), aby vyhovovaly různým šířkám obsahu (738px, 978px, 1138px, 1298px). Další pravidla stylují tahy SVG a ohraničení sociálních/meta prvků pomocí vlastní vlastnosti pro barvu. Styly nadpisů jsou definovány pro prvky `h2`, nastavují výchozí tloušťku písma na 200 a na 700, pokud obsahují tag `strong`. Nakonec jsou deklarovány vlastní fontové podoby pro "Guardian Headline Full", včetně lehkých, lehkých kurzívních, běžných a běžných kurzívních variant s příslušnými soubory fontů a tloušťkami.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
