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 s normálnĂmi a kurzĂvnĂmi variantami. PĂsma jsou naÄŤĂtána ze serverĹŻ Guardianu ve formátech WOFF2, WOFF a TrueType, aby byla zajištÄ›na kompatibilita napĹ™ĂÄŤ rĹŻznĂ˝mi 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;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.ttf) format("truetype");
font-weight: 300;
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-LightItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.ttf) format("truetype");
font-weight: 300;
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-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;
}
Text se jevĂ jako Ăşryvek CSS kĂłdu definujĂcĂho font-face pro rodinu pĂsem "Guardian Headline Full". Zde je pĹ™epsán plynulou, pĹ™irozenou angliÄŤtinou:
Tento CSS definuje rodinu pĂsem "Guardian Headline Full" s vĂce styly a váhami. KaĹľdá poloĹľka specifikuje soubory pĂsem ve formátech WOFF2, WOFF a TrueType, hostovanĂ© na danĂ˝ch URL adresách, spolu s jejich odpovĂdajĂcĂ vahou pĂsma a stylem (kurzĂva nebo normálnĂ). Styly sahajĂ od regular (váha 400) po black (váha 900), kaĹľdĂ˝ v normálnĂ i kurzĂvnĂ variantÄ›.
PoskytnutĂ˝ text se jevĂ jako mix definic CSS pĂsem a pravidel responzivnĂho mĹ™ĂĹľkovĂ©ho rozloĹľenĂ pro web, pravdÄ›podobnÄ› The Guardian. Zde je plynulĂ˝, pĹ™irozenĂ˝ anglickĂ˝ pĹ™epis, kterĂ˝ zjednodušuje technickĂ© fráze pĹ™i zachovánĂ vĂ˝znamu:
KĂłd definuje vlastnĂ pĂsma pro web, vÄŤetnÄ› "Guardian Headline" v rĹŻznĂ˝ch váhách a stylech, a "Guardian Titlepiece" tuÄŤnÄ›. PotĂ© nastavuje responzivnĂ mĹ™ĂĹľkovĂ© rozloĹľenĂ pro obsah ÄŤlánku. Na menšĂch obrazovkách je rozloĹľenĂ jednosloupcovĂ©. Jak se obrazovka rozšiĹ™uje, rozloĹľenĂ se pĹ™izpĹŻsobuje: pĹ™idává odsazenĂ, zavádĂ pravĂ˝ sloupec a nakonec vytvářà sloĹľitÄ›jšà vĂce sloupcovou strukturu s ohraniÄŤenĂm a specifickĂ˝mi oblastmi pro nadpis, titulek, mĂ©dia a hlavnĂ text. Pravidla takĂ© upravujĂ odsazenĂ popiskĹŻ pro ponoĹ™enĂ© obrázky pĹ™i rĹŻznĂ˝ch velikostech obrazovky.
Pro interaktivnĂ mĹ™ĂĹľkovĂ© obrázky s ponoĹ™enĂ˝mi popisky je odsazenĂ popisku nastaveno na 4 pixely nahoĹ™e a 0 jinde. V rĹŻznĂ˝ch oblastech obsahu jsou prvky jako lines a meta umĂstÄ›ny v mĹ™ĂĹľce od řádku 2, sloupce 1 do řádku 5, sloupce 2. Prvek lines má výšku, která odpovĂdá jeho obsahu s hornĂm okrajem 5px, zatĂmco prvek meta má hornĂ okraj 18px.
Na širšĂch obrazovkách pouĹľĂvá interaktivnĂ mĹ™ĂĹľka pÄ›ti sloupcovĂ© rozloĹľenĂ se specifickĂ˝mi šĂĹ™kami.
Na zaĹ™ĂzenĂch iOS a Android pouĹľĂvajĂ hlaviÄŤky ÄŤlánkĹŻ specifická pĂsma: ĂşvodnĂ text (standfirst) pouĹľĂvá pĂsmo headline stĹ™ednĂ váhy, sekÄŤnĂ kickery se zobrazujĂ jako bloky s velkĂ˝mi počáteÄŤnĂmi pĂsmeny a oddÄ›lovacà čáry majĂ hornĂ odsazenĂ 12px. AutoĹ™i podtitulkĹŻ jsou zobrazeni tuÄŤnĂ˝m pĂsmem headline. V rámci ÄŤlánkĹŻ majĂ obrázkovĂ© figury automatickou výšku a odstavce následujĂcĂ po atomickĂ˝ch prvcĂch nemajĂ hornĂ okraj.
VlastnĂ pĂsmo, Guardian Headline Full, je naÄŤteno ve váhách light a light italic z konkrĂ©tnĂch webovĂ˝ch adres.
PoskytnutĂ˝ text se jevĂ jako sĂ©rie pravidel CSS font-face pro rodinu pĂsem s názvem "Guardian Headline Full." Tato pravidla definujĂ rĹŻznĂ© váhy a styly pĂsma (jako regular, italic, medium, bold atd.) a specifikujĂ webovĂ© adresy (URL), kde lze nalĂ©zt skuteÄŤnĂ© soubory pĂsem v rĹŻznĂ˝ch formátech (WOFF2, WOFF, TTF).
@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) {
.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 >