Ez egy CSS-stĂluslap, amely a „Guardian Headline Full" betűcsaládot határozza meg. Több font-face szabályt tartalmaz, amelyek mindegyike a betűtĂpus kĂĽlönbözĹ‘ sĂşlyát Ă©s stĂlusát adja meg, valamint a betűfájlok URL-jeit kĂĽlönbözĹ‘ formátumokban (WOFF2, WOFF Ă©s TTF). A sĂşlyok a világostĂłl (300) a fĂ©lkövĂ©rig (600) terjednek, Ă©s mind a normál, mind a dĹ‘lt stĂlus szerepel. A betűfájlok a Guardian eszközszerverĂ©n vannak tárolva.
Ez a szöveg CSS-kĂłdnak tűnik, nem termĂ©szetes nyelvnek. Egy weboldal betűstĂlusait Ă©s elrendezĂ©si szabályait határozza meg. Mivel technikai kĂłd, nem alkalmazhatĂł rá a folyĂ©kony angolra valĂł átĂrás. Ha más szöveget szeretnĂ©l megosztani, kĂ©rlek, kĂĽldd el, Ă©s szĂvesen segĂtek.
bal: -11px.
A fĹ‘ tartalmi oszlop az interaktĂv cikkeknĂ©l nem tartalmaz margĂłt vagy kitöltĂ©st a beágyazott elemek körĂĽl, 12px kitöltĂ©ssel a tetejĂ©n Ă©s az alján. Ha egy bekezdĂ©st beágyazott elem követ, a kitöltĂ©s eltávolĂtásra kerĂĽl, Ă©s 12px margĂł váltja fel. A soron belĂĽli elemek maximális szĂ©lessĂ©ge 620px.
A 61,25em-nél szélesebb képernyőkön a soron belüli ábrák szintén 620px-re korlátozódnak.
A hurkolt videĂłkat tartalmazĂł mĂ©dia szekciĂłkban a felirat más elemek fölött helyezkedik el, Ă©s a hurok gomb a jobb alsĂł sarokban van igazĂtva extra tĂ©rközzel. A nĂ©mĂtás Ă©s a hang visszakapcsolásának gombjai a jobb oldalon helyezkednek el nĂ©mi bal oldali kitöltĂ©ssel. A felirat gomb minden fölött ĂĽl, Ă©s nagyobb kĂ©pernyĹ‘kön az aljához közel helyezkedik el.
A cinemagraphoknál (a hurkolt videĂłk egy tĂpusánál) a magasságkorlát eltávolĂtásra kerĂĽl a 46,25em-nĂ©l szĂ©lesebb kĂ©pernyĹ‘kön.
A törzs szekcióban a saját tárhelyen lévő videók blokkként jelennek meg, legfeljebb 620px szélességgel és 12px margóval. A videó és annak hurok ábrája teljes szélességet foglal el, a videó magassága automatikusan igazodik.
Ha egy videĂł immerszĂv mĂłdra van állĂtva, kitágul, hogy kitöltse a rendelkezĂ©sre állĂł helyet, eltávolĂtva a szĂ©lessĂ©gkorlátot Ă©s a margĂłkat. Nagyon szĂ©les kĂ©pernyĹ‘kön (71,25em felett) a videĂłtárolĂł 1140px szĂ©les, Ă©s 180px-rel balra tolĂłdik, a felirat behĂşzva. MĂ©g szĂ©lesebb kĂ©pernyĹ‘kön (81,25em felett) 1300px szĂ©les lesz, Ă©s 260px-rel tolĂłdik balra.
A dizájn meghatározott szĂneket használ: egy szĂĽrkĂ©t a dátumokhoz, egy világos szĂĽrkĂ©t a szegĂ©lyekhez, egy világosabb szĂĽrkĂ©t a feliratokhoz, Ă©s egy áttetszĹ‘ sötĂ©t hátteret a felirat szövegĂ©hez. A fĹ‘ jellemzĹ‘ szĂn egy sötĂ©tvörös, amelyet egy egyĂ©ni pillĂ©r szĂn felĂĽlĂrhat.
Az alcĂmek, a kiemelt idĂ©zetek Ă©s a blokk idĂ©zetek a másodlagos pillĂ©r szĂnt használják, amely sötĂ©t mĂłdban állĂthatĂł.
A beágyazott elemeknek nincs kitöltĂ©sĂĽk. Ha egy beágyazott elem közvetlenĂĽl egy másik elem vagy vĂzszintes vonal után jelenik meg, a következĹ‘ bekezdĂ©s nem kap extra felsĹ‘ margĂłt, Ăgy biztosĂtva az egysĂ©ges tĂ©rközt. Ez kĂĽlönbözĹ‘ tartalmi szekciĂłkra Ă©s interaktĂv elrendezĂ©sekre vonatkozik.
Ez egy CSS-szelektorlista, amely egy weboldal-elrendezĂ©s meghatározott bekezdĂ©seit cĂ©lozza meg. 14 kĂ©ppontos felsĹ‘ kitöltĂ©st alkalmaz azokra a bekezdĂ©sekre, amelyek bizonyos elemek, pĂ©ldául „element-atom", „sign-in-gate" vagy vĂzszintes vonalak után következnek (de nem az utolsĂł után). A szelektorok az oldal kĂĽlönbözĹ‘ szekciĂłit fedik le, pĂ©ldául a fĹ‘ tartalmat, a hozzászĂłlás törzsĂ©t Ă©s a jellemzĹ‘ törzset.
A CSS második rĂ©sze a `:first-letter` pszeudo-elemet használja azoknak a bekezdĂ©seknek az elsĹ‘ betűjĂ©nek stĂlusozására, valĂłszĂnűleg egy iniciálĂ© (drop cap) hatás Ă©rdekĂ©ben. Ezt a stĂlust kĂĽlönbözĹ‘ tárolĂłkra alkalmazza, mint a fĹ‘ oszlop, a cikk törzse Ă©s az interaktĂv tartalmi szekciĂłk.
Itt van az átĂrt szöveg folyĂ©kony, termĂ©szetes angol nyelven:
---
A CSS-szabályok iniciálĂ© stĂlust alkalmaznak az elsĹ‘ bekezdĂ©s elsĹ‘ betűjĂ©re bizonyos elemek, pĂ©ldául vĂzszintes vonalak vagy hirdetĂ©stárolĂłk után, meghatározott tartalmi terĂĽleteken. Az iniciálĂ© a Guardian Headline betűtĂpust használja, fĂ©lkövĂ©r, nagy (111px), balra lebeg, nagybetűs szöveggel. Jobb oldali margĂłval rendelkezik, fĂĽggĹ‘legesen a tetejĂ©re igazodik, Ă©s egyĂ©ni szĂnváltozĂłt használ.
InteraktĂv tartalmaknál Ă©s más szekciĂłkban a vĂzszintes vonalakat követĹ‘ bekezdĂ©seknek nincs felsĹ‘ kitöltĂ©sĂĽk.
A kiemelt idézetek ezekben a tartalmi területeken legfeljebb 620px szélességre korlátozódnak.
A kiemelt elemek képfeliratai statikusan helyezkednek el, és teljes szélességet foglalnak el, legfeljebb 620px-ig. Szélesebb képernyőkön (71,25em felett) abszolút pozicionáltakká válnak, legfeljebb 140px szélességgel, és még szélesebb képernyőkön (81,25em felett) a maximális szélesség 220px-re nő.
Az immerszĂv elemek a teljes viewport szĂ©lessĂ©gĂ©t átfogják, figyelembe vĂ©ve a görgetĹ‘sáv szĂ©lessĂ©gĂ©t. Kisebb kĂ©pernyĹ‘kön maximális szĂ©lessĂ©gĂĽk 978px, Ă©s a feliratok vĂzszintes kitöltĂ©ssel rendelkeznek. Közepes kĂ©pernyĹ‘kön a maximális szĂ©lessĂ©g 738px. Nagyon kicsi kĂ©pernyĹ‘kön az elem negatĂv margĂłkkal balra tolĂłdik, Ă©s a feliratok további kitöltĂ©st kapnak.
A törzs tartalmában lĂ©vĹ‘ kiemelt ábráknál nagyobb kĂ©pernyĹ‘kön negatĂv bal margĂłk vannak a megfelelĹ‘ igazĂtáshoz.
A bĂştorzat burkolĂł (furniture wrapper) relatĂvan helyezkedik el, Ă©s a 61,25em-nĂ©l szĂ©lesebb kĂ©pernyĹ‘kön további stĂlusok Ă©rvĂ©nyesek (bár a szabály hiányos).
.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] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start] 0.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);
text-decoration-thickness: 1px;
}
.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: 0.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] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] 0.75fr [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
width: 620px;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
left: -0.5px;
}
}
.furniture-wrapper .article-header .content__labels > div,
.furniture-wrapper [data-gu-name="title"].content__labels > div {
padding-top: 2px;
}
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name="headline"] h1,
.furniture-wrapper .headline h1 {
font-weight: 600;
max-width: 620px;
font-size: 32px;
}
@media (min-width: 71.25em) {
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name="headline"] h1,
.furniture-wrapper .headline h1 {
max-width: 540px;
font-size: 50px;
}
}
@media (min-width: 46.25em) {
.furniture-wrapper .keyline-4,
.furniture-wrapper [data-gu-name="lines"] {
margin-right: 0;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper .keyline-4,
.furniture-wrapper [data-gu-name="lines"] {
display: none;
}
}
.furniture-wrapper .keyline-4 svg,
.furniture-wrapper [data-gu-name="lines"] svg {
stroke: var(--headerBorder);
}
@media (min-width: 46.25em) {
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name="meta"] {
margin-right: 0;
}
}
.furniture-wrapper #meta .meta__social,
.furniture-wrapper #meta .meta__social ul li a span,
.furniture-wrapper #meta .meta__comment,
.furniture-wrapper [data-gu-name="meta"] .meta__social,
.furniture-wrapper [data-gu-name="meta"] .meta__social ul li a span,
.furniture-wrapper [data-gu-name="meta"] .meta__comment {
border-color: var(--headerBorder);
}
.furniture-wrapper #meta .content__meta-container_dcr > div > gu-island,
.furniture-wrapper [data-gu-name="meta"] .content__meta-container_dcr > div > gu-island {
display: none;
}
.furniture-wrapper .standfirst,
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name="standfirst"] {
margin-left: -10px;
padding-left: 10px;
position: relative;
}
@media (min-width: 46.25em) {
.furniture-wrapper .standfirst,
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name="standfirst"] {
padding-top: 2px;
}
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name="standfirst"] p {
font-weight: 400;
font-size: 20px;
padding-bottom: 14px;
}
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
position: relative;
margin-top: 0;
margin-bottom: 2px;
grid-area: portrait;
}
.furniture-wrapper #main-media div div,
.furniture-wrapper [data-gu-name="media"] div div {
width: 100%;
margin-inline: 0;
}
@media (min-width: 61.25em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
margin-bottom: 0;
}
}
@media (max-width: 46.24em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
width: calc(100vw - var(--scrollbar-width, 0px));
margin-left: -10px;
}
}
@media (max-width: 46.24em) and (min-width: 30em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
margin-left: -20px;
}
}
.furniture-wrapper figcaption {
position: absolute;
bottom: 0;
padding: 4px 10px 12px;
background-color: var(--captionBackground);
color: var(--captionText);
max-width: unset;
margin-bottom: 0;
min-height: 46px;
}
.furniture-wrapper figcaption span {
color: var(--headerBorder);
}
.furniture-wrapper figcaption span svg {
fill: var(--headerBorder);
}
.furniture-wrapper figcaption span:nth-of-type(1) {
display: none;
}
.furniture-wrapper figcaption span:nth-of-type(2) {
display: inline;
max-width: 90%;
}
@media (min-width: 30em) {
.furniture-wrapper figcaption {
padding: 4px 20px 12px;
}
}
.furniture-wrapper figcaption.hidden {
opacity: 0;
}
.furniture-wrapper #caption-button {
display: block;
position: absolute;
bottom: 10px;
right: 8px;
z-index: 30;
background-color: var(--captionBackground);
border: none;
border-radius: 50%;
padding: 6px 5px 5px;
}
.furniture-wrapper #caption-button svg {
transform: scale(0.85);
}
@media (min-width: 30em) {
.furniture-wrapper #caption-button {
right: 10px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive:before {
top: -12px !important;
height: calc(100% + 24px) !important;
}
}
.content__main-column--interactive h2 {
max-width: 620px;
}
:root {
--new-pillar-colour: var(--darkmode-pillar, var(--darkModeFeature)) !important;
--headerBorderColor: #606060;
--darkModeFeature: #ff5943;
}
nav + section {
display: none;
}
nav + aside {
display: none;
}
aside + section {
display: none;
}
.furniture-wrapper {
background-color: var(--darkBackground);
margin: 0 -10px;
padding: 0 10px 4px;
}
@media (min-width: 30em) {
.furniture-wrapper {
margin: 0 -20px;
padding: 0 20px 8px;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper {
padding: 0 20px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper:before {
content: "";
width: calc((100vw - 1298px) / 2);
height: 100%;
}
}
height:100%;position:absolute;left:calc((100vw - 1298px)/-2);background-color:var(--darkBackground);border-right:1px solid var(--headerBorderColor)}.furniture-wrapper:after{content:"";width:calc((100vw - 1298px)/2);height:100%;position:absolute;right:calc((100vw - 1298px)/-2);background-color:var(--darkBackground)}.furniture-wrapper .article-header,.furniture-wrapper [data-gu-name=title] a,.furniture-wrapper [data-gu-name=title] span{color:var(--new-pillar-colour, --darkModeFeature)}@media (min-width: 61.25em){.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(--headerBorderColor)}}.furniture-wrapper #headline h1,.furniture-wrapper [data-gu-name=headline] h1,.furniture-wrapper .headline h1{font-weight:700;color:#dcdcdc}.furniture-wrapper #headline figure,.furniture-wrapper [data-gu-name=headline] figure,.furniture-wrapper .headline figure{margin-top:0;margin-bottom:2px}@media (min-width: 71.25em){.furniture-wrapper #meta:before,.furniture-wrapper [data-gu-name=meta]:before{background-color:var(--headerBorderColor)}}.furniture-wrapper #meta details,.furniture-wrapper #meta summary,.furniture-wrapper #meta summary span,.furniture-wrapper [data-gu-name=meta] details,.furniture-wrapper [data-gu-name=meta] summary,.furniture-wrapper [data-gu-name=meta] summary span{color:#dcdcdc}.furniture-wrapper #meta .meta__social a,.furniture-wrapper #meta .meta__social button,.furniture-wrapper [data-gu-name=meta] .meta__social a,.furniture-wrapper [data-gu-name=meta] .meta__social button{border-color:var(--headerBorderColor);color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper #meta .meta__social a svg,.furniture-wrapper #meta .meta__social button svg,.furniture-wrapper [data-gu-name=meta] .meta__social a svg,.furniture-wrapper [data-gu-name=meta] .meta__social button svg{fill:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper #meta .meta__social a:hover,.furniture-wrapper #meta .meta__social button:hover,.furniture-wrapper [data-gu-name=meta] .meta__social a:hover,.furniture-wrapper [data-gu-name=meta] .meta__social button:hover{color:var(--darkBackground);background-color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper #meta .meta__social a:hover svg,.furniture-wrapper #meta .meta__social button:hover svg,.furniture-wrapper [data-gu-name=meta] .meta__social a:hover svg,.furniture-wrapper [data-gu-name=meta] .meta__social button:hover svg{fill:var(--darkBackground)}.furniture-wrapper #meta div,.furniture-wrapper [data-gu-name=meta] div{color:#dcdcdc}.furniture-wrapper #meta a,.furniture-wrapper [data-gu-name=meta] a{color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper #meta a:hover,.furniture-wrapper [data-gu-name=meta] a:hover{color:var(--new-pillar-colour, --darkModeFeature);text-decoration-color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper .standfirst a,.furniture-wrapper .standfirst li a,.furniture-wrapper #standfirst a,.furniture-wrapper #standfirst li a,.furniture-wrapper [data-gu-name=standfirst] a,.furniture-wrapper [data-gu-name=standfirst] li a{border-bottom:none;color:var(--new-pillar-colour, --darkModeFeature);background-image:none!important;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--headerBorder, #dcdcdc);text-decoration-thickness:1px}.furniture-wrapper .standfirst a:hover,.furniture-wrapper .standfirst li a:hover,.furniture-wrapper #standfirst a:hover,.furniture-wrapper #standfirst li a:hover,.furniture-wrapper [data-gu-name=standfirst] a:hover,.furniture-wrapper [data-gu-name=standfirst] li a:hover{border-bottom:none;text-decoration-color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper .standfirst p,.furniture-wrapper #standfirst p,.furniture-wrapper [data-gu-name=standfirst] p{color:#dcdcdc}@media (min-width: 61.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{bo
Nem tudom átĂrni ezt a szöveget, mert Ăşgy tűnik, CSS-kĂłd, nem termĂ©szetes nyelvű prĂłza. Tudnál egy Ărott angol szövegrĂ©szletet adni, amelyet szĂvesen átfogalmaznál?
Itt van az átĂrt szöveg folyĂ©kony, termĂ©szetes angol nyelven:
Ez a „Guardian Headline Full" betűcsalád font-face szabályainak kĂ©szlete. Minden szabály a betűtĂpus egy másik stĂlusát vagy sĂşlyát határozza meg, a Guardian weboldalán tárolt fájlokkal. A formátumok közĂ© tartozik a WOFF2, WOFF Ă©s TTF a böngĂ©szĹ‘k közötti kompatibilitás Ă©rdekĂ©ben. A sĂşlyok a normáltĂłl (400) a feketĂ©ig (900) terjednek, mind normál, mind dĹ‘lt stĂlusban elĂ©rhetĹ‘ek.
Ez a szöveg CSS-kĂłdnak tűnik, nem termĂ©szetes nyelvnek. Egy weboldal, valĂłszĂnűleg a Guardian betűstĂlusait Ă©s elrendezĂ©si szabályait határozza meg. Mivel technikai kĂłd, nem alkalmazhatĂł rá a „folyĂ©kony, termĂ©szetes angolra" valĂł átĂrás – ezt böngĂ©szĹ‘knek szánják, nem embereknek. Ha szeretnĂ©d, elmagyarázom, mit csinál ez a kĂłd egyszerű angol nyelven.
iOS Ă©s Android eszközökön a cikktárolĂł bĂştorzat burkolĂłjában lĂ©vĹ‘ cĂmkĂ©k fĂ©lkövĂ©r szöveggel vannak stĂlusozva, a Guardian Headline betűcsaládot használva, Ă©s a pillĂ©r szĂnĂ©vel szĂnezve, nagybetűs szöveggel.
Mind iOS-en, mind Androidon a bĂştorzat burkolĂłjában lĂ©vĹ‘ fĹ‘cĂm 32 kĂ©ppontos, fĂ©lkövĂ©r, 12 kĂ©ppontos alsĂł kitöltĂ©ssel, Ă©s sötĂ©t szĂnű (majdnem fekete).
A bĂştorzat burkolĂłjában lĂ©vĹ‘ kĂ©peknĂ©l mindkĂ©t platformon relatĂv pozicionálás van, 14 kĂ©ppontos felsĹ‘ margĂłval Ă©s enyhe negatĂv bal margĂłval, Ă©s a kĂ©pernyĹ‘ teljes szĂ©lessĂ©gĂ©re nyĂşlnak (figyelembe vĂ©ve a görgetĹ‘sávot). A kĂ©pek, valamint a hivatkozásaik Ă©s belsĹ‘ tárolĂłik átlátszĂł hátterűek, Ă©s megtartják termĂ©szetes magasságukat.
A bĂştorzat burkolĂłjában lĂ©vĹ‘ bevezetĹ‘ szöveg (standfirst) mindkĂ©t platformon nĂ©mi kitöltĂ©ssel rendelkezik a tetejĂ©n Ă©s az alján, valamint enyhe negatĂv jobb margĂłval, hogy megfelelĹ‘en igazodjon a kĂ©pernyĹ‘ szĂ©lĂ©hez.
.comment-article-container .furniture-wrapper .standfirst__inner p {
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
}
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a {
color: var(--new-pillar-colour) !important;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
border-bottom: none;
}
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a:hover {
text-decoration-color: var(--new-pillar-colour);
}
body.ios #feature-article-container .furniture-wrapper .meta,
body.ios #standard-article-container .furniture-wrapper .meta,
body.ios #comment-article-container .furniture-wrapper .meta,
body.android #feature-article-container .furniture-wrapper .meta,
body.android #standard-article-container .furniture-wrapper .meta,
body.android #comment-article-container .furniture-wrapper .meta {
margin: 0;
}
body.ios #feature-article-container .furniture-wrapper .meta .byline,
body.ios #feature-article-container .furniture-wrapper .meta .byline__author,
body.ios #feature-article-container .furniture-wrapper .meta span.byline__author a,
body.ios #feature-article-container .furniture-wrapper .meta .meta__byline span,
body.ios #standard-article-container .furniture-wrapper .meta .byline,
body.ios #standard-article-container .furniture-wrapper .meta .byline__author,
body.ios #standard-article-container .furniture-wrapper .meta span.byline__author a,
body.ios #standard-article-container .furniture-wrapper .meta .meta__byline span,
body.ios #comment-article-container .furniture-wrapper .meta .byline,
body.ios #comment-article-container .furniture-wrapper .meta .byline__author,
body.ios #comment-article-container .furniture-wrapper .meta span.byline__author a,
body.ios #comment-article-container .furniture-wrapper .meta .meta__byline span,
body.android #feature-article-container .furniture-wrapper .meta .byline,
body.android #feature-article-container .furniture-wrapper .meta .byline__author,
body.android #feature-article-container .furniture-wrapper .meta span.byline__author a,
body.android #feature-article-container .furniture-wrapper .meta .meta__byline span,
body.android #standard-article-container .furniture-wrapper .meta .byline,
body.android #standard-article-container .furniture-wrapper .meta .byline__author,
body.android #standard-article-container .furniture-wrapper .meta span.byline__author a,
body.android #standard-article-container .furniture-wrapper .meta .meta__byline span,
body.android #comment-article-container .furniture-wrapper .meta .byline,
body.android #comment-article-container .furniture-wrapper .meta .byline__author,
body.android #comment-article-container .furniture-wrapper .meta span.byline__author a,
body.android #comment-article-container .furniture-wrapper .meta .meta__byline span {
/ Itt nincsenek meghatározott stĂlusok /
}
Androidon a cikk- Ă©s hozzászĂłlás-szekciĂłkban a szerzĹ‘i sor Ă©s a szerzĹ‘i hivatkozások a pillĂ©r szĂnĂ©t használják a szövegĂĽkhöz. iOS-en ugyanez a stĂlus Ă©rvĂ©nyes.
Mind iOS-en, mind Androidon a meta informáciĂłs terĂĽlet ezekben a szekciĂłkban nem rendelkezik extra kitöltĂ©ssel. Az ott lĂ©vĹ‘ ikonok (pĂ©ldául SVG elemek) a pillĂ©r szĂnĂ©t használják a vonásaikhoz.
A kiemelt elemek felirat gombja mindkĂ©t platformon ugyanĂşgy van stĂlusozva: egy kicsi, közĂ©pre