The Guardian Headline Full-typsnittsfamiljen innehåller flera stilar, var och en med olika vikter och kursiver. Den lätta versionen (vikt 300) finns i både vanlig och kursiv stil, liksom den vanliga versionen (vikt 400). Medium- (vikt 500) och semibold-stilarna (vikt 600) har också vanliga och kursiva alternativ. Varje typsnittsfil finns tillgänglig i WOFF2-, WOFF- och TrueType-format från Guardians servrar.
@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;
}
}
Den huvudsakliga interaktiva innehållskolonnen har specifik styling för element. Element inom denna kolumn har ingen marginal ovanför eller under men inkluderar utfyllnad. När ett stycke följer ett element justeras mellanrummet därefter. Inline-element är begränsade till en maximal bredd på 620 pixlar.
För större skärmar är inline-figurer också begränsade till 620 pixlar. Specialstil tillämpas på videoloopar, inklusive knappplacering och bildtextpositionering. Självhostade videor är inställda på en maximal bredd på 620 pixlar med centrerade marginaler, medan immersiva videor expanderar till full bredd med justerade marginaler på större skärmar.
Färgvariabler definierar temat, såsom datumlinje, rubrikkanter och bildtextfärger. I mörkt läge anpassas dessa färger till ett mörkare färgschema. Det första stycket efter vissa element får extra topputfyllnad, och den första bokstaven i det första stycket kan vara stiliserad på ett distinkt sätt.
CSS-koden definierar stilar för initialer, utdrag och olika layoutelement på olika delar av en webbplats, såsom artiklar, kommentarer och features. Den sätter specifika typsnitt, storlekar och färger för den första bokstaven i stycken, justerar bredden och positioneringen för immersiva och showcase-element och skapar ett responsivt rutnätslayout för större skärmar. Stilarna inkluderar också media queries för att anpassa layouten för olika skärmstorlekar.
Furniture-wrappern sätter standfirst-innehållet att ha en relativ position med en topputfyllnad på 2 pixlar och ingen höger marginal. Inom standfirst har listobjekt en typsnittsstorlek på 20 pixlar, och länkar har ingen kant, ingen bakgrundsbild, en understrykning med en offset på 6 pixlar och en färg från den anpassade egenskapen `--headerBorder` (standard `#dcdcdc`). Vid hovring ändras länkens understrykning till färgen definierad av `--new-pillar-colour`.
För större skärmar (61.25em och uppåt) har figurer ingen vänster marginal, och inline-element med en specifik roll är begränsade till en maximal bredd på 630 pixlar. Vid 71.25em och uppåt använder layouten ett rutnät med definierade kolumner och rader. En dekorativ linje visas före meta-sektionen, och en vertikal linje läggs till före standfirst. Styckekanter tas bort vid detta brytpunkt.
Vid 81.25em justeras rutnätet för att inkludera fler kolumner, och de dekorativa linjerna ompositioneras.
Rubriker har en typsnittsvikt på 600 och en maximal bredd på 620 pixlar, med en typsnittsstorlek på 32 pixlar. På större skärmar (71.25em och uppåt) ökar rubriktypsnittsstorleken till 50 pixlar, och den maximala bredden minskar till 540 pixlar.
För medelskärmar (46.25em och uppåt) har element med klassen `keyline-4` eller attributet `data-gu-name=lines` ingen höger marginal. På större skärmar (61.25em och uppåt) är dessa element dolda. Deras SVG-streck använder färgen `--headerBorder`.
Denna CSS-kod definierar stilar för en webbsideslayout, särskilt för en furniture-tematisk wrapper. Den sätter olika egenskaper för element som metainformation, standfirst-text, huvudmedia och bildtexter. Stilarna inkluderar justeringar för marginaler, utfyllnad, färger och positionering, med specifika regler för olika skärmstorlekar med hjälp av media queries. Designen använder anpassade CSS-variabler för färger, såsom mörkt läge-funktioner och bakgrundsnyanser, och säkerställer responsivt beteende över olika enheter.
CSS-koden stylar element inom en furniture-wrapper-klass. Rubriker (h1) är fetstilta och ljusgrå (#dcdcdc). Figurer i rubriker har ingen toppmarginal och en liten bottenmarginal.
För skärmar bredare än 71.25em visas en färgad linje före meta-sektionen. Text och sammanfattningar i meta-sektionen är ljusgrå. Sociala medie-knappar har en färgad kant och ikon, där ikonen och texten ändrar färg vid hovring.
Länkar i meta-sektionen använder en temafärg och behåller den färgen vid hovring, med en understrykning i samma färg. I standfirst-sektionen är länkar understrukna med en ljusgrå linje som ändras till temafärgen vid hovring. Stycken och listobjekt i standfirst är ljusgrå.
På skärmar bredare än 61.25em har det första stycket i standfirst en toppkant, som tas bort på skärmar bredare än 71.25em. På dessa större skärmar visas också en färgad linje före standfirst.
För skärmar bredare än 46.25em får furniture-wrappern en mörk bakgrund och en högerkant.
CSS definierar en `.furniture-wrapper` med pseudo-element som skapar sidofält. Dessa justerar bredd och position baserat på viewport-storlek för att upprätthålla ett centrerat innehållsområde med fasta bredder (738px, 978px, 1138px, 1298px) över olika brytpunkter, med hänsyn till scrollbar-bredd. Kanter och bakgrundsfärger appliceras med hjälp av CSS-anpassade egenskaper.
För rubriker inom artiklar använder `h2`-element en lätt typsnittsvikt (200), men byter till fetstil (700) om de innehåller ett `strong`-element.
`@font-face`-reglerna laddar typsnittsfamiljen "Guardian Headline Full" i flera vikter och stilar (Light, Light Italic, Regular, Regular Italic) från Guardians servrar.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");
font-weight: 400;
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-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
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-Medium.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.ttf) format("truetype");
font-weight: 500;
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-MediumItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.ttf) format("truetype");
font-weight: 500;
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-Semibold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.ttf) format("truetype");
font-weight: 600;
font-style: normal;
}
@font-face {
