Tämä CSS-koodi määrittelee "Guardian Headline Full" -fonttiperheen eri painoilla ja tyyleillä. Se sisältää kevyen (300), normaalin (400), keskiraskaan (500) ja puoliraskaan (600) version, kukin sekä normaalina että kursiivisena. Fonttitiedostot on toimitettu WOFF2-, WOFF- ja TrueType-muodoissa Guardianin verkkoresursseista.
Tämä CSS-koodi määrittelee useita fonttiperheitä Guardian-verkkosivun otsikoille ja nimikkeille. Se määrittää eri fontin painot ja tyylit (normaali ja kursiivi) "Guardian Headline Full" -perheelle, mukaan lukien kevyt (300), normaali (400), lihavoitu (700) ja musta (900) paino. Jokainen fontti on toimitettu useassa muodossa (WOFF2, WOFF ja TrueType) selainyhteensopivuuden varmistamiseksi. Lisäksi se määrittelee "Guardian Titlepiece" -fonttiperheen lihavoituna (700) samoilla tiedostomuodoilla.
Tämä CSS-koodi määrittelee useita fonttimääritelmiä "Guardian Headline Full" -fonttiperheelle, kukin eri painoilla ja tyyleillä (normaali ja kursiivi). Fontit on noudettu eri tiedostomuodoista (WOFF2, WOFF ja TrueType), jotka sijaitsevat Guardianin resurssipalvelimella. Painot vaihtelevat normaalista (400) mustaan (900), varmistaen että fonttia voidaan käyttää erilaisissa typografisissa yhteyksissä ylläpitäen samalla yhtenäisyyttä verkkoplattformeilla.
Tämä teksti näyttää olevan CSS-koodia, joka määrittelee fonttityylejä ja responsiivisia grid-asetteluja verkkosivulle, luultavasti The Guardianille. Se määrittää fonttitiedostot eri painoille ja tyyleille, ja asettaa sitten grid-pohjat, jotka muuttuvat eri näytönleveyksillä uudelleenjärjestääkseen sisältöalueita kuten otsikon, median ja päätekstin. Koodi säätää täytteitä, sarakevälejä ja elementtien sijaintia eri laitekokoihin optimaalista näyttämistä varten.
Interaktiivisissa grid-kuvissa, joissa on immersiivisiä kuvatekstejä tietyillä sisältöalueilla, kuvatekstin täyte asetetaan 4 pikseliin yläreunassa ja 0 muualle.
Eri sisältöosioissa elementit nimeltä "lines" ja "meta" interaktiivisissa grideissä sijoitetaan grid-alueelle riviltä 2 riville 5 ja sarakkeesta 1 sarakkeeseen 2. "Lines"-elementeillä on korkeus, joka sopii niiden sisältöön, ja ylämarginaali 5 pikseliä, kun taas "meta"-elementeillä on 18 pikselin ylämarginaali.
Suurilla näytöillä (min-width: 81.25em) nämä osioiden interaktiiviset gridit käyttävät viisisarakkeista asettelua tietyillä leveysarvoilla.
iOS- ja Android-laitteissa artikkeleiden otsikoilla on mukautettuja tyylejä: johdantoteksti käyttää tiettyä fonttiperhettä keskiraskaudella, osio-otsakkeet näkyvät lohkoina isoilla alkukirjaimilla, erottelut saavat lisää yläreunan täytettä, tekijänimet käyttävät lihavoitua serif-fonttia, kuvat säätevät korkeuttaan automaattisesti ja atomielementtien jälkeisillä kappaleilla ei ole ylämarginaalia.
Lisäksi Guardian Headline Full -fontin kevyet ja kevyet kursiiviset painot määritellään niiden vastaavilla lähdetiedostoilla ja muodoilla.
Tämä teksti määrittelee mukautetun fonttiperheen nimeltä "Guardian Headline Full" eri tyyleillä ja painoilla. Se sisältää normaalin, keskiraskaan, puoliraskaan ja lihavoituneen version, kukin saatavilla sekä normaalina että kursiivisena. Fonttitiedostot on toimitettu WOFF2-, WOFF- ja TrueType-muodoissa Guardianin verkkosivustolta.
@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 {
/ Täällä voidaan lisätä muita tyylejä tarvittaessa /
}
Ensimmäisellä kappaleella erilaisissa sisältöosioissa, kuten artikkeleiden pääosissa, interaktiivisessa sisällössä, kommenteissa ja erikoisosioissa, on yläreunan täyte 14 pikseliä. Lisäksi näiden kappaleiden ensimmäinen kirjain muotoillaan tietyllä fontilla, koolla ja värillä, näyttäen suurena isolla alkukirjaimena.
Vaakaviivan jälkeisiltä kappaleilta poistetaan yläreunan täyte.
Esittelyelementtien kuvatekstit asetetaan staattiseen asentoon enimmäisleveydellä 620 pikseliä.
Immersiiviset elementit ulottuvat koko näkymän leveyteen, sopeutuen enimmäismäärään 978 pikseliä näytöillä, jotka ovat kapeampia kuin 71.24em. Niiden kuvateksteissä on täyte, joka vaihtelee näytön koon mukaan 10 pikselistä pienemmillä laitteilla 20 pikseliin keskikokoisilla näytöillä.
@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 #stand
