Mae teitl y Guardian Headline Full yn cynnwys nifer o arddulliau, pob un gyda gwahanol bwysau a fersiynau italig. Mae'r ffontiau hyn ar gael mewn sawl fformat fel woff2, woff, a ttf, wedi'u gweinyddu ar weinyddwyr y Guardian. Mae'r arddulliau'n amrywio o ysgafn i ddeubwys, gyda fersiynau rheolaidd ac italig.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !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;
}
}
Mae'r brif golofn gynnwys ryngweithiol yn cael ei harddullio'n benodol ar gyfer elfennau. Nid oes gan elfennau o fewn y golofn hon fargen naill ai ar y brig neu'r gwaelod, ond maent yn cynnwys padio. Pan fydd paragraff yn dilyn elfen, mae'r gofod yn addasu yn unol â hynny. Mae elfennau mewnlin wedi'u cyfyngu i uchafswm lled o 620 picsel.
Ar gyfer sgriniau mwy, mae ffigurau mewnlin hefyd wedi'u cyfyngu i 620 picsel. Mae gan elfennau fideo gyda swyddogaeth ailadrodd arddull botwm a lleoliad wedi'u cyfaddasu. Mae fideos hunan-gweinyddol yn cael eu harddangos fel blociau, gan gymryd y lled llawn hyd at 620 picsel, gydag aliniad canolog. Mae elfennau fideo ymdrwythol yn ymestyn y tu hwnt i'r terfyn hwn, gan ddileu cyfyngiadau lled ac addasu'r marciau. Ar sgriniau lledach, mae fideos ymdrwythol yn ymestyn ymhellach, gyda marciau chwith wedi'u haddasu ar gyfer aliniad.
Mae newidynnau lliw yn diffinio gwahanol elfennau thema, fel llinell-ddata, borderi, capsiynau, a lliwiau nodwedd. Mae'r rhain yn addasu ar gyfer dewisiadau modd tywyll. O fewn corff yr erthygl, mae'r paragraff cyntaf ar ôl rhai elfennau yn derbyn padio ychwanegol ar y brig, a gall y llythyren gyntaf gael ei harddullio'n wahanol.
Mae'r cod CSS yn diffinio arddulliau ar gyfer capiau gostwng, dyfyniadau tynnwyd, a gwahanol elfennau cynllunio ar draws gwahanol adrannau gwefan. Mae capiau gostwng wedi'u harddullio gyda ffont, maint, a lliw penodol, ac maent yn cael eu fflotio i'r chwith. Mae dyfyniadau tynnwyd yn cael lled uchafswm penodol. Ar gyfer elfennau arddangos, mae capsiynau wedi'u lleoli'n statig gyda lled penodol. Mae elfennau ymdrwythol wedi'u gosod i led llawn y portwel, gydag addasiadau ar gyfer gwahanol feintiau sgrin, gan gynnwys marciau a phadio penodol ar gyfer dyfeisiau llai. Mae amlen dodrefn yn defnyddio Grid CSS ar gyfer cynllunio ar sgriniau mwy, gan greu strwythur aml-golofn a diffinio ardaloedd grid ar gyfer elfennau fel y pennawd a gwybodaeth meta. Mae hefyd yn ychwanegu border brig i'r plentyn cyntaf o elfennau pennawd.
Mae'r amlen dodrefn yn gosod cynnwys y standfirst i gael safle cymharol gyda phadio brig o 2 picsel a dim marciau dde. O fewn y standfirst, mae'r prif ardal gynnwys yn cael marciau gwaelod o 4 picsel. Mae eitemau rhestr o fewn y standfirst yn defnyddio maint ffont o 20 picsel. Mae dolenni o fewn y standfirst, gan gynnwys rhai mewn eitemau rhestr, heb border, heb ddelwedd gefndir, ac wedi'u tanlinellu gyda gwrthdro o 6 picsel, gan ddefnyddio lliw cyfaddas ar gyfer y tanlinell. Wrth hofran, mae lliw'r danlinell yn newid i liw piler newydd.
Mae gan y paragraff cyntaf yn y standfirst border brig a dim padio gwaelod. Ar gyfer sgriniau mwy (61.25em ac uwch), os yw'r sgrin hefyd o leiaf 71.25em o led, mae'r border brig yn cael ei ddileu. Ar sgriniau lledach na 61.25em, nid oes gan ffigurau fargen chwith ac mae elfennau mewnlin gyda rôl benodol wedi'u cyfyngu i uchafswm lled o 630 picsel.
Ar gyfer sgriniau o leiaf 71.25em o led, mae'r amlen dodrefn yn defnyddio cynllun grid gyda cholofnau a rhesi wedi'u diffinio. Mae adran meta yn cynnwys border brig wedi'i greu gydag elfen ffug sy'n 540 picsel o led. Nid oes gan baragraffau yn y standfirst border brig, ac mae llinell fertigol yn cael ei hychwanegu cyn y standfirst gan ddefnyddio elfen ffug arall.
Ar sgriniau hyd yn oed yn fwy (81.25em ac uwch), mae'r cynllun grid yn addasu gyda meintiau colofn a rhes gwahanol. Mae border brig meta yn ehangu i 620 picsel, ac mae'r llinell fertigol cyn y standfirst yn symud ychydig.
Mae labelau o fewn pennawd yr erthygl neu'r adran deitl yn cael padio brig o 2 picsel. Mae'r pennawd yn defnyddio pwysau ffont trwm, uchafswm lled o 620 picsel, a maint ffont o 32 picsel. Ar gyfer sgriniau o leiaf 71.25em o led, mae'r pennawd yn addasu i uchafswm lled o 540 picsel a maint ffont o 50 picsel.
Ar sgriniau canolig (46.25em ac uwch), nid oes gan elfennau gyda'r dosbarth keyline-4 neu briodwedd ddata benodol fargen dde. Ar gyfer sgriniau mwy (61.25em ac uwch), mae'r elfennau hyn yn gudd. Mae eu cynnwys SVG yn defnyddio lliw cyfaddas ar gyfer strôciau.
Mae'r cod CSS hwn yn diffinio arddulliau ar gyfer cynllun tudalen we, yn enwedig ar gyfer adran amlen dodrefn. Mae'n gosod gwahanol briodweddau ar gyfer elfennau fel gwybodaeth meta, testun standfirst, prif gyfrwng, a chapsiynau. Mae'r arddulliau'n cynnwys addasiadau ar gyfer marciau, padio, lliwiau, a lleoliad, gyda rheolau penodol ar gyfer gwahanol feintiau sgrin gan ddefnyddio ymholiadau cyfryngau. Mae'r cod hefyd yn diffinio newidynnau lliw cyfaddas ac yn sicrhau bod rhai elfennau yn gudd neu'n cael eu harddangos yn seiliedig ar amodau. Yn gyffredinol, mae'n creu dyluniad ymatebol sy'n addasu i wahanol ddyfeisiau wrth gynnal thema weledol gyson.
Mae'r cod CSS yn arddullio elfennau o fewn dosbarth amlen-dodrefn. Mae pennawdau (h1) yn drwm ac yn llwyd golau (#dcdcdc). Nid oes gan ffigurau mewn pennawdau fargen brig ac mae ganddynt fargen gwaelod bach.
Ar gyfer sgriniau lledach na 71.25em, mae llinell liw yn ymddangos cyn yr adran meta. Mae testun a chrynodebau yn yr adran meta yn llwyd golau. Mae gan ddolenni cyfryngau cymdeithasol a botymau border lliw ac maent yn defnyddio lliw penodol ar gyfer testun ac eiconau, sy'n newid i gefndir tywyll wrth hofran.
Mae dolenni yn yr adran meta yn defnyddio lliw penodol ac yn ei gadw wrth hofran gyda thanlinellau cyfatebol. Yn yr adran standfirst, mae dolenni wedi'u tanlinellu gyda lliw llwyd golau sy'n newid wrth hofran, a testun paragraff yn llwyd golau. Ar sgriniau lledach, gall y paragraff cyntaf gael neu golli border brig. Mae eitemau rhestr yn y standfirst hefyd yn llwyd golau.
Ar gyfer sgriniau lledach na 71.25em, mae llinell yn ymddangos cyn y standfirst. Ar sgriniau lledach na 46.25em, mae'r amlen yn cael cefndir tywyll a border dde.
Mae'r CSS yn diffinio arddulliau ar gyfer amlen cynllun gyda barrau ochr addurniadol sy'n addasu yn seiliedig ar led y portwel. Mae'n gosod borderi, cefndiroedd, a lleoli elfennau ffug (:before a :after) i greu'r barrau ochr hyn, gan gyfrifo eu lled a'u lleoliad mewn perthynas â'r portwel a bar sgrolio. Mae'r cyfrifiadau lled yn newid ar dorladau penodol (61.25em, 71.25em, 81.25em) i gynnwys lledau cynnwys gwahanol (738px, 978px,
