Dieser CSS-Code definiert eine benutzerdefinierte Schriftfamilie namens "Guardian Headline Full" mit mehreren Schriftgewichten und -stilen. Er umfasst leichte, reguläre, mittlere und halbfette Gewichte, jeweils in normalen und kursiven Stilen. Die Schriftdateien werden in den Formaten WOFF2, WOFF und TrueType bereitgestellt, die auf dem Asset-Server des Guardian gehostet werden.
Die Schriftfamilie Guardian Headline Full umfasst mehrere Stile, die jeweils in mehreren Formaten (WOFF2, WOFF und TTF) verfügbar sind. Die Stile sind:
- Fett (Gewicht 700, normaler Stil)
- Fett Kursiv (Gewicht 700, kursiver Stil)
- Schwarz (Gewicht 900, normaler Stil)
- Schwarz Kursiv (Gewicht 900, kursiver Stil)
- Leicht (Gewicht 300, normaler Stil)
- Leicht Kursiv (Gewicht 300, kursiver Stil)
- Regular (Gewicht 400, normaler Stil)
- Regular Kursiv (Gewicht 400, kursiver Stil)
Zusätzlich ist die Schrift Guardian Titlepiece in Fett (Gewicht 700, normaler Stil) verfügbar.
Die Schriftfamilie "Guardian Headline Full" umfasst mehrere Schriftdateien in verschiedenen Gewichten und Stilen. Jede Schrift ist in den Formaten WOFF2, WOFF und TrueType verfügbar, gehostet unter den angegebenen URLs. Die Gewichte reichen von 400 (regular) bis 900 (black), wobei für jedes Gewicht sowohl normale als auch kursive Stile bereitgestellt werden.
@font-face {
font-family: Guardian Headline;
src: 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;
}
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-column-gap: 0px;
grid-template-columns: 100%;
grid-template-areas:
"media"
"title"
"headline"
"standfirst"
"lines"
"meta"
"body";
}
@media (min-width: 30em) {
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
padding: 0 20px;
max-width: 620px;
}
}
@media (min-width: 46.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 100%;
grid-column-gap: 10px;
grid-template-areas:
"title"
"headline"
"standfirst"
"media"
"lines"
"meta"
"body";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: 80px;
}
}
@media (min-width: 61.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas:
"title right-column"
"headline right-column"
"standfirst right-column"
"media right-column"
"lines right-column"
"meta right-column"
"body right-column"
". right-column";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: unset;
}
}
@media (min-width: 71.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas:
"title border headline right-column"
". border standfirst right-column"
". border media right-column"
". border body right-column"
". border . right-column";
}
#article-body>div .content--interactive-grid .content__standfirst,
.content--interactive>div .content--interactive-grid .content__standfirst,
#comment-body .content--interactive-grid .content__standfirst,
[data-gu-name=body] .content--interactive-grid .content__standfirst,
#feature-body .content--interactive-grid .content__standfirst {
padding-bottom: 0;
}
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
/ Die Beschriftungsformatierung wird hier fortgesetzt /
}
}
Für immersive Bildunterschriften und interaktive Rasterinhalte ist der Abstand oben auf 4 Pixel und an anderen Stellen auf 0 gesetzt. Elemente mit den Namen "lines" und "meta" innerhalb interaktiver Raster sind in einem bestimmten Rasterbereich 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 Bildschirmen breiter als 81,25 em verwenden interaktive Raster ein Fünf-Spalten-Layout mit festen und flexiblen Breiten.
Auf iOS- und Android-Geräten verwenden Artikelüberschriften bestimmte Schriftarten und Gewichte für Standfirst-Texte, Abschnittsbeschriftungen und Autorenzeilen. Abschnittsbeschriftungen werden großgeschrieben, und Trennlinien haben angepasste Abstände. Abbildungsbilder haben transparente Hintergründe, und Bilder werden leicht nach rechts verschoben. Überschriften haben transparente Hintergründe, angepasste Abstände und verwenden eine 24-Pixel-Schriftgröße mit 115% Zeilenhöhe.
Für Android sind die Haupt- und Unterüberschriften als Blöcke eingestellt. Sowohl auf iOS als auch auf Android sind Unterüberschriften mit leichtem Schriftgewicht, linksbündiger Ausrichtung und ausgeglichenem Textumbruch formatiert.
Artikel-Kicker haben keinen Abstand, und ihr Text ist ausgeblendet.
Autoren- und Veröffentlichungsdatumselemente verwenden eine 17px-Schrift mit normalem Gewicht und 130% Zeilenhöhe. Autorentext und Autorenlinks sind in der Farbe #707070.
Standfirst-Absätze sind auf 20px, normalen Stil, leichtes Gewicht und 115% Zeilenhöhe eingestellt. Links innerhalb von Standfirst-Absätzen sind fett, in der Farbe #707070, mit einem unteren Rand und ohne Hintergrundbild.
Überschriftentext ist in der Farbe #dcdcdc.
Bilder und ihre Container sind auf eine Breite von 100vw minus 20px eingestellt, mit automatischer Höhe und einer maximalen Breite von 620px. Innere Figure-Elemente haben ihre Höhe auf nicht festgelegt gesetzt. Showcase-Bilder haben eine maximale Breite von 280px.
Bestimmte Abschnitte und Nebenbereiche nach der Navigation sind ausgeblendet. Atom-Elemente haben keinen Außen- oder Innenabstand.
Showcase-Elemente und ihre Inhalte haben eine maximale Breite von 210px, die auf 260px für Viewports breiter als 61,25 em erhöht wird. Beschriftungsspannen innerhalb von Inline- und Showcase-Elementen sind ebenfalls entsprechend formatiert.
Für Beschriftungen innerhalb des Haupttextes ist der Span-Text auf 14px, eine hellgraue Farbe (#707070) und inline eingestellt. Die erste Span in Beschriftungen für Inline- und Showcase-Elemente ist auf inline-block gesetzt.
Auf Bildschirmen breiter als 71,25 em sind Beschriftungen für Inline- und Showcase-Elemente relativ positioniert und ihre Breite wird zurückgesetzt.
Für interaktive Inhaltsartikel verwendet das Layout Rasterbereiche mit den Namen "header", "headline", "standfirst", "lines", "meta" und "body". Auf größeren Bildschirmen (71,25 em und mehr) ändert sich das Rasterlayout auf drei Spalten mit Bereichen für "header", "meta", "border", "standfirst" und "body". Der Hauptspaltenrand wird entfernt, der linke Rand wird ausgeblendet und die Absatzbreite wird auf 620px eingestellt.
Überschriftenelemente haben bestimmte Schrifteinstellungen: Guardian Headline oder ähnliche Schriftarten, 24px Größe, leichtes Gewicht (300) und eine hellgraue Farbe (#dcdcdc). Der Abstand beträgt 0–10px auf kleinen Bildschirmen, 0–20px auf mittleren Bildschirmen (30 em und mehr) und wird auf großen Bildschirmen (71,25 em und mehr) entfernt.
Trennlinien und Linien sind ausgeblendet. Auf großen Bildschirmen ist der Artikelheader absolut positioniert, 20px von links.
Artikelheader-Links verwenden eine 17px-Schriftgröße und normalen Stil. Der obere Abstand des Headers beträgt 2px, und Beschriftungen haben einen oberen Rand und Abstand (0–10px auf kleinen Bildschirmen, 0–20px auf mittleren Bildschirmen). Auf größeren Bildschirmen (46,25 em und mehr) wird der obere Rand entfernt, und der Abstand wird auf den größten Bildschirmen (71,25 em und mehr) auf 0 gesetzt.
Dieser CSS-Code gestaltet Elemente innerhalb eines interaktiven Artikels.
Für Artikeltitel und Links wird die Zeilenhöhe auf 115% und die Textfarbe auf #ff5943 eingestellt. Beim Überfahren von Titellinks ändert sich die Unterstreichungsfarbe zu #dcdcdc.
Der Standfirst (Artikelzusammenfassung) verwendet bestimmte Schriftarten, eine graue Farbe (#606060), eine 24px-Schriftgröße, normalen Stil, Gewicht 400 und 115% Zeilenhöhe. Er hat einen Abstand, der basierend auf der Bildschirmbreite angepasst wird: 2px 10px für kleinere Bildschirme, 2px 20px für Bildschirme ab 30 em Breite und keinen Abstand für Bildschirme ab 71,25 em. Links im Standfirst sind #707070 und erhalten beim Überfahren einen 2px unteren Rand.
Soziale-Medien-Schaltflächen im Meta-Bereich haben keinen Übergangseffekt. Beim Überfahren wird ihr Hintergrund #121212, der Rand wird #121212, der Text wird #dcdcdc, und alle SVG-Symbole ändern sich ebenfalls auf #dcdcdc Füllung mit #121212 Hintergrund.
Teilen-Schaltflächen sind ausgeblendet. Ein kleines 4px Inline-Leerraumelement ist definiert. Für den Artikelkörper verwendet ein Namensrastercontainer ein Zwei-Spalten-Layout mit einer maximalen Breite von 620px.
Für Bildschirme breiter als 46,25 em verwendet der Namensrastercontainer zwei Spalten, jede 310px breit. Ungerade nummerierte Elemente im Raster haben 5px rechten Abstand (10px auf breiteren Bildschirmen), während gerade nummerierte Elemente 5px linken Abstand haben (10px auf breiteren Bildschirmen).
Überschriften (h2) innerhalb des Rasters haben eine 17px-Schriftgröße, einen oberen Rand, 2px oberen Abstand und eine maximale Breite von 620px. Die darauf folgenden Listenelemente haben keinen Innen- oder Außenabstand, wobei das erste Element eine andere Textfarbe verwendet. Listenelementmarkierungen sind ausgeblendet, und Absatztext verwendet eine bestimmte Schriftfamilie, 14px Größe und 130% Zeilenhöhe.
Immersive Figuren haben einen dunklen Hintergrund, und Bilder darin beginnen vollständig transparent. Wenn die Klasse "fade-in" angewendet wird, werden Bilder vollständig deckend mit einem sanften 1-Sekunden-Übergang.
Der Gedenkheader erstreckt sich über die gesamte Viewport-Breite (abzüglich der Scrollleistenbreite), hat einen dunklen Hintergrund, weißen Text und negative linke Ränder, die basierend auf der Bildschirmgröße angepasst werden. Auf mittleren und größeren Bildschirmen enthält er zentrierten Abstand und einen Rand. Der Namensbereich hat eine Mindesthöhe von 200px und keine oberen oder unteren Ränder, während der Möbelbereich am unteren Rand fixiert ist mit zusätzlichem Abstand und linksbündigen Anpassungen auf größeren Bildschirmen. Der innere Möbelbereich enthält linken Abstand und einen Rand auf breiteren Bildschirmen.
/
* Serif-Schriftstapel
*/
/
* Überschriftenschriftstapel
*/
/
* Serifenloser Textschriftstapel
*/
/
* Serifenloser Überschriftenschriftstapel
*/
/
* Standardeinstellungen für die Schriftskalierung
* Siehe font-scale.html und font-scale.png für visuelle Beispiele
*/
/
* Alle Ebenen einer Schriftskalierung abrufen
*
* @param {String} $name - Name der Schriftskalierung (z.B. headline)
* @param {Map} $font-scale ($font-scale)
*
* @example
* font-size: get-scale(header);
*
* @return {Map}
*/
/
* Informationen für eine bestimmte Ebene einer Schriftskalierung abrufen
*
* @param {String} $name - Name der Schriftskalierung (z.B. headline)
* @param {Number} $level - Ebene in der Skala
* @param {Map} $font-scale ($font-scale)
*
* @example
* font-size: get-scale-level(header, 1);
*
* @return {Map}
*/
/
* Eine Schriftgröße für eine Ebene in der Schriftskalierung abrufen
*
* @param {String} $name - Name der Schriftskalierung (z.B. headline)
* @param {Number} $level - Ebene in der Skala
* @param {Map} $font-scale - Konfiguration
*
* @example
* font-size: get-font-size(header, 3);
*
* @return {Number}
*/
/
* Eine Zeilenhöhe für eine Ebene in der Schriftskalierung abrufen
*
* @param {String} $name - Name der Schriftskalierung (z.B. headline)
* @param {Number} $level - Ebene in der Skala
* @param {Map} $font-scale - Konfiguration
*
* @example
* font-size:
