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. Megadja a betűfájlokat különböző formátumokban (WOFF2, WOFF és TrueType) és azok online helyeit, hogy a böngésző letölthesse és használhassa őket. A betűkészlet tartalmaz vékony (300), normál (400), közepes (500) és félig félkövér (600) vastagságokat, mindegyik normál és dőlt stílusban.
@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://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://interactive.guim.co.uk/fonts/garnett/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 {
left: -10px;
}
}
Az interaktív főoszlop tartalma előtt bal oldali szegély kerül hozzáadásra, 11 képpontnyira balra pozicionálva. Az ezen oszlopon belüli elemeknek nincs felső vagy alsó margójuk, de 12 képpontnyi padding található felül és alul is. Amikor egy bekezdést egy elem követ, a padding eltávolításra kerül, és helyette 12 képpontnyi margó alkalmazásra kerül. A soron belüli elemek maximális szélessége 620 képpont, ami a 61.25em-nél szélesebb képernyőkön a soron belüli ábrákra is vonatkozik.
Egyéni tulajdonságok határozzák meg a különböző elemek színeit, mint például a dátumvonal, fejléc szegély, képaláírás szöveg és háttér, a jellegzetes szín pirosra van állítva, és egy új pillér szín alapértelmezés szerint az elsődleges vagy jellegzetes színre van állítva. Az atom osztállyal rendelkező elemeknek nincs paddingjük.
Az adott elemeket vagy egy vízszintes vonalat követő első bekezdések különböző tartalmi területeken 14 képpont felső paddinget kapnak. Ezen bekezdések első betűje egy nagy, félkövér, nagybetűs betűtípussal van stílusozva egy adott színben, balra lebegve margóval és függőleges igazítással.
Ezenkívül a vízszintes vonalat közvetlenül követő bekezdések ezekben a területeken nem kapnak felső paddinget.
A meghatározott tartalmi területeken belüli idézetek maximális szélessége 620 képpont.
A fő tartalomban és cikk konténerekben található bemutató elemek képaláírásai statikusan pozicionáltak, teljes szélességgel rendelkeznek, szintén 620 képpontra korlátozva.
Az átfogó elemek a teljes nézeti szélességet ölelik fel mínusz a görgetősáv. A 71.24em szélességű képernyőkön ezek az elemek 978 képpontra korlátozódnak, a képaláírások paddingje 10px a kisebb képernyőkön és 20px a közepeseken. 46.25em és 61.24em között a maximális szélesség 738 képpont. 46.24em alatt az átfogó elemek a bal széléhez igazodnak, módosított margókkal és 20px képaláírás paddinggel közepes képernyőkön.
A nagyobb képernyőkön (61.25em és afölött) a bútor burkolóknál rácsos elrendezést használnak meghatározott oszlopokkal és sorokkal. A címsorok felső szegéllyel rendelkeznek, a meta szakaszok felső paddinggel, a bevezető szövegek pedig stílusozott linkeket tartalmaznak aláhúzással, amelyek színe megváltozik rámutatáskor. Kezdetben a bevezető szöveg első bekezdése felső szegéllyel rendelkezik, amelyet a szélesebb képernyőkön (71.25em és afölött) eltávolítanak. A burkolón belüli ábráknak nincs alsó margójuk és bal eltolásuk, a soron belüli elemek 630 képpontra korlátozódnak. A legnagyobb képernyőkön a rács módosítja oszlopstruktúráját a jobb elrendezés érdekében.
Az elrendezés egy rácsot használ meghatározott oszlopokkal és sorokkal különböző képernyőméretekhez. Nagyobb képernyőkön a rács úgy módosul, hogy három egyenlő oszlopa legyen a cím, címsor és meta szakaszok számára, majd öt a bevezető szöveg számára, és nyolc a portré számára, a sorok magassága törtrészekre van állítva. Egy vékony vonal jelenik meg a meta szakasz felett, a bevezető szöveg bal oldalán pedig függőleges vonal található.
A címsorok félkövérek és méretük és szélességük a képernyőtől függően változik: legfeljebb 620px széles és 32px betűméret a kisebb képernyőkön, és 540px széles 50px betűmérettel a nagyobbakon. Néhány dekoratív vonal rejtve van a nagyobb képernyőkön, a közösségi megosztás és hozzászólás elemek pedig a fejléc színével megegyező szegéllyel rendelkeznek.
A bevezető szöveg normál vastagságú, 20px méretű, paddinggel alul, és kissé balra tolódik bal paddinggel. A fő média képek kitöltik a szélességet és módosítják a margókat különböző képernyőméretekhez, a képaláírások alul pozicionálva, háttérszínnel és egyéni szövegszínnel. Nagyon kis képernyőkön a média a teljes nézeti szélességet öleli fel mínusz a görgetősáv.
A bútor burkoló sötét háttérszínt állít be, és módosítja a margókat és paddinget különböző képernyőméretekhez. Nagyobb képernyőkön dekoratív oldalsávokat ad hozzá. A címsorok világosszürke, félkövér szöveggel vannak stílusozva, a meta információk hasonló színeket használnak. A közösségi média gombok egyedi színnel rendelkeznek, amely rámutatáskor megváltozik, felcserélve a szöveg és háttér színeit kontraszt érdekében. A képaláírások alapértelmezés szerint rejtve vannak, de egy gombbal láthatóvá tehetők, és különféle elemek láthatósága és elrendezése a képernyőszélességtől és egyéb feltételektől függően alakul.
A "furniture-wrapper" osztállyal és azok gyermekeivel rendelkező elemek meghatározott stílus szabályokkal rendelkeznek:
- A meta szakasz linkjei a pillér színével vagy egy sötét mód jellegzetes színével vannak színezve, ugyanez a szín alkalmazva rámutatáskor a szövegre és az aláhúzásra.
- A bevezető szöveg linkjeinek nincs szegélyük, a pillér színét vagy sötét mód jellegzetes színét használják a szöveghez, eltávolítják a háttérképeket, és aláhúzással rendelkeznek 6px eltolással és fejléc szegély színnel. Rámutatáskor az aláhúzás színe a pillér színére vagy sötét mód jellegzetes színére változik.
- A bevezető szöveg bekezdései és listaelemei világosszürke színűek (#dcdcdc).
- Nagyobb képernyőkön (min-width: 61.25em) a bevezető szöveg első bekezdése felső szegéllyel rendelkezik, amelyet még nagyobb töréspontokon (min-width: 71.25em) eltávolítanak.
- Pszeudo-elemeket (:before és :after) használnak oldalsávok létrehozására sötét háttérrel és szegéllyel, módosítva szélességüket és pozíciójukat a nézeti mérettől és görgetősáv szélességétől függően különböző képernyőméretekhez.
- A meta szakasz kulcsszálai és közösségi/hozzászólás elemei a fejléc szegély színét használják vonalakhoz és stílusozáshoz.
A hozzászólás szakasznak olyan szegély színe van, amely megegyezik a fejléc szegély színével.
A cikkekben a második szintű címsorok 200-as világos betűvastagsággal rendelkeznek. Ha azonban egy második szintű címsor félkövér elemet tartalmaz, akkor 700-as nehezebb betűvastagságot használ.
Ezenkívül a Guardian Headline Full betűkészlet-család különféle stílusokkal és vastagságokkal van definiálva, beleértve a vékony, normál, közepes és félig félkövér változatokat, mindegyik elérhető normál és dőlt verziókban. Ezek a betűtípusok konkrét URL-ekről származnak WOFF2, WOFF és TrueType formátumokban.
Ez a CSS kód több betűk
