Ez a CSS kód a "Guardian Headline Full" betűkészlet-családot határozza meg különböző vastagságokkal és stílusokkal. Tartalmazza a light (300), regular (400), medium (500) és semibold (600) változatokat, mindegyiket normál és dőlt stílusban. A betűtípus-fájlok WOFF2, WOFF és TrueType formátumban érhetők el a Guardian webes eszköztárából.
Ez a CSS kód több betűkészlet-családot határoz meg a Guardian weboldalának címsoraihoz és címképeihez. Meghatározza a különböző betűvastagságokat és stílusokat (normál és dőlt) a "Guardian Headline Full" család számára, beleértve a light (300), regular (400), bold (700) és black (900) vastagságokat. Minden betűtípus több formátumban (WOFF2, WOFF és TrueType) érhető el a böngészőkompatibilitás érdekében. Ezenkívül meghatározza a "Guardian Titlepiece" betűkészlet-családot bold vastagságban (700) ugyanazokkal a fájlformátumokkal.
Ez a CSS kód több betűtípus-stílust határoz meg a "Guardian Headline Full" betűkészlet-családhoz, mindegyiket különböző vastagságokkal és stílusokkal (normál és dőlt). A betűtípusok a Guardian eszközszerverén tárolt különböző fájlformátumokból (WOFF2, WOFF és TrueType) származnak. A vastagságok a regular (400)-tól a black (900)-ig terjednek, biztosítva, hogy a betűtípus különböző tipográfiai kontextusokban használható legyen, miközben konzisztenciát tart fenn a webes platformokon.
Ez a szöveg CSS kódnak tűnik, amely egy weboldal (valószínűleg a The Guardian) betűstílusait és reszponzív rács elrendezéseit határozza meg. Meghatározza a betűtípus-fájlokat különböző vastagságokhoz és stílusokhoz, majd beállít olyan rács sablonokat, amelyek különböző képernyőszélességeknél változnak, hogy átrendezzék a tartalmi területeket, mint a cím, média és szövegtörzs. A kód a különböző eszközméretekhez igazítja a paddingot, oszlopközöket és elemek pozicionálását az optimális megjelenítés érdekében.
Az interaktív rács ábrákhoz, melyek részletes feliratokkal rendelkeznek meghatározott tartalmi területeken, a felirat paddingja 4 képpixel felül és 0 máshol van beállítva.
Különböző tartalmi szakaszokban az interaktív rácsokon belüli "lines" és "meta" nevű elemek a 2-től 5-ig terjedő sorban és az 1-től 2-ig terjedő oszlopban helyezkednek el a rács területén. A "lines" elemek magassága a tartalmukhoz igazodik és 5 képpixel felső margóval rendelkeznek, míg a "meta" elemek 18 képpixel felső margóval.
Nagyobb képernyőken (min-width: 81.25em) ezeknek a szakaszoknak az interaktív rácsai egy ötoszlopos elrendezést használnak meghatározott szélességekkel.
iOS és Android eszközökön a cikkfejlécek testreszabott stílusokkal rendelkeznek: a bevezető szöveg egy specifikus betűkészlet-családot használ közepes vastagsággal, a szekció jelzői blokkként jelennek meg nagybetűvel kezdődő első betűvel, a kulcssorok megnövelt felső paddinggal rendelkeznek, a szerzői byline-ok félkövér serif betűtípust használnak, a képábrák automatikusan igazítják magasságukat, és az atomi elemeket követő bekezdéseknek nincs felső margójuk.
Ezenkívül a Guardian Headline Full light és light italic vastagságú betűtípus-stílusai is definiálva vannak a hozzájuk tartozó forrásfájlokkal és formátumokkal.
Ez a szöveg egy "Guardian Headline Full" nevű egyéni betűkészlet-családot határoz meg különböző stílusokkal és vastagságokkal. Tartalmazza a regular, medium, semibold és bold változatokat, mindegyik elérhető normál és dőlt stílusban. A betűtípus-fájlok WOFF2, WOFF és TrueType formátumban érhetők el a Guardian weboldaláról.
@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 {
/ További stílusok adhatók hozzá itt, ha szükséges /
}
A különböző tartalmi szakaszok (például cikktörzsek, interaktív tartalom, hozzászólások, funkciók) első bekezdése 14 képpixel felső paddinggel fog rendelkezni. Ezen bekezdések első betűje egy specifikus betűtípussal, mérettel és színnel lesz stílusozva, nagy, nagybetűs kiemelt kezdőbetűként jelenik meg.
A vízszintes vonalat követő bekezdések esetében a felső padding eltávolításra kerül.
A showcase elemek feliratai statikus pozícióba kerülnek 620 képpixel maximális szélességgel.
Az immersive elemek a teljes nézeti szélességet lefedik, 978 képpixel maximumra igazodva a 71.24em-nél kisebb képernyőkon. Felirataik paddingje változik a képernyőmérettel, 10 képpixelről kisebb eszközökön 20 képpixelre közepes méretű képernyőkön.
@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-column
