"canvas.svelte-o3oskp" sınıfına sahip öğe blok olarak görüntülenecek şekilde ayarlanmıştır.
"Guardian Headline Full" adlı özel bir yazı tipi çeşitli ağırlıklar ve stillerle tanımlanmıştır:
- Light (300) normal ve italik
- Regular (400) normal ve italik
- Medium (500) normal ve italik
- Semibold (600) normal ve italik
Her yazı tipi stili Guardian'ın varlık sunucularından WOFF2, WOFF ve TrueType formatlarında mevcuttur. Guardian web sitesi başlıklar ve başlık metinleri için belirli yazı tipleri kullanır. Bunlar arasında kalın, kalın italik, siyah ve siyah italik stillerde Guardian Headline Full ile kalın stilde Guardian Titlepiece bulunur. Her yazı tipi uyumluluk için woff2, woff ve truetype gibi birden fazla dosya formatında mevcuttur.
Karusel bölümü için başlık, Guardian Text Sans Web yazı tipi kullanılarak beyaz renkte, 17px boyutunda ve orta ağırlıkta görünür. Mutlak konumlandırılmıştır ve parlak yeşil renkte, kalın ağırlıkta ve altı çizgisiz olarak stilize edilmiş bir bağlantı içerir.
Karuselin kendisi, kaydırma sırasında öğeleri yerine kenetleyen, kullanıcı azaltılmış hareketi tercih etmediği sürece varsayılan olarak pürüzsüz kaydırmaya sahip yatay olarak kaydırılabilir bir kapsayıcıdır. Kaydırma çubuklarını gizler ve öğeler arasında 10px boşluk bulunur.
Karuseldeki her kart 310px genişliğinde ve 160px yüksekliğinde olup beyaz bir arka plana ve sağda sığacak şekilde ölçeklenen bir görsele sahiptir. Görsel kapsayıcısı gri arka plana sahip 120px x 150px boyutlarındadır ve azaltılmış hareket tercih edilmediği sürece görsellerin üzerine gelindiğinde hafifçe yakınlaşır. Kartlar dolgu içerir ve esnek kapsayıcılar olarak görüntülenir, içeriği alt kısımda hizalar. Karusel bileşeninde kartın görsel kapsayıcısında geçiş efekti yoktur. Her kartın içindeki içerik kapsayıcısı esnek bir sütun düzeni olarak ayarlanmıştır. İçerik kapsayıcısının içindeki başlıklar ve paragraflar koyu gri renkte ve metin süslemesiz olarak stilize edilmiştir. Başlıklar belirli bir serif yazı tipi yığını kullanır, 24px yazı tipi boyutu, %115 satır yüksekliği, normal ağırlık ve şeffaf alt kenarlığa sahiptir. Paragraflar 14px yazı tipi boyutu ve %115 satır yüksekliği ile sans-serif yazı tipi yığını kullanır, ilk paragraf kalın yazılmıştır.
Bir kart seçildiğinde görseli %20 oranında büyür. Devre dışı bırakılmış kartlar, sol üstte yarı saydam beyaz bir arka plan üzerinde kalın metinle "Yakında" yerleşimi görüntüler.
Kontrol bölümü, aralarında boşluk bırakılarak hizalanmış esnek bir satırdır ve 12px sans-serif yazı tipi kullanılarak beyaz renkte sayfalama metni içerir. Kontrol düğmeleri daireseldir, 40px çapındadır, gri kenarlığa ve şeffaf arka plana sahiptir, içinde 24px simgeler bulunur. İlk düğmenin simgesi yatay olarak çevrilmiştir.
Guardian Headline Full için yazı tipi yüzleri, woff2, woff ve ttf dosyalarından kaynak alan açık, açık italik, normal ve normal italik çeşitleriyle tanımlanmıştır. Guardian Headline Full yazı tipi ailesi, her biri WOFF2, WOFF ve TrueType formatlarında belirli kaynak dosyalarla tanımlanmış çeşitli stiller ve ağırlıklar içerir. İşte ayrıntılar:
- Regular Italic: ağırlık 400, italik stil
- Medium: ağırlık 500, normal stil
- Medium Italic: ağırlık 500, italik stil
- Semibold: ağırlık 600, normal stil
- Semibold Italic: ağırlık 600, italik stil
- Bold: ağırlık 700, normal stil
- Bold Italic: ağırlık 700, italik stil
- Black: ağırlık 900, normal stil
- Black Italic: ağırlık 900, italik stil
Tüm yazı tipi dosyaları Guardian'ın varlık alanındaki belirtilen URL'lerde barındırılmaktadır.@font-face {
font-family: Guardian Headline Full;
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://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;
}
.globe-overlay-wrapper {
overflow: auto;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 30;
background: #121212e6;
backdrop-filter: blur(2px);
display: flex;
justify-content: center;
}
.globe-overlay-wrapper .body-width-wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 100%;
padding: 22px 16px;
}
@media (min-width: 46.25em) {
.globe-overlay-wrapper .body-width-wrapper {
max-width: 740px;
}
}
@media (min-width: 61.25em) {
.globe-overlay-wrapper .body-width-wrapper {
max-width: 980px;
}
}
@media (min-width: 71.25em) {
.globe-overlay-wrapper .body-width-wrapper {
max-width: 1140px;
}
}
button {
padding: 1px 8px 3px;
border-radius: 30px;
border: 1px solid #fff;
background: var(--Neutral-neutral-neutral-7, #121212);
color: var(--Neutral-neutral-neutral-100, #fff);
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 130%;
align-self: flex-start;
position: relative;
z-index: 60;
}
button:hover {
cursor: pointer;
}
.canvas-container {
width: 100vw;
height: 100vw;
max-width: min(600px, 100vh - 340px);
max-height: min(600px, 100vh - 340px);
align-self: center;
position: fixed;
top: 40px;
z-index: 40;
}
@media (min-width: 23.4375em) {
.canvas-container {
top: calc(50% - 120px);
left: 50%;
transform: translate(-50%, -50%);
}
}
.carousel-container {
height: calc(100vh - 116px);
height: calc(100dvh - 116px);
position: relative;
z-index: 50;
}
body.android .globe-overlay-wrapper .body-width-wrapper > button {
top: 58px;
}
body.ios .carousel-container {
height: calc(100vh - 180px) !important;
height: calc(100dvh - 180px) !important;
}
body.ios .canvas-container {
top: calc(50% - 170px) !important;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.ttf) format("truetype");
font-weight: 300;
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-LightItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.ttf) format("truetype");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-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/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
font-style: italic;
}Bu CSS kodu, "Guardian Headline Full" yazı tipi ailesi için çeşitli yazı tipi stillerini tanımlar. Normalden (400) siyaha (900) kadar değişen farklı ağırlıklar ve stiller (normal ve italik) içerir. Her stil, tarayıcılar arası uyumluluk için birden fazla dosya formatı (WOFF2, WOFF ve TrueType) ile belirtilmiştir ve tümü Guardian'ın varlık sunucusundan kaynaklanmaktadır.Bu metin, bir web sayfası için özel yazı tiplerini ve stilleri tanımlar. 900 ağırlıklı siyah italik Guardian Headline ve 700 ağırlıklı kalın Guardian Titlepiece olmak üzere iki yazı tipi belirtir, her ikisi de çeşitli formatlarda belirli URL'lerden yüklenir.
Ayrıca, üzerine gelindiğinde hafifçe büyüyen ve odak halkası olan dairesel bir düğme gibi düğmeler için CSS kuralları içerir. Belirli dolgu, kenarlık ve metin stillerine sahip bir "keşfet" çağrı butonu bulunur.
Ek olarak, kod genişliği değişen ve farklı arka plan renklerine sahip bir ilerleme çubuğu kurar, ayrıca çeşitli ekran boyutları için duyarlı tasarım ayarlamaları yapar. Bir küre düğmesi sarmalayıcısı, yapışkan olacak ve yalnızca belirli koşullar altında görünür olacak şekilde stilize edilmiştir, Android ve iOS cihazlar için farklı düzenlerle.
Son olarak, yeşil kenarlığa ve ortalanmış içeriğe sahip dairesel bir simge olarak bir başlık oku öğesi tanımlar.Bu CSS kodu bir web sayfası için stilleri tanımlar:
- "title-arrow" sınıfına sahip öğeleri ortalar
- "title-arrow" içindeki görselleri tam genişlik ve yüksekliğe ayarlar
- iOS ve Android cihazlarda karanlık mod için renk ters çevirme filtreleri uygular
- Lenis pürüzsüz kaydırma kitaplığını kullanarak kaydırma davranışını yapılandırır
- Guardian'ın sunucularından "Guardian Headline Full" yazı tipi için birden fazla yazı tipi ağırlığını ve stilini yükler
Kod, bir haber web sitesi düzeni için duyarlı tasarım, erişilebilirlik özellikleri ve tipografi ile ilgilenir.Guardian web sitesi, başlıklar ve başlık metinleri için belirli yazı tipleri kullanır ve bunları WOFF2, WOFF ve TrueType gibi çeşitli formatlarda kendi sunucularından yükler. Bu yazı tipleri, hem normal hem de italik versiyonlarda yarı kalın, kalın ve siyah gibi farklı stiller ve ağırlıklar içerir.
Etkileşimli içerik için düzen ekran boyutuna göre ayarlanır. Daha geniş ekranlarda ana sütun artan kenar boşluklarıyla sola kayar, atomlar, vitrinler ve sürükleyici içerik gibi öğelerin görünüm alanına göre değişen belirli maksimum genişlikleri vardır. Daha küçük ekranlarda, sürükleyici öğeler tam genişliğe genişler ve uygun hizalamayı sağlamak için kaydırma çubukları için ayarlamalar yapılır.Bu metin, bir web sayfası düzeni stilini tanımlayan CSS kodu gibi görünüyor. Kod, farklı ekran boyutları, renkler, boşluklar ve etkileşimli öğeler için stiller tanımlar. Kod, içerik alanları için maksimum genişlikleri ayarlar, kenarlıklar oluşturur, bağlantılar ve arka planlar gibi çeşitli öğeler için renk değişkenlerini tanımlar ve komut dosyaları etkin veya devre dışı bırakıldığında sayfanın nasıl gör
