Anteeksi, mutta en voi auttaa CSS-koodin uudelleenkirjoittamisessa sujuvaksi, luonnolliseksi englanniksi, koska se on tekninen tyylikielitiedosto, ei teksti, joka on tarkoitettu proosan uudelleenkirjoitukseen. Jos sinulla on erilainen teksti, jonka haluaisit minun auttavan, toimita se, niin autan mielellÀni.
En voi kirjoittaa tÀtÀ tekstiÀ uudelleen, koska se ei ole luonnollista kieltÀ, vaan CSS-koodia verkkofonttien mÀÀrittelyyn. Se sisÀltÀÀ teknisiÀ muotoilusÀÀntöjÀ fonttitiedostojen lataamiseen (kuten Guardian Headline ja Guardian Titlepiece) palvelimelta. Jos haluat, voin selittÀÀ, mitÀ tÀmÀ koodi tekee selkokielellÀ.
TĂ€mĂ€ on CSS-koodinpĂ€tkĂ€, joka mÀÀrittelee font-face-sÀÀnnöt "Guardian Headline Full" -fonttiperheelle. Se mÀÀrittÀÀ erilaisia fonttipainoja ja -tyylejĂ€, joilla kullakin on lĂ€hde-URL-osoitteet eri tiedostomuodoille (woff2, woff ja truetype). Fonttitiedostot on isĂ€nnöity Guardianin resurssipalvelimella. Koodi sisĂ€ltÀÀ tavalliset, kursiivi-, medium-, semibold-, bold- ja black-muunnelmat, joita vastaavat fonttipainoarvot vaihtelevat vĂ€lillĂ€ 400â900.
TÀmÀ teksti nÀyttÀÀ olevan CSS-koodia, ei luonnollista kieltÀ. Se mÀÀrittelee fonttityylejÀ ja responsiivisia ruudukkoasetteluja verkkosivustolle. Koska se on teknistÀ koodia, sitÀ ei tarvitse kirjoittaa uudelleen sujuvaksi englanniksi. Jos tarkoitit jakaa erilaisen tekstin, liitÀ se uudelleen, niin autan mielellÀni.
Interaktiivisten ruudukkokuvoiden uppoavien kuvatekstien kohdalla kuvatekstin muotoilu lisÀÀ 4px:n tÀytön ylÀreunaan ja 0:n sivuille ja alareunaan. PÀÀartikkelin rungossa, interaktiivisissa sisÀltöosioissa, kommenttiosioissa ja feature-runkoalueilla ruudukkoelementit riveille ja metatiedoille sijoitetaan ruudukkoalueelle, joka ulottuu riviltÀ 2, sarakkeesta 1 riville 5, sarakkeeseen 2. Rivielementin korkeus on asetettu sopimaan sen sisÀltöön, ja sen ylÀreunassa on 5px:n marginaali. Metaelementin ylÀreunassa on 18px:n marginaali. NÀytön leveydellÀ 81,25em ja sen ylÀpuolella nÀiden osioiden ruudukkoasettelu kÀyttÀÀ sarakkeita 219px, 1px, 620px, 80px ja 300px. iOS- ja Android-laitteilla artikkelien otsikoiden standfirst-teksti kÀyttÀÀ Guardian Headline -fonttiperhettÀ medium-painolla. Artikkelin kicker-osio nÀytetÀÀn lohkona, ja sen ensimmÀinen kirjain on suuri. Keyline-4-elementillÀ on ylimÀÀrÀinen 12px:n ylÀtÀyttö. Metatietoosion kirjoittajien nimet kÀyttÀvÀt Guardian Headline -fonttia lihavoituna, ja myös niiden sisÀllÀ olevat linkit ovat lihavoituja. Artikkelien kuvahahmoilla on sisÀsÀiliön korkeus asetettu automaattiseksi. Elementtiatomien jÀlkeen tulevilla kappaleilla ei ole ylÀmarginaalia. Mukautetut fontit on mÀÀritelty Guardian Headline Full -fontille, ja niissÀ on light- ja light italic -tyylit, jotka on haettu Guardianin resurssipalvelimelta.
En voi kirjoittaa tÀtÀ tekstiÀ uudelleen, koska se nÀyttÀÀ olevan CSS-koodia verkkofonttien mÀÀrittelyyn, ei luonnollista kieltÀ. Se sisÀltÀÀ teknisiÀ muotoilusÀÀntöjÀ (kuten font-face-mÀÀrityksiÀ URL-osoitteineen ja fonttipainoinen), joita ei ole tarkoitettu muunnettavaksi sujuvaksi englanninkieliseksi proosaksi.
Jos sinulla on erilainen teksti â kuten artikkeli, kappale tai lause â jonka haluaisit minun kirjoittavan uudelleen luonnolliseksi, sujuvaksi englanniksi, jaa se, niin autan mielellĂ€ni.
TÀssÀ on teksti kirjoitettuna uudelleen sujuvaksi, luonnolliseksi englanniksi:
```css
@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, 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"]) {
/ LisÀÀ tarvittaessa tiettyjÀ tyylityksiÀ tÀhÀn /
}
```
Olen siivonnut muotoilua, lisÀnnyt asianmukaiset vÀlilyönnit ja tehnyt koodista luettavampaa sÀilyttÀen samalla kaikki alkuperÀiset CSS-sÀÀnnöt ja arvot..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 {
/ TÀssÀ ei ole mÀÀritelty erityistÀ tyyliÀ, mutta valitsin on sÀilytetty mahdollista alkukirjaimen muotoilua varten /
}
TÀmÀ on CSS-koodilohko, ei teksti, joka kirjoitettaisiin uudelleen luonnolliseksi englanniksi. Se sisÀltÀÀ valitsimia ja tyylisÀÀntöjÀ verkkosivulle, todennÀköisesti uutissivustolle, kuten The Guardianille. Jos tarkoitit toimittaa erilaisen tekstin uudelleenkirjoitettavaksi, jaa se, niin autan tekemÀÀn siitÀ sujuvaa ja luonnollista.
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,
.furnitur
TÀmÀ on CSS-koodilohko, ei teksti, joka kirjoitettaisiin uudelleen luonnolliseksi englanniksi. Se sisÀltÀÀ verkkosivun asettelun muotoilusÀÀntöjÀ, mukaan lukien valitsimia, ominaisuuksia ja media kyselyitÀ. Jos tarkoitit toimittaa erilaisen tekstin uudelleenkirjoitettavaksi, jaa se, niin autan muuttamaan sen sujuvaksi, luonnolliseksi englanniksi.
TÀmÀ teksti nÀyttÀÀ olevan tekninen CSS-koodinpÀtkÀ, ei proosa. Se sisÀltÀÀ valitsimia ja tyylisÀÀntöjÀ verkkosivustolle, todennÀköisesti Guardianin artikkeli-sivuille, kohdistuen mobiililaitteisiin (iOS ja Android). Koska se on koodia, sen kirjoittaminen uudelleen "sujuvaksi, luonnolliseksi englanniksi" ei ole tavallisessa mielessÀ sovellettavissa. Voin kuitenkin antaa selkokielisen selityksen siitÀ, mitÀ tÀmÀ koodi tekee, yksinkertaistaen teknistÀ ammattikieltÀ.
---
Selitys CSS-koodista:
TÀmÀ koodi soveltaa erityisiÀ muotoilusÀÀntöjÀ artikkeli-sivuille mobiililaitteissa (iOS ja Android). TÀssÀ on mitÀ se tekee:
1. EnsimmÀisen kirjaimen muotoilu: EnsimmÀisessÀ kappaleessa tiettyjen elementtien (kuten kuvan tai sisÀÀnkirjautumiskehotteen) jÀlkeen feature-, standardi- tai kommenttiartikkeleissa ensimmÀinen kirjain on vÀrjÀtty mustaksi (tai varavÀrillÀ). TÀmÀ on yleinen muotoiluvalinta isoille alkukirjaimille tai korostukselle.
2. Otsikon korkeus: Mobiililaitteilla artikkelin otsikko-osio on asetettu nollan korkuiseksi, mikÀ tarkoittaa, ettÀ se on piilotettu tai kutistettu.
3. Furniture wrapperin tÀyttö: Artikkelin tunnisteita ja otsikkoa sisÀltÀvÀ alue saa pienen tÀytön (4px ylÀ- ja alareunaan, 10px vasemmalle ja oikealle).
4. Tunnisteiden muotoilu: Artikkelin tunnisteet (kuten "Uutiset" tai "Urheilu") nÀytetÀÀn lihavoituna kÀyttÀen serif-fonttia (kuten Georgia), ja ne on vÀrjÀtty kÀyttÀmÀllÀ mukautettua muuttujaa (todennÀköisesti osion vÀriÀ). Teksti on kirjoitettu isoilla kirjaimilla.
5. Otsikon muotoilu: PÀÀotsikko (h1) on asetettu fonttikokoon 32 pikseliÀ, lihavoitu, alareunan tÀytöllÀ, ja vÀrjÀtty tummaksi (melkein mustaksi).
6. Kuvien kÀsittely: Furniture wrapperin sisÀllÀ oleville kuvahahmoille ei ole annettu erityistÀ muotoilua tÀssÀ, mutta valitsin viittaa siihen, ettÀ niitÀ saatetaan kÀsitellÀ muualla.
Lyhyesti sanottuna tÀmÀ koodi varmistaa, ettÀ mobiililaitteilla artikkelin otsikot ja tunnisteet on muotoiltu johdonmukaisesti, otsikko on piilotettu ja ensimmÀisen kappaleen ensimmÀinen kirjain on korostettu, kaikki samalla kun sivuston visuaalinen identiteetti sÀilyy.
figure.element-image {
position: relative;
margin: 14px 0 0 -10px;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto;
}
/ iOS- ja Android-laitteilla kuvaelementeille furniture wrapperin sisÀllÀ artikkeli-sÀiliöissÀ /
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- ja Android-laitteilla standfirst-osioille artikkeli-sÀiliöissÀ /
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- ja Android-laitteilla standfirst-sisÀosioiden kappaleille /
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- ja Android-laitteilla standfirst-sisÀosioiden linkeille (mukaan lukien luettelokohteet) /
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- ja Android-laitteilla standfirst-sisÀosioiden linkkien hover-tilalle /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper