Denna CSS-kod definierar teckensnittsfamiljen "Guardian Headline Full" med flera stilar och vikter. Den inkluderar versioner för lÀtt (300), normal (400), medium (500) och halvfet (600), varje stil i bÄde normal och kursiv form. För varje stil tillhandahÄlls teckensnittsfiler i WOFF2-, WOFF- och TrueType-format frÄn Guardians asset-server.
Denna CSS-kod definierar flera teckensnittsytor för teckensnittsfamiljerna "Guardian Headline Full" och "Guardian Titlepiece". Varje teckensnittsyta specificerar olika vikter och stilar (normal eller kursiv) och tillhandahÄller flera filformat (WOFF2, WOFF och TrueType) för kompatibilitet mellan webblÀsare. Teckensnitten finns pÄ de angivna URL:erna och inkluderar variationer frÄn lÀtt till svart vikt, med motsvarande kursiva versioner dÀr det Àr tillÀmpligt.
Denna CSS-kod definierar flera teckensnittsytor för teckensnittsfamiljen "Guardian Headline Full", varje med olika vikter och stilar (normal och kursiv). För varje variation specificerar den kÀllfiler i WOFF2-, WOFF- och TrueType-format frÄn Guardians asset-server, tillsammans med motsvarande teckensnittsvikt (400 för normal, 500 för medium, 600 för halvfet, 700 för fet, 900 för svart) och teckensnittsstil (normal eller kursiv).
Denna text verkar vara CSS-kod som definierar teckensnittsstilar och layoutgrid för en webbplats, troligen The Guardians. Den specificerar teckensnittsfiler för olika vikter och stilar, och konfigurerar responsiva layoutgrid som Àndras vid olika skÀrmstorlekar. Koden styr hur element som titlar, rubriker, media och brödtext arrangeras över olika enhetsbredder.
För interaktiva grid-figurer med immersiva bildtexter i specifika innehÄllsomrÄden Àr bildtextens utfyllnad satt till 4 pixlar överst och 0 pÄ andra stÀllen.
Element med namnen "lines" och "meta" inom interaktiva grid positioneras i grid-omrÄdet frÄn rad 2 till 5 och kolumn 1 till 2. "Lines"-elementen har en höjd som anpassas efter deras innehÄll och en toppmarginal pÄ 5 pixlar, medan "meta"-elementen har en toppmarginal pÄ 18 pixlar.
PÄ större skÀrmar (81.25em och uppÄt) anvÀnder det interaktiva grid en layout med fem kolumner med specifika bredder.
För iOS- och Android-enheter anvÀnder artiklarubriker teckensnittsfamiljen Guardian Headline med medium vikt för ingresser och visar sektionskickers med versaler i första bokstaven. Nyckelstrecken har ökad topputfyllnad, och författarinformation anvÀnder ett fetstilt teckensnitt. Bilder inom artiklar har automatisk höjd, och stycken efter atomÀra element har ingen toppmarginal.
Teckensnittsytor för Guardian Headline Full definieras med lÀtt och lÀtt kursiv vikt, med kÀllor frÄn woff2-, woff- och ttf-filer.
Denna text definierar en anpassad teckensnittsfamilj kallad "Guardian Headline Full" med olika stilar och vikter. Den inkluderar versioner för normal, medium, halvfet och fet, varje i bÄde normal och kursiv stil. Teckensnittsfilerna tillhandahÄlls i WOFF2-, WOFF- och TrueType-format frÄn Guardians webbplats.
@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 {
/ Ytterligare stilar kan lÀggas till hÀr om det behövs /
}
Denna CSS-kod applicerar specifika stilar pÄ olika element pÄ en webbsida. Den lÀgger till 14 pixlar utfyllnad överst pÄ vissa stycken, sÄsom det första stycket efter specifika element eller horisontella linjer i olika innehÄllsomrÄden som artiklar, kommentarer och features.
För den första bokstaven i dessa stycken anvÀnds ett stort, fetstilt, versalt teckensnitt frÄn Guardian Headline eller liknande serif-familjer, med en storlek pÄ 111 pixlar och en radhöjd pÄ 92 pixlar. Denna bokstav flyter till vÀnster, har en marginal pÄ 8 pixlar till höger, och dess fÀrg sÀtts av en CSS-variabel för initialer.
Dessutom tas topputfyllnaden bort frÄn stycken som kommer direkt efter horisontella linjer. Bildtexter för showcase-element positioneras statiskt med en maximal bredd pÄ 620 pixlar. Immersiva element Àr instÀllda att ta upp hela viewport-bredden minus scrollbaren, med en maximal bredd pÄ 978 pixlar pÄ större skÀrmar. PÄ medelstora till stora skÀrmar har bildtexter för immersiva element horisontell utfyllnad pÄ 20 pixlar, medan det pÄ mindre skÀrmar ner till 30em Àr 10 pixlar. För skÀrmar mellan 46.25em och 61.24em har immersiva element en specificerad maximal bredd.
@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 #standfirst p,
.furniture-wrapper [data-gu-name=standfirst] p {
border-top: unset;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name=standfirst]:before {
content: "";
width: 1px;
background-color: var(--headerBorder);
height: 100%;
position: absolute;
top: 0;
left: .5px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3,
