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. Tartalmazza a könnyű, normál, közepes és félig félkövér vastagságokat, mindegyiket normál és dőlt változatban. A betűtípusokat a Guardian szervereiről tölti be három különböző fájlformátumban: WOFF2, WOFF és TrueType.
@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;
}
}
Az interaktív tartalom oszlopának bal oldali szegélye és meghatározott térközölése van az elemek számára. A bizonyos elemeket követő bekezdések extra felső belső margót kapnak, és e bekezdések első betűje nagy, színes süllyesztett iniciálként van stílusozva. A soron belüli elemek és ábrák maximális szélessége korlátozott. Különféle színváltozók vannak definiálva a konzisztens témázáshoz.
A bizonyos konténereken belüli idézetek maximális szélessége 620 képpont legyen.
A főcikkekben, riportokban, szabványos cikkekben és hozzászólásokban található bemutató elemek feliratai statikus pozícióban legyenek, teljes szélességet foglaljanak el, és szintén legyen 620 képpont a maximális szélességük.
Az átfogó elemeknek a teljes nézeti szélességet kell kitölteniük, mínusz a görgetősáv. Nagyobb képernyőkön (71.24 em felett) a maximális szélességük 978px, a felirat belső margója pedig különböző töréspontokon módosul. Közepes képernyőkön (46.25 em és 61.24 em között) a maximális szélesség 738px. Kisebb képernyőkön (46.24 em alatt) ezeknek az elemeknek ne legyen bal margójuk, és a bal széléhez kell igazodniuk, a nagyon kis képernyők számára pedig módosított margókkal és felirat belső margóval.
A nagy képernyőkön (61.25 em felett) a bútor burkolóelem számára rács elrendezést használnak meghatározott oszlopokkal és sorokkal. A főcímek felső szegélyt kapnak, a meta információk viszonylagos pozícióban vannak, és a bevezető szövegnek meghatározott stílusa van a linkekre és a térközölésekre. A burkoló elemen belüli ábrák módosított margókkal rendelkeznek, és a soron belüli elemek maximális szélessége 630px. Extra nagy képernyőkön (71.25 em felett) a rács sablon módosul, hogy több oszlopot tartalmazzon.
A CSS egy rács elrendezést definiál egy oldalfejhez, területekkel a cím, főcím, bevezető szöveg, meta információk és egy portré számára. Meghatározott méreteket és pozíciókat állít be ezekhez az elemekhez különböző képernyőméreteknél. A stílusozás tartalmaz szegélyeket, betűtípusokat és színeket, valamint módosításokat a közösségi média ikonokhoz, feliratokhoz és a mobil- és asztali nézetekre vonatkozó reszponzív viselkedéshez.
A CSS kód stílusokat definiál egy weboldal elrendezéséhez, egy "furniture-wrapper" nevű komponensre összpontosítva. Ennek a komponensnek sötét háttere van, és a margóit és belső margóit a képernyőméret alapján módosítja. Nagyobb képernyőkön dekoratív oldalsávokat ad hozzá.
Ezen burkoló elemen belül az olyan elemek, mint a cikkfejlécek, főcímek és meta információk (például a közösségi megosztás gombok) vannak stílusozva. A főcímek világosszürke színt és félkövér betűtípust használnak. A közösségi gomboknak színes szegélye van, amely egy témaszínnel egyezik, és rámutatáskor egyszínűvé válnak.
A kód kezeli a feliratok és egy felirat váltó gomb láthatóságát is a média elemekhez. Összességében a stílusok biztosítják, hogy az elrendezés reszponzív és vizuálisan konzisztens legyen különböző eszközökön.
Ez a CSS kód stílusokat definiál egy weboldal komponenséhez, valószínűleg egy oldalsávhoz vagy tartalom burkolóelemhez. Szövegszíneket, link megjelenéseket és elrendezési módosításokat állít be különböző képernyőméretekhez. A linkek meghatározott színekkel és aláhúzással vannak stílusozva, és az elrendezés olyan háttér elemeket tartalmaz, amelyek a nézeti szélesség alapján módosulnak. A kód kezeli a különféle elemek szegélyeit és térközölését is a komponensen belül.
A CSS kód stílusokat definiál a cikk elemekhez és betölt egyedi betűtípusokat. Beállítja a hozzászólások szegély színét, hogy egyezzen a fejléc szegély színével. A cikk címsoraihoz alapértelmezetten könnyű betűvastagságot használ, de félkövérre vált, ha a címsor erős címkét tartalmaz.
Ezen kívül importálja a Guardian Headline Full betűkészlet-családot különböző vastagságokban és stílusokban (könnyű, normál, közepes, félig félkövér, mindegyik normál és dőlt változatban) a Guardian szervereiről, több fájlformátumot megadva a böngésző kompatibilitás érdekében.
A "Guardian Headline Full" betűtípus félig félkövér dőlt (600-as vastagság), félkövér (700-es vastagság), félkövér dőlt (700-es vastagság), fekete (900-as vastagság) és fekete dőlt (900-as vastagság) stílusokkal van definiálva. Minden stílus tartalmaz WOFF2, WOFF és TrueType formátumú betűtípus fájlokat, amelyek a Guardian szerverein találhatók.
Ezen kívül a "Guardian Titlepiece" betűtípus félkövér stílusban (700-es vastagság) van definiálva, szintén WOFF2, WOFF és TrueType fájlokkal.
iOS és Android eszközökhöz sötét háttérszín és meghatározott funkciószínek vannak beállítva. Sötét módban a funkciószín ennek megfelelően módosul.
iOS és Android rendszereken meghatározott CSS szabályokat alkalmaznak a bizonyos cikk konténerekben található első bekezdés első betűjének stílusozására, olyan elemeket követve, mint az `.element-atom` vagy a bejelentkezési kapuk.
Android eszközökön a szabványos és hozzászólás cikkek első bekezdésének első betűje egy másodlagos pillér színnel van stílusozva. iOS és Android rendszereken egyaránt a cikkfejlécek el vannak rejtve, és a bútor burkolóelemnek meghatározott belső margója van. A bútor burkoló elemen belüli címkék félkövér, nagybetűs betűtípust használnak egy új pillér színnel. A főcímek 32px-re, félkövérre, alsó belső margóval és sötét színre vannak állítva. A képábrák viszonylagos pozícióban vannak, teljes szélességű margókkal és automatikus magassággal.
Android eszközökön a cikk konténereken belüli képeknek átlátszó háttérrel kell rendelkezniük, a teljes nézeti szélességet kell kitölteniük (a görgetősáv figyelembevételével), és a magasságuk automatikusan kell igazodjon.
iOS és Android rendszereken egyaránt a cikkek bevezető szövegének meghatározott térközölése van: 4 képpont belső margó felül és 24 képpont alul, 10 képpont negatív margóval jobbra.
A bevezető szövegen belüli bekezdéseknek a Guardian főcím betűkészlet-családját kell használniuk.
A szövegen belüli linkeknek meghatározott színnel kell stílusozódniuk, egy aláhúzással, amely 6 képpontra van pozicionálva a szöveg alatt, és világosszürke aláhúzó színnel, háttérkép vagy szegély nélkül. Rámutatáskor az aláhúzásnak a link szöveg színéhez kell változnia.
Ezen kívül a cikkek metaadat szakasza iOS és Android rendszereken egyaránt meghatározott stílusozást kap.
Ez a CSS kód stílusokat állít be iOS és Android eszközök cikk konténereihez. Módosítja a margókat, színeket, belső margókat és gomb megjelenéseket különféle cikktípusokhoz és azok összetevőihez.
iOS és Android eszközökön, a riport, szabvá
