Dieser CSS-Code definiert die Schriftfamilie "Guardian Headline Full" mit verschiedenen Gewichten und Stilen. Er enthält Versionen für Light (300), Regular (400), Medium (500) und Semibold (600), jeweils in normaler und kursiver Ausführung. Die Schriftdateien werden in den Formaten WOFF2, WOFF und TrueType aus den Web-Assets des Guardian bereitgestellt.
Dieser CSS-Code definiert mehrere Schriftfamilien für Überschriften und Titelseiten der Guardian-Website. Er spezifiziert verschiedene Schriftgewichte und Stile (normal und kursiv) für die Familie "Guardian Headline Full", einschließlich der Gewichte Light (300), Regular (400), Bold (700) und Black (900). Jede Schrift wird in mehreren Formaten (WOFF2, WOFF und TrueType) für Browserkompatibilität bereitgestellt. Zusätzlich definiert er die Schriftfamilie "Guardian Titlepiece" im Gewicht Bold (700) mit denselben Dateiformaten.
Dieser CSS-Code definiert mehrere @font-face-Regeln für die Schriftfamilie "Guardian Headline Full", jeweils mit verschiedenen Gewichten und Stilen (normal und kursiv). Die Schriften stammen aus verschiedenen Dateiformaten (WOFF2, WOFF und TrueType), die auf dem Assets-Server des Guardian gehostet werden. Die Gewichte reichen von Regular (400) bis Black (900), um sicherzustellen, dass die Schrift in verschiedenen typografischen Kontexten verwendet werden kann, während die Konsistenz über Webplattformen hinweg gewahrt bleibt.
Dieser Text scheint CSS-Code zu sein, der Schriftstile und responsive Grid-Layouts für eine Website definiert, wahrscheinlich für The Guardian. Er spezifiziert Schriftdateien für verschiedene Gewichte und Stile und richtet dann Grid-Templates ein, die sich bei verschiedenen Bildschirmbreiten ändern, um Inhaltsbereiche wie Titel, Medien und Fließtext neu anzuordnen. Der Code passt Padding, Spaltenabstände und Elementpositionierung über verschiedene Gerätegrößen hinweg für eine optimale Darstellung an.
Für interaktive Grid-Figuren mit immersiven Bildunterschriften in bestimmten Inhaltsbereichen wird der obere Abstand der Bildunterschrift auf 4 Pixel und auf 0 an den anderen Seiten gesetzt.
In verschiedenen Inhaltsabschnitten werden Elemente namens "lines" und "meta" innerhalb interaktiver Grids im Grid-Bereich von Zeile 2 bis 5 und Spalte 1 bis 2 positioniert. Die "lines"-Elemente haben eine Höhe, die ihrem Inhalt entspricht, und einen oberen Abstand von 5 Pixeln, während "meta"-Elemente einen oberen Abstand von 18 Pixeln haben.
Auf größeren Bildschirmen (min-width: 81.25em) verwenden die interaktiven Grids in diesen Abschnitten ein Fünf-Spalten-Layout mit spezifischen Breiten.
Für iOS- und Android-Geräte haben Artikelüberschriften angepasste Stile: Standfirst-Text verwendet eine bestimmte Schriftfamilie mit mittlerem Gewicht, Abschnitts-Kicker werden als Blöcke mit großgeschriebenen ersten Buchstaben angezeigt, Keylines haben erhöhtes oberes Padding, Byline-Autoren verwenden eine serife Schrift in Fettdruck, Bild-Figuren passen ihre Höhe automatisch an, und Absätze, die auf Atom-Elemente folgen, haben keinen oberen Abstand.
Zusätzlich werden Schriftformen für Guardian Headline Full in den Gewichten Light und Light Kursiv mit ihren jeweiligen Quelldateien und Formaten definiert.
Dieser Text definiert eine benutzerdefinierte Schriftfamilie namens "Guardian Headline Full" mit verschiedenen Stilen und Gewichten. Sie enthält Regular-, Medium-, Semibold- und Bold-Versionen, jeweils in normaler und kursiver Ausführung verfügbar. Die Schriftdateien werden in den Formaten WOFF2, WOFF und TrueType von der Website des Guardian bereitgestellt.
@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 {
/ Bei Bedarf können hier zusätzliche Stile hinzugefügt werden /
}
Der erste Absatz in verschiedenen Inhaltsabschnitten, wie Artikelkörpern, interaktiven Inhalten, Kommentaren und Features, hat einen oberen Abstand von 14 Pixeln. Zusätzlich wird der erste Buchstabe dieser Absätze mit einer bestimmten Schrift, Größe und Farbe gestaltet, der als großer, großgeschriebener Initialbuchstabe erscheint.
Für Absätze, die auf einen horizontalen Strich folgen, wird der obere Abstand entfernt.
Bildunterschriften für Showcase-Elemente werden auf eine statische Position mit einer maximalen Breite von 620 Pixeln gesetzt.
Immersive Elemente erstrecken sich über die gesamte Viewport-Breite und passen sich auf Bildschirmen kleiner als 71.24em auf maximal 978 Pixel an. Ihre Bildunterschriften haben einen Abstand, der mit der Bildschirmgröße variiert, von 10 Pixeln auf kleineren Geräten bis zu 20 Pixeln auf mittelgroßen Bildschirmen.
@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, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(8, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] .75fr [standfirst-end meta-end portrait-end];
}
}
Der CSS-Code definiert Stile für ein Webseiten-Layout, das Elemente wie Überschriften, Meta-Informationen und Medien
