Ez egy CSS-kĂłdblokk, amely egy „Guardian Headline Full” nevű betűtĂpust határoz meg, Ă©s megadja, hogy honnan töltse be a kĂĽlönbözĹ‘ betűtĂpusfájlokat. Több betűvastagságot (light, regular, medium, semibold) Ă©s stĂlust (normál Ă©s dĹ‘lt) tartalmaz, mindegyikhez saját forrásfájlkĂ©szlettel kĂĽlönbözĹ‘ formátumokban (WOFF2, WOFF Ă©s TTF), amelyek a Guardian weboldalán vannak tárolva. A kĂłd biztosĂtja, hogy a betűtĂpus elĂ©rhetĹ‘ legyen a weboldalon valĂł használatra a fájlokra mutatĂł hivatkozások rĂ©vĂ©n.
Ez egy CSS-stĂluslap, amely a Guardian tipográfiájához határozza meg a betűtĂpusokat. KĂĽlönbözĹ‘ betűtĂpusfájlokat tölt be (WOFF2, WOFF Ă©s TTF formátumban) a „Guardian Headline Full” Ă©s „Guardian Titlepiece” betűtĂpuscsaládokhoz, megadva a kĂĽlönbözĹ‘ vastagságokat (light, regular, bold, black) Ă©s stĂlusokat (normál vagy dĹ‘lt) mindegyikhez. Az URL-ek a Guardian asset szerverĂ©n tárolt betűtĂpusfájlokra mutatnak.
Ez egy CSS-kĂłdblokk, amely a „Guardian Headline Full” betűtĂpuscsaládot határozza meg kĂĽlönbözĹ‘ vastagságokkal Ă©s stĂlusokkal. Több @font-face szabályt tartalmaz, amelyek mindegyike megadja a betűtĂpus forrásfájljait kĂĽlönbözĹ‘ formátumokban (woff2, woff Ă©s truetype), valamint a megfelelĹ‘ font-weight Ă©s font-style tulajdonságokat. A vastagságok 400-tĂłl (regular) 900-ig (black) terjednek, minden vastagsághoz normál Ă©s dĹ‘lt stĂlus is elĂ©rhetĹ‘. A betűtĂpusfájlok a Guardian asset szerverĂ©n vannak tárolva.
Ez egy CSS-kĂłdblokk, amely betűstĂlusokat Ă©s elrendezĂ©si szabályokat határoz meg egy weboldalhoz, valĂłszĂnűleg a Guardian weboldalárĂłl. Egyedi betűtĂpusokat állĂt be (mint a „Guardian Headline” Ă©s „Guardian Titlepiece”) kĂĽlönbözĹ‘ vastagságokkal Ă©s formátumokkal, majd rácsos elrendezĂ©si rendszert használ a tartalmi szekciĂłk (mint cĂm, fĹ‘cĂm, törzs stb.) elrendezĂ©sĂ©hez, amely reszponzĂvan alkalmazkodik a kĂĽlönbözĹ‘ kĂ©pernyĹ‘mĂ©retekhez. Az elrendezĂ©s az oszlopokat Ă©s a tĂ©rközöket kĂĽlönbözĹ‘ törĂ©spontoknál (pl. 30em, 46.25em, 61.25em, 71.25em) igazĂtja a mobilos, táblagĂ©pes Ă©s asztali eszközökön valĂł megfelelĹ‘ megjelenĂtĂ©s Ă©rdekĂ©ben.
Az interaktĂv rácsos ábrákhoz tartozĂł magával ragadĂł feliratok esetĂ©ben a felirat stĂlusa 4px felsĹ‘ Ă©s 0 alsĂł paddingot alkalmaz. Ez kĂĽlönbözĹ‘ tartalmi terĂĽletekre vonatkozik, beleĂ©rtve a cikkek törzsĂ©t, az interaktĂv tartalmakat, a hozzászĂłlási szekciĂłkat Ă©s a jellemzĹ‘ cikkek törzsĂ©t.
Az interaktĂv rácsos elrendezĂ©sben a vonalak Ă©s meta szekciĂłk a rács 2. sorátĂłl az 5. soráig Ă©s az 1. oszloptĂłl a 2. oszlopig terjedĹ‘ terĂĽleten helyezkednek el. A vonalak szekciĂł magassága a tartalomhoz igazodik, 5px felsĹ‘ margĂłval. A meta szekciĂł felsĹ‘ margĂłja 18px.
A 81.25em-nĂ©l (1300px) szĂ©lesebb kĂ©pernyĹ‘kön az interaktĂv rács oszlopelrendezĂ©se 219px, 1px, 620px, 80px Ă©s 300px.
iOS Ă©s Android eszközökön a cikkfejlĂ©cekben a bevezetĹ‘ szöveg a Guardian Headline betűtĂpuscsaládot használja közepes vastagsággal. A cikk kiemelĹ‘ szekciĂłja blokkkĂ©nt jelenik meg, az elsĹ‘ betű nagybetűvel. A keyline-4 elem extra 12px felsĹ‘ paddingot kap. A szerzĹ‘i sor szerzĹ‘nevei fĂ©lkövĂ©r vastagságot használnak a Guardian Headline betűtĂpusban, Ă©s a bennĂĽk lĂ©vĹ‘ linkek is fĂ©lkövĂ©rek. A cikkábrákban lĂ©vĹ‘ kĂ©pek magassága auto Ă©rtĂ©kre van állĂtva, Ă©s az interaktĂv atomokat követĹ‘ bekezdĂ©seknek nincs felsĹ‘ margĂłjuk.
A Guardian Headline Full betűtĂpus több fájlformátummal (woff2, woff Ă©s ttf) van meghatározva light vastagsághoz Ă©s normál stĂlushoz, valamint light dĹ‘lt stĂlushoz.
Nem tudok segĂteni ezzel a kĂ©rĂ©ssel, mert az Ă–n által megadott szöveg CSS-kĂłd webfontok meghatározásához, nem pedig termĂ©szetes nyelvű tartalom, amely folyĂ©kony angolra ĂrhatĂł át. Ha van egy másik szövege, amelyhez segĂtsĂ©get szeretne, kĂ©rjĂĽk, ossza meg, Ă©s szĂvesen segĂtek.
Itt van a szöveg folyĂ©kony, termĂ©szetes angolra átĂrva:
```
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, 0px));position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--half-scrollbar-width, 0px))!important;margin-right:calc(-50vw + var(--half-scrollbar-width, 0px))!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}}[data-gu-name=media]:has(figure.loop) figure.loop figcaption:not(.hidden){z-index:6}[data-gu-name=media]:has(figure.loop) figure.loop button[data-link-name*=gu-video-loop]{align-self:flex-end;margin-bottom:40px;margin-right:3px}[data-gu-name=media]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid=unmute-icon]),[data-gu-name=media]:has(figure.loop) figure
```.loop .controls-container div:has(button[data-testid=mute-icon]) {
right: 0;
padding-left: 10px;
}
[data-gu-name=media]:has(figure.loop) #caption-button {
z-index: 100;
}
@media (min-width: 61.25em) {
[data-gu-name=media]:has(figure.loop) #caption-button {
bottom: 20px;
}
}
@media (min-width: 46.25em) {
[data-gu-name=media]:has(figure.cinemagraph) .cinemagraph>div {
max-height: unset;
}
}
[data-gu-name=body] gu-island[name=SelfHostedVideo] {
width: 100%;
max-width: 620px;
display: block;
margin-top: 12px;
margin-bottom: 12px;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo] figure.loop,
[data-gu-name=body] gu-island[name=SelfHostedVideo] figure.loop video {
width: 100%;
height: auto;
max-width: 620px;
margin: 0 auto;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
max-width: unset;
margin: 12px 0;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure.loop,
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure.loop video {
max-width: unset;
margin: 0;
}
@media (min-width: 71.25em) {
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
width: 1140px;
margin-left: -180px;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure figcaption {
margin-left: 20px;
}
}
@media (min-width: 81.25em) {
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
width: 1300px;
margin-left: -260px;
}
}
:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, .72);
--feature: #c70000;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
:root:root {
--subheading-text: var(--secondary-pillar);
--pullquote-text: var(--secondary-pillar);
--pullquote-icon: var(--secondary-pillar);
--block-quote-text: var(--article-text);
}
:root:root blockquote {
--block-quote-fill: var(--secondary-pillar);
}
@media (prefers-color-scheme: dark) {
:root:root:not([data-color-scheme=light]) {
--subheading-text: var(--darkmode-pillar);
--pullquote-text: var(--darkmode-pillar);
--pullquote-icon: var(--darkmode-pillar);
}
:root:root:not([data-color-scheme=light]) blockquote {
--block-quote-fill: var(--darkmode-pillar);
}
}
.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-gate+p:first-of-type,
#article-body>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#article-body>div hr:not(.last-horizontal-rule)+p,
.content--interactive>div .element-atom:first-of-type+p:first-of-type,
.content--interactive>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
.content--interactive>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
.content--interactive>div hr:not(.last-horizontal-rule)+p,
#comment-body .element-atom:first-of-type+p:first-of-type,
#comment-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#comment-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#comment-body hr:not(.last-horizontal-rule)+p,
[data-gu-name=body] .element-atom:first-of-type+p:first-of-type,
[data-gu-name=body] .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
[data-gu-name=body] .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
[data-gu-name=body] hr:not(.last-horizontal-rule)+p,
#feature-body .element-atom:first-of-type+p:first-of-type,
#feature-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#feature-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#feature-body hr:not(.last-horizontal-rule)+p {
padding-top: 14px;
}
#article-body>div .element-atom:first-of-type+p:first-of-type:first-letter,
#article-body>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#article-body>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#article-body>div hr:not(.last-horizontal-rule)+p:first-letter,
.content--interactive>div .element-atom:first-of-type+p:first-of-type:first-letter,
.content--interactive>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
.content--interactive>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
.content--interactive>div hr:not(.last-horizontal-rule)+p:first-letter,
#comment-body .element-atom:first-of-type+p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#comment-body hr:not(.last-horizontal-rule)+p:first-letter,
[data-gu-name=body] .element-atom:first-of-type+p:first-of-type:first-letter,
[data-gu-name=body] .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
[data-gu-name=body] .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
[data-gu-name=body] hr:not(.last-horizontal-rule)+p:first-letter,
#feature-body .element-atom:first-of-type+p:first-of-type:first-letter,
#feature-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#feature-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#feature-body hr:not(.last-horizontal-rule)+p:first-letter {
/ Itt nincs konkrĂ©t stĂlus meghatározva, de a szelektor megmarad a lehetsĂ©ges stĂlusozáshoz /
}
Ez egy CSS-kĂłdblokk, nem pedig termĂ©szetes angol nyelvre átĂrandĂł szöveg. Szelektorokat Ă©s stĂlusszabályokat tartalmaz egy weboldalhoz, valĂłszĂnűleg a Guardian cikkoldalaihoz. Ha szeretnĂ©, elmagyarázhatom, hogy mit csinál ez a CSS egyszerű angol nyelven, vagy megadhat egy másik szöveget az átĂráshoz. Tudassa velem, hogyan szeretne továbblĂ©pni!
figure.element.element--showcase.element-showcase,
[data-gu-name="body"] .content__main-column--interactive figure.element.element--showcase.element-showcase {
margin-left: -240px !important;
}
@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] 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);
}
.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 [data-gu-name="standfirst"]:before {
left: -0.5px;
}
}
Itt van a szöveg folyĂ©kony, termĂ©szetes angol nyelvre átĂrva:
A standfirst szekciĂł burkolĂłeleme kis bal oldali eltolást kap. A cikkfejlĂ©c Ă©s cĂmszakasz cĂmkĂ©i egy kis extra felsĹ‘ paddingot kapnak. A fĹ‘cĂm fĂ©lkövĂ©r betűvastagságot használ, maximális szĂ©lessĂ©gre van korlátozva, Ă©s nagyobb kĂ©pernyĹ‘kön mĂ©rete nĹ‘. Közepes kĂ©pernyĹ‘kön a keyline Ă©s vonalak elemeknek nincs jobb margĂłjuk, nagyobb kĂ©pernyĹ‘kön pedig teljesen el vannak rejtve. A vonalak a fejlĂ©c szegĂ©lyĂ©vel megegyezĹ‘ szĂnt használnak.
A meta szekciĂłnak szintĂ©n nincs jobb margĂłja közepes kĂ©pernyĹ‘kön. A közössĂ©gi ikonok, hozzászĂłlási linkek Ă©s azok szegĂ©lyei mind a fejlĂ©c szegĂ©lyszĂnĂ©t használják. NĂ©hány interaktĂv elem a meta szekciĂłban el van rejtve. A standfirst szöveg kissĂ© behĂşzott bal oldali paddinggal rendelkezik, Ă©s a tartályához kĂ©pest relatĂv helyzetű. Közepes kĂ©pernyĹ‘kön egy kis felsĹ‘ paddingot kap. A standfirst bekezdĂ©sei meghatározott betűvastagsággal Ă©s mĂ©rettel rendelkeznek, nĂ©mi alsĂł paddinggal.
A fĹ‘ mĂ©dia szekciĂł relatĂv helyzetű, nincs felsĹ‘ margĂłja, Ă©s kis alsĂł margĂłval rendelkezik. A tartálya teljes szĂ©lessĂ©gĂ©t elfoglalja. Nagyobb kĂ©pernyĹ‘kön az alsĂł margĂł eltávolĂtásra kerĂĽl, kisebb kĂ©pernyĹ‘kön pedig a teljes viewport szĂ©lessĂ©gĂ©re bĹ‘vĂĽl negatĂv bal margĂłval. A felirat a mĂ©dia alján helyezkedik el, háttĂ©rszĂnnel, szövegszĂnnel Ă©s paddinggal. A felirat szövege tartalmaz egy span elemet, amely a fejlĂ©c szegĂ©lyszĂnĂ©t használja, Ă©s az elsĹ‘ span el van rejtve, mĂg a második megjelenik. Kisebb kĂ©pernyĹ‘kön a felirat paddingja nĹ‘. Ha a felirat el van rejtve, átlátszĂłvá válik. Egy felirat gomb a jobb alsĂł sarokban helyezkedik el, kör alakĂş háttĂ©rrel, szegĂ©ly nĂ©lkĂĽl Ă©s nĂ©mi paddinggal. A gomb ikonja kissĂ© kicsinyĂtve van.
Nagyobb kĂ©pernyĹ‘kön a fĹ‘ oszlop felsĹ‘ eltolással Ă©s magasságállĂtással rendelkezik. A benne lĂ©vĹ‘ fejlĂ©cek maximális szĂ©lessĂ©gre vannak korlátozva. SötĂ©t mĂłdban iOS Ă©s Android eszközökön bizonyos szĂnváltozĂłk vannak meghatározva, beleĂ©rtve a feature szĂnt Ă©s egy sötĂ©t mĂłdĂş változatot. Az Ăşj pillĂ©r szĂn alapĂ©rtelmezĂ©s szerint az elsĹ‘dleges pillĂ©r szĂnt használja, de sötĂ©t mĂłdban a sötĂ©t mĂłdĂş pillĂ©r szĂnre vált. iOS-en az elsĹ‘ elem atomot követĹ‘ bekezdĂ©s speciális mĂłdon van stĂlusozva.
Ez egy technikai CSS-stĂluslap, nem pedig átĂrásra szánt szöveg. Szelektorokat Ă©s stĂlusszabályokat tartalmaz egy weboldalhoz. Ha szeretnĂ©, elmagyarázhatom, hogy mit csinál, vagy segĂthetek egyszerűsĂteni vagy Ăşjraformázni. Tudassa velem, hogyan szeretne továbblĂ©pni!
figure.element-image {
position: relative;
margin: 14px 0 0 -10px;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto;
}
/ iOS Ă©s Android rendszeren, minden cikktĂpusnál, a kĂ©pek Ă©s tartályaik teljes szĂ©lessĂ©gűek Ă©s átlátszĂłak /
body.ios #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #feature-article-container .furniture-wrapper figure.element-image img,
body.ios #feature-article-container .furniture-wrapper figure.element-image a,
body.ios #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #standard-article-container .furniture-wrapper figure.element-image img,
body.ios #standard-article-container .furniture-wrapper figure.element-image a,
body.ios #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #comment-article-container .furniture-wrapper figure.element-image img,
body.ios #comment-article-container .furniture-wrapper figure.element-image a,
body.android #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #feature-article-container .furniture-wrapper figure.element-image img,
body.android #feature-article-container .furniture-wrapper figure.element-image a,
body.android #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #standard-article-container .furniture-wrapper figure.element-image img,
body.android #standard-article-container .furniture-wrapper figure.element-image a,
body.android #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #comment-article-container .furniture-wrapper figure.element-image img,
body.android #comment-article-container .furniture-wrapper figure.element-image a {
background-color: transparent;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto !important;
}
/ iOS Ă©s Android rendszeren, a standfirst (bevezetĹ‘ bekezdĂ©s) tĂ©rközĂ©nek Ă©s igazĂtásának beállĂtása /
body.ios #feature-article-container .furniture-wrapper .standfirst,
body.ios #standard-article-container .furniture-wrapper .standfirst,
body.ios #comment-article-container .furniture-wrapper .standfirst,
body.android #feature-article-container .furniture-wrapper .standfirst,
body.android #standard-article-container .furniture-wrapper .standfirst,
body.android #comment-article-container .furniture-wrapper .standfirst {
padding-top: 4px;
padding-bottom: 24px;
margin-right: -10px;
}
/ iOS Ă©s Android rendszeren, a standfirst bekezdĂ©seinek betűtĂpusának beállĂtása /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner p,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner p,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner p,
body.android #feature-article-container .furniture-wrapper .standfirst__inner p,
body.android #standard-article-container .furniture-wrapper .standfirst__inner p,
body.android #comment-article-container .furniture-wrapper .standfirst__inner p {
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
}
/ iOS Ă©s Android rendszeren, a standfirst belsejĂ©ben lĂ©vĹ‘ linkek stĂlusozása (beleĂ©rtve a lista elemeket is) /
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;
}
/ iOS Ă©s Android rendszeren, a standfirst belsejĂ©ben lĂ©vĹ‘ linkek hover állapotának stĂlusozása /
body.ios #feature-article-container .furniture-wrapper .