Tento CSS kód definuje rodinu písma "Guardian Headline Full" s různými styly a tučnostmi. Zahrnuje verze light (300), regular (400), medium (500) a semibold (600), každou v normální i kurzivní variantě. Pro každý styl poskytuje soubory písem ve formátech WOFF2, WOFF a TrueType z asset serveru Guardianu.
Tento CSS kód definuje několik font face pro rodiny písem "Guardian Headline Full" a "Guardian Titlepiece". Každý font face specifikuje různé tučnosti a styly (normální nebo kurzíva) a poskytuje více formátů souborů (WOFF2, WOFF a TrueType) pro kompatibilitu mezi prohlížeči. Písma jsou hostována na uvedených URL adresách a zahrnují varianty od light po black, s odpovídajícími kurzivními verzemi, kde je to možné.
Tento CSS kód definuje více font face pro rodinu písem "Guardian Headline Full", každý s různými tučnostmi a styly (normální a kurzíva). Pro každou variaci specifikuje zdrojové soubory ve formátech WOFF2, WOFF a TrueType z asset serveru Guardianu, spolu s odpovídající tučností písma (400 pro regular, 500 pro medium, 600 pro semibold, 700 pro bold, 900 pro black) a stylem písma (normální nebo kurzíva).
Tento text se zdá být CSS kódem definujícím styly písem a rozvržení mřížek pro webovou stránku, pravděpodobně The Guardian. Specifikuje soubory písem pro různé tučnosti a styly a nastavuje responzivní rozvržení mřížek, které se mění při různých velikostech obrazovky. Kód ovládá, jak jsou prvky jako titulky, nadpisy, média a obsah těla uspořádány napříč různými šířkami zařízení.
Pro interaktivní obrázky mřížek s poutavými popisky v konkrétních oblastech obsahu je nastaveno vnitřní odsazení popisku na 4 pixely nahoře a 0 jinde.
Prvky pojmenované "lines" a "meta" v interaktivních mřížkách jsou umístěny v oblasti mřížky od řádku 2 do 5 a sloupce 1 do 2. Prvky "lines" mají výšku, která se přizpůsobuje jejich obsahu, a horní okraj 5 pixelů, zatímco prvky "meta" mají horní okraj 18 pixelů.
Na větších obrazovkách (81,25em a výše) používá interaktivní mřížka pětisloupcové rozvržení se specifickými šířkami.
Pro zařízení iOS a Android používají hlavičky článků rodinu písem Guardian Headline s medium tučností pro úvodní odstavce a zobrazují sekční kickery s velkým počátečním písmenem. Klíčové linky mají zvýšené horní vnitřní odsazení a autorství používají tučné písmo. Obrázky v článcích mají automatickou výšku a odstavce následující po atomických prvcích nemají horní okraj.
Font face pro Guardian Headline Full jsou definovány s light a light italic tučnostmi, načítající z souborů woff2, woff a ttf.
Tento text definuje vlastní rodinu písem nazvanou "Guardian Headline Full" s různými styly a tučnostmi. Zahrnuje verze regular, medium, semibold a bold, každou v normální i kurzivní variantě. Soubory písem jsou poskytovány ve formátech WOFF2, WOFF a TrueType z webových stránek Guardianu.
```css
@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-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 > div .element-atom:first-of-type + .sign-in-ga {
/ Další styly lze v případě potřeby přidat zde /
}
```
Tento CSS kód aplikuje specifické styly na různé prvky webové stránky. Přidává 14 pixelů vnitřního odsazení nahoru u určitých odstavců, jako je první odstavec následující po specifických prvcích nebo vodorovných čarách v různých oblastech obsahu, jako jsou články, komentáře a feature.
Pro první písmeno těchto odstavců používá velké, tučné, velkými písmeny písmo z rodiny Guardian Headline nebo podobných patkových písem, s velikostí 111 pixelů a výškou řádku 92 pixelů. Toto písmeno je přeplaveno doleva, má 8pixelový okraj vpravo a jeho barva je nastavena pomocí CSS proměnné pro iniciály.
Dále odstraňuje horní vnitřní odsazení z odstavců, které přicházejí přímo po vodorovných čarách. Popisky pro showcase prvky jsou pozicovány staticky s maximální šířkou 620 pixelů. Imersivní prvky jsou nastaveny tak, aby zabíraly celou šířku viewportu mínus posuvník, s maximální šířkou 978 pixelů na větších obrazovkách. Na středních až velkých obrazovkách mají popisky pro imersivní prvky vodorovné vnitřní odsazení 20 pixelů, zatímco na menších obrazovkách až do 30em je to 10 pixelů. Pro obrazovky mezi 46,25em a 61,24em mají imersivní prvky specifikovanou maximální šířku.
```css
@media (max-width: 46.24em) {
.element.element--immersive.element-immersive {
margin-left: -10px !important;
margin-right: 0 !important;
left: 0;
}
}
@media (max-width: 46.24em) and (min-width: 30em) {
.element.element--immersive.element-immersive {
margin-left: -20px !important;
}
.element.element--immersive.element-immersive figcaption {
padding-inline: 20px;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: [title-start headline-start meta-start standfirst-start] repeat(5, 1fr) [title-end headline-end meta-end standfirst-end portrait-start] repeat(5, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start] .75fr [standfirst-end meta-start] auto [meta-end portrait-end];
}
.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name=headline] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(--headerBorder);
}
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name=meta] {
position: relative;
padding-top: 2px;
margin-right: 0;
}
.furniture-wrapper .standfirst .content__standfirst,
.furniture-wrapper #standfirst .content__standfirst,
.furniture-wrapper [data-gu-name=standfirst] .content__standfirst {
margin-bottom: 4px;
}
.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name=standfirst] ul li {
font-size: 20px;
}
.furniture-wrapper .standfirst li a,
.furniture-wrapper .standfirst a,
.furniture-wrapper #standfirst li a,
.furniture-wrapper #standfirst a,
.furniture-wrapper [data-gu-name=standfirst] li a,
.furniture-wrapper [data-gu-name=standfirst] a {
border-bottom: none;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
}
.furniture-wrapper .standfirst li a:hover,
.furniture-wrapper .standfirst a:hover,
.furniture-wrapper #standfirst li a:hover,
.furniture-wrapper #standfirst a:hover,
.furniture-wrapper [data-gu-name=standfirst] li a:hover,
.furniture-wrapper [data-gu-name=standfirst] a:hover {
text-decoration-color: var(--new-pillar-colour);
}
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=standfirst] p:first-of-type {
border-top: 1px solid var(--headerBorder);
padding-bottom: 0;
}
}
@media (min-width: 61.25em) and (min-width: 71.25em) {
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=standfirst] p:first-of-type {
border-top: unset;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role=inline].element {
max-width: 630px;
}
}
@media (min-width: 71.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(2, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(7, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name=meta]:before {
content: "";
width: 540px;
position: absolute;
top: 0;
background-color: var(--headerBorder);
height: 1px;
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name=standfirst] p {
border-top: unset;
}
.furniture-wrapper .standfirst:before,
.
