Tento CSS kód definuje vlastní rodinu písem s názvem "Guardian Headline Full" s více váhami a styly písma. Zahrnuje váhy light, regular, medium a semibold, každou v normální i kurzivní verzi. Pro každý styl kód specifikuje tři různé formáty souborů písem (woff2, woff a ttf) hostované na serverech Guardianu, což zajišťuje širokou kompatibilitu s prohlížeči.
@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-cPro interaktivní obsahové sloupce je přidán levý okraj s konkrétním umístěním a z-indexem. Na větších obrazovkách se pozice okraje mírně upravuje. Uvnitř těchto sloupců nemají atomové prvky žádné horní ani dolní okraje, ale obsahují odsazení. Když za atomovým prvkem následuje odstavec, odsazení je odstraněno a místo toho jsou přidány okraje. Inline prvky jsou omezeny na maximální šířku.
Pro obrázky s rolí inline platí také maximální šířka na středně velkých obrazovkách a větších.
Vlastní vlastnosti definují různé barvy pro prvky jako datové řádky, záhlaví, popisky a funkce. Primární barva pilíře standardně přebírá barvu funkce, pokud není nastavena.
Atomové prvky v interaktivních sloupcích nebo obecně nemají žádné odsazení. První odstavec po specifických prvcích nebo vodorovných oddělovačích v různých tělech obsahu dostává extra horní odsazení.
Navíc je první písmeno těchto odstavců stylizováno jako iniciála s konkrétním písmem, velikostí, váhou a barvou, přičemž pro barvu se používají vlastní vlastnosti.Pro odstavce následující po vodorovných oddělovačích v konkrétních oblastech obsahu odstraňte horní odsazení.
Omezte šířku pullquote na 620px v tělech článků, interaktivních, komentářových a funkčních.
Pro popisky showcase prvků v hlavním obsahu a kontejnerech článků nastavte pozici na static, šířku na 100% a maximální šířku na 620px.
Imersivní prvky by měly zabírat celou šířku viewportu mínus posuvník. Na obrazovkách do 71.24em omezte jejich šířku na 978px. Pro popisky na těchto obrazovkách přidejte 10px horizontálního odsazení, které se na obrazovkách mezi 30em a 71.24em zvýší na 20px.
Na středně velkých obrazovkách (46.25em až 61.24em) omezte imersivní prvky na 738px. Na menších obrazovkách (do 46.24em) odstraňte levý okraj, zarovnejte k levému okraji a přidejte 10px negativní levý okraj (20px na obrazovkách 30em a širších). Popisky na těchto menších obrazovkách dostanou 20px horizontálního odsazení.
Pro furniture wrapper na velkých obrazovkách (61.25em a více) použijte CSS grid s definovanými sloupci a řádky. První potomek nadpisů stylujte s horním okrajem. Sekci meta pozicujte relativně s horním odsazením a bez pravého okraje. V sekcích standfirst upravte dolní okraje, nastavte velikost písma položek seznamu na 20px a stylizujte odkazy podtržením (použijte vlastní barvu pro podtržení, která se při najetí myší změní). První odstavec ve standfirst dostane horní okraj a žádné dolní odsazení, ačkoli tento okraj je na velmi velkých obrazovkách (71.25em a více) odstraněn.
Také pro obrázky uvnitř wrapperu odstraňte levý okraj a nastavte maximální šířku 630px pro inline prvky. Na největších obrazovkách (71.25em a více) jsou definovány šablony sloupců gridu začínající od title, headline a meta.Layout používá grid se sloupci a řádky definovanými pro různé velikosti obrazovek. Na větších obrazovkách má grid tři sloupce pro sekce title, headline a meta, pět sloupců pro standfirst a osm sloupců pro portrét, s řádky velikostně proporcionálními. Na středních obrazovkách se grid upravuje na dva, pět a sedm sloupců, s konkrétními výškami řádků.
Stylování zahrnuje horní okraj pro sekci meta a levý okraj pro standfirst, oba používají vlastní proměnnou barvy. Nadpisy mají maximální šířku a velikost písma, která se mění s velikostí obrazovky, na širších obrazovkách se zvětšuje. Některé prvky, jako sdílení na sociálních sítích a sekce komentářů, mají okraje odpovídající barvě záhlaví, zatímco jiné jsou na určitých zařízeních skryty.
Text standfirst má specifické odsazení a vlastnosti písma a hlavní mediální oblast je umístěna uvnitř gridu, přičemž její šířka se na menších obrazovkách upravuje s ohledem na posuvníky a okraje. Popisky jsou pozicovány absolutně.Popisek obrázku ve furniture wrapperu je pozicován absolutně dole bez spodního okraje, obsahuje odsazení, barvu pozadí a barvu textu. Jeho šířka je nastavena na 100% s minimální výškou 46 pixelů. Uvnitř popisku je první span skryt, zatímco druhý je zobrazen a omezen na 90% maximální šířky. Text popisku a ikony SVG používají konkrétní proměnnou barvy.
Na obrazovkách širších než 30em se horizontální odsazení popisku zvětšuje. Vyhrazené tlačítko popisku je absolutně pozicováno vpravo dole, s kruhovým pozadím a škálovanou ikonou SVG, přičemž jeho pravá pozice se na větších obrazovkách upravuje.
Pro interaktivní hlavní sloupce na velmi širokých obrazovkách pseudo-prvek upravuje svou horní pozici a výšku. Nadpisy uvnitř těchto sloupců mají maximální šířku.
Na iOS a Androidu jsou definovány proměnné barev pro tmavý režim, včetně barvy funkce, která se v tmavém režimu mění. Konkrétní kontejnery článků na těchto platformách stylizují první písmeno prvního odstavce po určitých prvcích sekundární barvou, nastavují výšku záhlaví článku na nulu, upravují odsazení pro furniture wrapper a skrývají popisky obsahu uvnitř něj.Pro zařízení iOS a Android platí pro kontejnery článků typu feature, standard a comment následující styly:
- Popisky: Použijte tučné, velkými písmeny psané písmo v Guardian headline nebo serif typu, obarvené proměnnou nové barvy pilíře.
- Nadpisy: Nastaveny na 32px, tučné, s 12px spodním odsazením a tmavě šedou barvou (#121212).
- Obrázky: Pozicovány relativně, s 14px horním okrajem a negativním 10px levým okrajem. Šířka zabírá celý viewport (s přihlédnutím k posuvníkům) a výška se automaticky přizpůsobuje. Vnitřní prvky, obrázky a odkazy uvnitř obrázku mají průhledné pozadí, odpovídající plné šířce viewportu s automatickou výškou.
- Standfirst (shrnutí článku): Zahrnuje 4px horní odsazení, 24px spodní odsazení a negativní 10px pravý okraj. Odstavce uvnitř standfirst dědí tyto styly kontejneru.CSS kód nastavuje specifické styly pro standfirsty článků a metadata na zařízeních iOS a Android. Definuje rodiny písem pro text standfirstu a přizpůsobuje vzhled odkazů, včetně barvy, stylu podtržení a efektů při najetí myší. Kód také upravuje okraje pro sekce metadat a zajišťuje konzistentní stylizaci podpisů a odkazů na autory napříč různými typy článků.Jméno autora v sekci meta furniture wrapperu, spolu s příbuznými odkazy a spany na zařízeních Android pro standardní a komentářové články, by mělo používat novou barvu pilíře. Na iOS a Androidu by sekce meta miscellaneous ve feature, standard a comment článcích neměla mít žádné odsazení a jakékoli ikony SVG uvnitř by měly být stylizovány s novou barvou pilíře jako stroke.
Pro showcase prvky ve feature, standard a comment článcích na iOS i Androidu by mělo být tlačítko popisku zobrazeno jako flex kontejner. Mělo by být vycentrováno s 5px odsazením, zarovnáno horizontálně i vertikálně, velikost 28x28 pixelů a pozicováno 14px zprava.
Tělo článku ve feature, standard a comment článcích na iOS a Androidu by mělo mít 12px odsazení vlevo a vpravo. Uvnitř těla článku by obrázkové figury, které nejsou miniatury nebo imersivní, neměly mít žádný okraj. Jejich šířka by měla být plná šířka viewportu mínus 24px a jakákoli šířka posuvníku, s automatickou výškou. Popisky pro tyto obráz
