Ez a CSS kód egy "Guardian Headline Full" nevű egyedi betűkészlet-családot definiál több betűvastagsággal és stílussal. Meghatározza a betűfájlokat különböző formátumokban (WOFF2, WOFF és TTF) és a hozzájuk tartozó URL-eket minden variációhoz, beleértve a light, regular, medium és semibold vastagságokat, mind normál, mind dőlt stílusban.
A Guardian Headline Full betűkészlet-család több stílust tartalmaz: bold (normál és dőlt), black (normál és dőlt), light (normál és dőlt) és regular (normál és dőlt). Minden stílus elérhető WOFF2, WOFF és TrueType formátumban, a megadott URL-eken hosztolva. Emellett a Guardian Titlepiece betűkészlet bold (normál stílus) változata is szerepel ugyanazokkal a fájlformátumokkal.
A Guardian Headline Full betűkészlet-család több stílust tartalmaz, mindegyik több formátumban elérhető (woff2, woff és ttf). Itt a részletek:
- Regular Italic: 400-as vastagság, dőlt stílus
- Medium: 500-as vastagság, normál stílus
- Medium Italic: 500-as vastagság, dőlt stílus
- Semibold: 600-as vastagság, normál stílus
- Semibold Italic: 600-as vastagság, dőlt stílus
- Bold: 700-es vastagság, normál stílus
- Bold Italic: 700-es vastagság, dőlt stílus
- Black: 900-es vastagság, normál stílus
- Black Italic: 900-es vastagság, dőlt stílus
Minden betűtípus ugyanabból a könyvtárból származik és nem tartalmaz alternatív karakterkészleteket.
A megadott szöveg CSS kódnak tűnik, amely betűstílusokat és elrendezési rácsokat határoz meg egy weboldalhoz, valószínűleg a The Guardian számára. Tartalmaz font-face szabályokat egyedi betűtípusokhoz és reszponzív rács elrendezéseket, amelyek a képernyő mérete alapján igazodnak. A kód meghatározza a különböző tartalmi elemek területeit és stílusbeállításokat határoz meg különböző eszközszélességekhez.
Az interaktív rács ábrákhoz, melyek immerzív feliratokkal rendelkeznek, a felirat felső paddingje 4 képpontra van állítva, máshol 0.
Az interaktív rács tartalmon belüli, `lines` és `meta` adattulajdonságokkal rendelkező elemek egy 2-től 5-ig terjedő sor és 1-től 2-ig terjedő oszlop átfogó rács területen helyezkednek el. A `lines` elemek magassága a tartalmukhoz igazodik és 5 képpont felső margóval rendelkeznek, míg a `meta` elemek 18 képpont felső margóval.
81.25em-nél szélesebb képernyőkon az interaktív tartalom rács elrendezése 219px, 1px, 620px, 80px és 300px oszlopokat használ.
iOS és Android eszközökön a cikkfejlécek specifikus betűtípusokat és stílusokat használnak:
- A standfirst szöveg Guardian Headline vagy hasonló serif betűtípust használ közepes vastagsággal.
- A section kicker blokkként jelenik meg, és az első betűje nagy kezdőbetűs.
- Egy keyline elem 12 képpont felső paddingdel rendelkezik.
- A byline szerzőneve vastag serif betűtípust használ, és a benne lévő linkek szintén vastagok.
- Az kép ábrák automatikus magassággal rendelkeznek, és az atomic elemeket követő bekezdéseknek nincs felső margójuk.
A "Guardian Headline Full" betűkészletéhez light és light italic vastagságú betűtípusok vannak definiálva, woff2, woff és ttf fájlokból származtatva.
A Guardian Headline Full betűkészlet-család különböző stílusokat és vastagságokat tartalmaz, mint például regular, italic, medium, medium italic, semibold, semibold italic, bold és bold italic. Minden stílus több formátumban elérhető, beleértve a woff2, woff és ttf formátumokat.
Ez a CSS kód betűstílusokat és elrendezési szabályokat határoz meg egy weboldalhoz. Meghatározza a "Guardian Headline" és "Guardian Titlepiece" betűfájljait különböző formátumokban (WOFF2, WOFF, TTF) különböző vastagságokkal és stílusokkal. Tartalmaz reszponzív tervezési szabályokat is, amelyek a margókat, szélességeket és pozicionálást igazítják különböző képernyőméretekhez. Például nagyobb képernyőkon a fő tartalom oszlop bal margót és függőleges szegélyt kap, míg az immerzív elemek teljes szélességűre bővülnek kisebb képernyőkon. A kód színváltozókat és térközöket is beállít olyan elemekhez, mint bekezdések, listák és atomok.
A cikk, interaktív, komment és feature törzsek bizonyos elemeit követő első bekezdés felső paddingje 14px.
Ezen elemeket követő első bekezdés első betűje specifikus betűtípussal, vastag vastagsággal, 111px mérettel, 92px sorközzel, balra floatolva, nagybetűvel, box-sizinggel, 8px jobb margóval, függőleges igazítással és egy színváltozóval van stílusozva.
A vízszintes vonalat közvetlenül követő bekezdéseknek nincs felső paddingjük.
A showcase elem feliratai statikusan pozicionálva vannak 100% szélességgel és 620px maximális szélességgel.
Az immerzív elemek a teljes viewport szélességét lefedik mínusz a görgetősáv. 71.24em-ig terjedő képernyőkon a maximális szélességük 978px, és a felirataiknak 10px vízszintes paddingjük van. 30em és 71.24em között a feliratoknak 20px vízszintes paddingjük van. 46.25em és 61.24em közötti képernyőkre az immerzív elemek maximális szélességgel rendelkeznek.
```css
@media (max-width: 740px) {
.element.element--immersive.element-immersive {
margin-left: -10px !important;
margin-right: 0 !important;
left: 0;
}
}
@media (max-width: 740px) and (min-width: 480px) {
.element.element--immersive.element-immersive {
margin-left: -20px !important;
}
.element.element--immersive.element-immersive figcaption {
padding-inline: 20px;
}
}
@media (min-width: 980px) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0;
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] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start] 0.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: 980px) and (min-width: 1140px) {
.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: 980px) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role=inline].element {
max-width: 630px;
}
}
@media (min-width: 1140px) {
.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,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name=standfirst]:before {
content: "";
width: 1px;
background-color: var(--headerBorder);
height: 100%;
position: absolute;
top: 0;
left: 0.5px;
}
}
@media (min-width: 1300px) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(8, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] 0.75fr [standfirst-end meta-end portrait-end];
}
}
```
A megadott szöveg CSS kódnak tűnik egy weboldal elrendezésének stílusozásához, beleértve elemeket, mint címsorok, meta információk, feliratok és média. Stílusokat határoz meg különböző képernyőméretekhez és tartalmaz színváltozókat világos és sötét módhoz.
iOS és Android eszközökön a CSS beállítja az első betű színét specifikus cikk konténerekben egy másodlagos pillér színre. Beállítja továbbá a cikkfejléc magasságát nullára és stílust alkalmaz a furniture wrapperre, beleértve paddinget, címkék betűtulajdonságait és címsor formázást specifikus betűmérettel, vastagsággal és színnel. A furniture wrapperen belüli kép elemek szintén célpontul szolgálnak a stílusozáshoz.
Androidon a cikk konténerekben lévő képeknél a kép elem relatívan pozicionálva van 14px felső margóval, nincs alsó margója, és -10px bal margóval. Szélessége a teljes viewport szélesség mínusz a görgetősáv szélessége, magassága automatikusan igazodik.
iOS-en és Androidon a képek belső elemeinek (mint a figure konténer, maga a kép és linkek) átlátszó a hátterük. Szélességük megegyezik a viewport szélesség mínusz a görgetősáv szélességével, magasságuk automatikus, felülírva minden más magasságbeállítást.
A standfirst szakaszra (cikk összefoglaló) iOS-en és Androidon egyaránt 4px felső padding, 24px alsó padding és -10px jobb margó vonatkozik.
A standfirston belüli szöveg Guardian Headline betűkészlet-családot vagy hasonló serif betűtípusokat használ. A standfirstban lévő linkek egy specifikus színnel vannak stílusozva, nincs háttérképük, aláhúzott szöveggel 6px eltolással, egyedi aláhúzás színnel és nincs szegélyük.
iOS és Android eszközökön, feature, standard és komment cikk konténerekre a következő stílusok vonatkoznak:
- A standfirst szakaszban lévő linkek aláhúzás színe az új pillér színre változik hover esetén.
- A meta szakasznak nincs margója.
- A szerzőnevek és byline elemek az új pillér színt használják szövegükhöz.
- A meta misc szakasznak nincs paddingje.
- A meta misc szakaszon belüli SVG ikonok tovább nincsenek stílusozva ebben a kódrészletben.
iOS és Android eszközökön a következő stílusok vonatkoznak:
- A meta szakaszban lévő SVG ikonok az új pillér színt használják vonalaikhoz.
- A showcase elemekben lévő felirat gomb középre igazított flex konténerként jelenik meg, 28px x 28px méretben, 5px paddinggel és 14px-re jobbról pozicionálva.
- A cikk törzs tartalom 12px vízszintes
