Tässä artikkelissa määritellään miten ropepostaukset saa muotoiltua niin, että ne kestävät aikaa ja tulevat Klaanon-sivun päivitykset.

Sisällysluettelo

Migraatio uudelle sivulle 29.8.2023 mennessä

Monimutkaisia tyylejä ja skriptejä sisältävät postaukset ovat luultavasti rikki uudella sivulla. Näiden korjausprosessi on seuraavanlainen:

Vaivan taso 1: Poista viestin script-tageista tuplarivinvaihdot ja korvaa Musicmancer tässä oppaassa määritellyillä musiikkisoittimilla.

Vaivan taso 2: Siirrä viestin script-tagien sisältö WordPressin editorin uuteen “Skriptit”-kenttään, ja viestin tyylit style-tageista “Tyylit”-kenttään.

Vaivan taso 3: Päivitä viestin tyylit käyttämään tässä oppaassa määriteltyjä esimääriteltyjä tyylejä ja CSS-muuttujia.

Pikaopas Markdowniin

Koska WordPressin editori parsettaa viestistä Markdownin oletuksena, se on hyvä tapa tuottaa perusmuotoiluja viestiin. Olette kenties käyttäneet sitä aivan huomaamattanne! Esimerkiksi kappalejako kahdesta rivinvaihdosta tulee Markdown-parserista. Jos siirrymme tulevaisuudessa WordPressista pois, Markdown säilyy validina muotoilutapana (mutta ehdottomasti niin että sen voi halutessaan kytkeä pois). Markdownin sekaan voi luonnollisesti sekoittaa HTML-elementtejä.

Seuraa esimerkki.

#### Paikkamääre

Tässä on ensimmäinen kappale tekstiä, myös vähän *kursiivia*. Sitä seuraa kappaleenvaihto.

Tässä on toinen kappale tekstiä, hitusen **boldia**. Sitä seuraa tauko.

---

Kolmas kappale vielä lopuksi. Siellä on <span style="color: red;">CSS-tyylitelty tekstinpätkä</span>.

Tästä seuraa lopputuloksena seuraavanlainen muotoilu:

WordPressin lisäkentät

WordPressissa on nyt joukko lisäkenttiä, joiden avulla esim. määritellään viestien tyylit ja skriptit. Näiden selitykset ovat itse kenttien vieressä.

Perusmuotoilut

Näillä muotoiluilla kuka tahansa saa väriä ropepostiinsa.

Tekstin muotoilu

Tästä taulukosta näet miten yleisimpiä muotoiluja käytetään. Osan muotoiluista ympärillä on elementti span tai p, joka kertoo onko muotoilu tekstinpätkän vai koko kappaleen tasolla; span on tekstinpätkä kappaleen sisällä, p kappale itsessään. (Huomaa, että niin sanotun inline-elementit kuten span toimivat eri tavalla kuin niin sanotut block-elementit kuten p, joten jos yrität kääriä esimerkiksi useita tekstikappaleita span-elementin sisään, se ei välttämättä toimi halutulla tavalla.)

Huomaa, että strong ja em ovat samanlaisia elementtejä kuin span eli niiden sisään ei ole tarkoitus kääriä ainakaan enempää tekstiä kuin yksi kappale. Jos haluat esimerkiksi boldata useita tekstikappaleita kerralla, tee se mieluummin käytämällä luokkaa bold (lisää tästä osiossa CSS-apuluokat).

Muut muotoilut

Tauko

Tauko on Markdownissa kolme väliviivaa (---) tai HTML:ssä hr-elementti.:

Paikka

Paikkamääre on neljännen tason otsikko, eli Markdownissa neljä risuaitaa (####) tai HTML-elementti h4:

Nazorak-pesä

CSS-apuluokat

Luokka on HTML-elementin ominaisuus, jota voi ajatella vaikka tyylikokonaisuutena. Elementille annetaan luokkia class-attribuutin avulla:

<div class="luokan-nimi">blah blah</div>

Samalle elementille voi antaa useita luokkia. Nämä erotellaan toisistaan välilyönnein class-attribuutin arvossa:

<div class="luokka1 luokka2 luokka3">blah blah</div>

Kuten ehkä huomasit, perusmuotoilut tuossa ylempänä toteutettiin myös usein luokkien avulla.

Meillä on useita valmiiksi määriteltyjä luokkia, monet niistä hahmotyylejä, joita voi vapaasti käyttää ja ne toimivat heti:

• feterra – feterran puhefontti:

  Ilmoitus: Vedä käteen.

• frederick:

  Jottai shittii

• ghotic:

  Jottai shittii

• harakka – meriharakan puhetyyli:

  Kraa kraa.

• hexatoran – kulmikkailla matoran-aakkosilla:

  Osaatko vielä lukea?

• jouera – Joueran puhetyyli:

  Täydellisyys syntyy vain kastraatiolla.

• kauno:

  Jottai shittii

• kuiskaus – mystinen ääni, jonka Kapura kuuli Punasiirtymässä:

  Jotkut haluavat nähdä maailman palavan.

• makuta – Arkkimakutan puhetyyli:

  Lol tyttö oot vähän tyhäm

• matoran – matoran-aakkosilla:

  Vieläkö osaat lukea?

• mielitietty – Deltan puhefontti (Matorolle):

  𝅘𝅥𝅯 Hurr durr~𝅘𝅥𝅯

• nauru – Syvän Naurun puhefontti:

  Kerubi, sinä putoat.

• polttari – Polttouhrin puhefontti:

  Isi mihin menit?

• rahkshi – rahkshi-fontti (käytä viisaasti):

  Saako tästä edes mitään selvää

• roseinitials – muuttaa isot alkukirjaimet hienoiksi anfangeiksi (kannattaa käyttää isommalla fonttikoolla):

  Jottai shittii

• static – Kelvinin muisti palaa -fontti:

  Roaaar!

• tappaja-jaken – Tappajan (Jaken) puhefontti:

  Meille hän on Endon.

• tarkastaja – Tarkastajan puhefontti:

  Olen pettynyt näihin esimerkkiteksteihin.

• vahki – vahkien (ja esim. Biancan) puhefontti:

  Mulla on iso kello.

• viktor – tiedät, mihin tätä käytetään:

  DOKTOR VIKTOR VON NEBULA

Kaikki käytössä olevat erikoisfontit löytyvät tästä tiedostosta. Kaikki hahmokohtaiset/muut usein toistuvat erikoismuotoilut puolestaan ovat tässä tiedostossa.

Myös seuraavia luokkia voi hyödyntää elementtien muotoilussa.

• hidden – Piilottaa minkä tahansa elementin.
• hidden-mobile – Piilottaa elementin mobiilinäkymässä.
• hidden-desktop – Piilottaa elementin työpöydällä mutta ei mobiililla.
• center – Keskittää elementin.
• full-width/max-width – Tekee elementistä tekstipalkkia leveämmän. Tarkemmat speksit alla.
• mobile-overflow – Merkkaa tosi ison elementin sellaiseksi, että sitä voi scrollata mobiililla sivusuunnassa.
• bold/italic – Jos haluat boldata tai kursivoida isompia kokonaisuuksia kerralla, kannattaa käyttää jatkuvien strong– ja em-elementtien availun ja sulkeilun sijaan näitä luokkia. Voit esimerkiksi tehdä div-elementin, laittaa sille classin bold ja laittaa kyseisen div-elementin sisään boldattavat tekstikappaleesi.

Voit myös määritellä omia luokkia. Tästä lisää osiossa omat luokat.

Sivupohjan fontit

Sivupohjan käyttämät fontit ovat:
– Leipäteksti: Source Serif 4
– Infoteksti: Source Code Pro
– Otsikot: Cinzel

Kuvat

Kuva on yksinkertainen img-tagi. Kun kuvalle ei ole erikseen määritelty leveyttä, se täyttää normaalin tekstialueen. Jos kuva on tekstialuetta kapeampi, se keskitetään automaattisesti – ei tarvetta roiskia center-tageja.

<img src="https://meri.klaanon.fi/guardian/pienetviestit/SokeattarenTanssi/sielujensadonkorjuu.png" />

Huomaa, että img on niin kutsuttu void-elementti eli sen sisään ei voi laittaa muuta tekstiä. Eli ei ole oikein kirjoittaa <img src="...">tekstiä</img>. Sama pätee myös esimerkiksi elementtiin hr. Tällaiset tagit voi sulkea laittamalla ennen tagin lopettavaa kulmasulkua symbolin /, mutta HTML:n uusimmassa versiossa tämä ei ole pakollista; toisin sanoen yllä olevan kuvan koodin voisi kirjoittaa myös ilman sitä:

<img src="https://meri.klaanon.fi/guardian/pienetviestit/SokeattarenTanssi/sielujensadonkorjuu.png">

Leveät kuvat

Täyden leveyden kuva tapahtuu laittamalla elementille class full-width:

<img class="full-width" src="https://meri.klaanon.fi/guardian/pienetviestit/SokeattarenTanssi/sielujensadonkorjuu.png" />

Lisäksi on koko sivun täyttävä max-width. Huomaa, että kapealla näytöllä se saattaa olla yhtä leveä kuin full-width.

<img class="max-width" src="https://meri.klaanon.fi/guardian/pienetviestit/SokeattarenTanssi/sielujensadonkorjuu.png" />

Jos haluat, että kuvasi näkyy sen kokoisena kuin kuvan todelliset mitat ovat mutta enintään koko näytön levyisenä, voit tehdä esimerkiksi div-elementin, jonka luokka on max-width ja laittaa kuvasi sen sisään. Täten kuva saa olla sen kokoinen kuin on, ellei se sitten ole leveämpi kuin näytön leveys, jolloin se skaalataan näytön levyiseksi.

alt-attribuutit

Huomaa, että olisi hyvä käytäntö asettaa img-elementeille attribuutti alt, jonka arvo kuvailee, mitä kuva esittää. Tämä teksti tulee näkyviin, jos kuvaa ei jostain syystä voida ladata (ja olisi myös käytettävyyssyistä hyvä olla, vaikkakaan sille yleisölle, joka tätä lukee, tällä on tuskin väliä). Esimerkki alla.

<img alt="Same ja Tawa ottelevat" src="https://meri.klaanon.fi/guardian/pienetviestit/SokeattarenTanssi/sielujensadonkorjuu.png" />

Huom: jos esikatselet viestiä, HTML-validaattori valittaa puuttuvista alt-attribuuteista.

Edistynyt muotoilu

Näiden muotoilujen käyttö vaatii jo perustuntemusta HTML:stä ja CSS:stä.

Mittayksiköt

Pikseleiden käyttäminen mittayksikkönä asioiden koon määrittelyssä on ongelmallista, sillä absoluuttiset yksiköt kuten pikseli eivät skaalaudu ja ovat siten erittäin huonoja esimerkiksi mobiilina.

Eräs hyvä mittayksikkö käytettäväksi on rem. 1rem määräytyy sen mukaan, miten ison fonttikoon selain päättää määrätä sivun perusfontiksi (työpöytäselaimella oletusfonttikoko on usein 16px, mutta tätä voinee muuttaa selaimen asetuksista). Suurin osa Nuvan mitoista on määritelty remeissä; esimerkiksi palstan maksimileveys on 38rem.

Toinen hyvä, vielä suhteellisempi mittayksikkö on em. Se on vähän kuin rem mutta sen sijaan, että se olisi suhteessa sivun perusfonttikokoon, se on suhteessa senhetkisen kontekstin fonttikokoon. Esimerkiksi jos määrittelet elementin

<div style="font-size: 3rem;">blah blah</div>

niin tämän elementin sisällä 1em on 3rem.

Omat luokat

Voit määritellä omia luokkia kirjoittamalla postauksen tyylikenttään seuraavan:

.luokan-nimi {
    tyylejä
}

Piste luokan nimen edessä tarkoittaa sitä, että kyseessä on luokka. Vaihtamalla pisteen esimerkiksi symboliin # voit määritellä tyylejä elementille, jonka id on haluamasi nimi. Huomaa, että kahdella eri HTML-elementillä ei saa olla samaa id:iä, sillä id on tunniste, jonka kuuluisi identifioida elementti yksikäsitteisesti (vähän kuin henkilötunnus). Huomaa myös, että luokan nimessä ei saa olla välilyöntiä (eikä erikoismerkkejä, mukaan lukien ääkköset); välilyönnillä on CSS-selectoreissa oma roolinsa.

Voit esimerkiksi määritellä luokan nimeltä hirvea-kontrasti asettamalla

.hirvea-kontrasti {
    background-color: #FF0000;
    color: #00AAAA;
}

Tämän jälkeen elementti, jonka koodi on

<div class="hirvea-kontrasti">blah blah</div>

näyttää tältä:

Luokkien nimet on tapana kirjoittaa ns. kebab-casella (eli sanojen väliin tulee viiva), mutta tämä ei tietenkään ole pakollista, vaan periaatteessa voisit antaa luokan nimeksi vaikka hirveaKontrasti.

Taustakuvat

Taustakuvan saa asetettua tekstialueelle käärimällä tekstin div-elementtiin, jolla on luokka background, ja jonka style-attribuutissa määritellään kuvan URL. Taustakuvan saa toistumaan antamalla sille luokan repeat. Taustakuvan alkuun ja loppuun voi lisätä häivytyksen luokilla fade-top ja fade-bottom, tai sitten molempiin kerralla luokalla fade. fade tapahtuu ::before– ja ::after-pseudoelementeissä, ja niitä voi jatkotyylitellä postauksen omassa CSS:ssä, jos haluaa kustomoida esim. niiden pituutta. Pituuden säätö esimerkiksi tapahtuu kasvattamalla ::after-pseudoelementin height-arvoa ja itse background-elementin padding-bottom:ia.

<div class="background repeat fade-bottom" style="background-image: url(https://meri.klaanon.fi/kapura/punainen_maisema/starbg.png);">

Taustakuva voi joko olla kooltaan pelkkä background (täyttää valkoisen alueen) tai background max, joka täyttää myös mustan alueen. max-tausta voi myös olla toistuva.

<div class="background max" style="background-image: url(https://meri.klaanon.fi/manfred/Surutulitus/kuvitus/alkutekstikoristeet_transparency.webp);">

Musiikkisoittimet

Musicmancer 2023 Edition

Yksinkertaisimmillaan musiikkisoitin on audio-elementti:

<audio src="https://meri.klaanon.fi/kepe/pjo/audio/02%20Musta%20aurinko%20nousee%20(Instrumental)%20Pt%201.mp3" />

Tieto soitettavasta kappaleesta voi tulla joko suoraan URLina src-kentästä, tai sitten WordPressin editorin “Musiikki”-kentästä, johon tulee kappaleen URL per rivi. Näihin voi viitata joko indeksillä (alkaen nollasta), esim #5, tai sitten arvolla #auto, joka linkittää soittimen ensimmäisellä esiintymiskerrallaan listan ensimmäiseen kappaleeseen, toisella toiseen, jne.

Indeksi:

<audio src="#0" />

Automaatti (huomaa että soittaa saman kuin ylempi):

<audio src="#auto" />

Kun uusi soitin alkaa soida, edellinen musiikki häivytetään pois sekunnin aikana. Jos tätä aikaa haluaa säätää, voi audio-elementille antaa attribuutin data-fade-out-time, ja sen arvoksi fade-ajan sekunteina.

Soittimen voi myös merkitä “ääniefektiksi”. Ääniefekti ei keskeytä musiikkia, vaan ne saavat soida päällekkäin. Tämä tapahtuu lisäämällä audio-elementille class “effect”.

<audio src="https://meri.klaanon.fi/manfred/Joulut%C3%A4htien+sota/Musiikki/The+Wilhelm+scream.mp3" class="effect" />

Oletuksena nappulan sisälle piirretään nuottikuvake. Jos haluat itse päättää napin sisällön, aseta oma sisältösi arvoksi audio-elementin attribuutti data-content:

<audio src="#0" data-content="😳" />

Musiikkisoittimelle, jolla on luokka hidden, ei piirretä soittonappia ollenkaan. Sitä voi kuitenkin ajaa skriptillä ja sen #-alkuiset viittaukset täytetään.

Natiivisoittimen saa käyttöön antamalla audio-elementille attribuutin controls. Tällaisenkin soittimen #-alkuiset viittaukset täytetään, ja toisen soittimen käynnistys pysäyttää sen.

<audio src="#1" controls class="center" />

Musiikkisoittimien tyylittely

Jos haluat tyylitellä musiikin soittonappia, huomaa että <audio>-elementin tyylittely ei toimi. Tyylittele mieluummin elementtiä .audio-button. Voit muuttaa esimerkiksi kaikkien nappuloiden mittoja asettamalla tyyleissä

.audio-button {
    width: leveys tähän;
    height: korkeus tähän;
}

Esimerkiksi asettamalla

.audio-button {
    width: 100%;
    height: 3rem;
}

saadaan seuraavan näköinen nappula:

Huomaa, että nappulan mitat skaalautuvat nappulalle annetun fonttikoon mukaan. Esimerkiksi jos laitat tyyleihin

.audio-button {
    font-size: 3rem;
}

niin nappulasi skaalautuu kolminkertaiseksi (koska oletusfonttikoko on 1rem):

Voit muuttaa oikeastaan mitä tahansa napin CSS-ominaisuuksia kuten taustan väriä tai kulmien pyöreyttä. Esimerkiksi

.audio-button {
    width: 6rem;
    height: 4rem;
    border-radius: 0;
    background-color: #AA0366;
}

tuottaisi seuraavan näköisiä soittia:

Jos haluat määritellä, miltä nappulat näyttävät, kun kursorin siirtää niiden päälle, voit tehdä sen käyttämällä selectoria :hover. Esimerkiksi

.audio-button:hover {
    background-color: #FF0000;
    box-shadow:  0 0 1rem #00FFFF;
}

tuottaa seuraavanlaisen (aika ruman) hover-efektin:

Yhtään monimutkaisempaa muotoilua varten kannattaa käydä postauksen asetuksista ruksittamassa rasti ruutuun kohdassa “Resetoi musiikkinappuloiden tyylit”. Kun teet näin, nappulan tyylit riisuuntuvat minimaalisiksi (esimerkiksi reunaviiva, taustavärit ja varjot katoavat). Tällöin nappula näyttää tältä:

Jos haluat asettaa nappuloille oman taustakuvan, voit tehdä sen seuraavasti:

.audio-button {
    background-image: url(https://meri.klaanon.fi/.../tiedostonimi.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

Ominaisuus background-size: contain merkitsee sitä, että taustakuva skaalataan niin pieneksi, että se näkyy kokonaan. Voit sitten säätää nappulan kokoa width– ja height-ominaisuuksia käyttämällä. Voit myös halutessasi kokeilla jotain muuta arvoa background-size:lle. background-repeat: none tarkoittaa, että taustakuva ei toistu missään suunnassa. Muita mahdollisia arvoja ovat esimerkiksi repeat (toista sekä pysty- että vaakasuunnassa), repeat-x (toista vaakasuunnassa) ja repeat-y (toista pystysuunnassa). background-position: center center tarkoittaa, että kuva keskitetään molemmissa suunnissa. Muita mahdollisia arvoja ovat esimerkiksi left top ja right bottom, tai voit vaikkapa käyttää mittayksiköitä, kuten 2rem -4rem. Huomaa, että piste (0,0) on vasen yläkulma, joten negatiiviset arvot y-koordinaatissa siirtävät taustakuvaa alemmas, kun taas positiiviset arvot x-koordinaatissa siirtävät taustakuvaa oikealle.

Jos haluat nappuloille eri taustakuvan ilman hover-efektiä ja hover-efektin aikana, suosittelen seuraavaa. Kääri audio-elementti div-elementtiin, jolle annat jonkin uuden luokan. Minun esimerkissäni tämä luokka on bcont.

<div class="bcont"><audio src="#1" /></div>

Sitten tyylittele niin, että bcont:lla on taustakuvanaan hover-taustakuva ja nappulalla taustakuvanaan tavallinen nappulan taustakuva ja anna nappulalle hover-efektinä background: none. Esimerkkinä Musta Käsi III -viestin musiikkinappulan tyylit:

.bcont {
    background-image: url(https://meri.klaanon.fi/umbra/Nurukan/kuvat/nurukan_hexagon_hover.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    margin: 3rem 0;
}

.bcont .audio-button {
    background-image: url(https://meri.klaanon.fi/umbra/Nurukan/kuvat/nurukan_hexagon.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 5rem;
    height: 5rem;
}

.bcont .audio-button:hover {
    background: none;
    color: #8DD0EF;
}

Lopputulos on tämä.

Sivupohjan tyylittely

Jos viestillä on tarve muokata koko sivupohjan ulkonäköä, tässä kuvataan “rajapinta” jota voi CSS:llä sörkkiä.

<div id="layout"> – Koko sivun wrapper-elementti.
  <header> – Sivun banneri.
  <nav> – Sivun navigaatio.
  <main> – Sivun päänäkymä. Tällä on valkoinen tausta, jota voi tarvittaessa muokata.
    <div class="transition"> – Apuwrapperi routingille, älä piittaa tästä.
      <article> – Sivun sisältö.
        <header id="post-header"> – Postauksen otsikkoalue.
          <h1 id="post-title"> – Viestin otsikko.
          <div id="post-meta"> – Viestin metatiedot.
        <section id="post-content"> – Viestin sisältö.
        <footer id="post-footer"> – Postauksen jälkeen tuleva sälä.
          <div id="authors> – Viestin tekijät.
          <div id="tags"> – Postauksen tagit.
          <div id="previous-next-post"> – Edellinen ja seuraava postaus nappeina.
          <div id="comments> – Postauksen kommentit.
  <footer> – Sivun footer.

Näistä main-alue on koko “valkoinen alue”, sen leveys on #layout:n määrittämä maksimissaan (muuttuja --page-max-width). article puolestaan määrittelee rivin pituuden, joka on maksimissaan (muuttuja --article-max-width). Koko sivun levyiset kuvat valuvat siis article:sta yli. Nämä ovat tosiaan max-width-leveydet, ja pienenevät pienemmillä näytöillä (esim. mobiililaitteilla).

Muotoiluun on siis parempi käyttää ylläkuvattuja muuttujia kuin kovakoodattuja arvoja. Näin varmistetaan, että viesti ei mene rikki, jos sivun tyylejä päivitetään, tai jos yksinkertaisesti haluaa postauksen näyttävän hyvältä mobiililla.

Kapein tuettu ikkunan leveys on (muuttuja --page-min-width).

Kaikki hyödylliset muuttujat, niin mitat kuin väritkin, on listattu kommentteineen tässä tiedostossa: variables.scss.

Palstat eli sisältöruudukko

Jos haluat saada kaksi tai kolme palstaa vierekkäin, kuten Visulahdessa, se tapahtuu käärimällä tekstisi div-elementtiin jolla on luokka grid-layout, jonka alla on div-elementtejä joilla voi olla luokka grid-left, grid-middle tai grid-right:

<div class="grid-layout">
  <div class="grid-left">
    <p>Lorem ipsum.</p>
  </div>
  <div class="grid-right">
    <p>Dolor sit amet.</p>
  </div>
  <div class="grid-left">
    <p>Lorem ipsum kaksi.</p>
  </div>
  <div class="grid-right">
    <p>Dolor sit amet kaksi.</p>
  </div>
</div>

Huomaa, että mobiililla pienet varjot vihjaavat, että alue on sivusuunnassa scrollattava. Näiden varjojen väriä voi vaihtaa asettamalla muuttujan --scroll-hinting-shadow-color.

Mobiiliystävällisyys

Jos haluat tehdä jotain hassua uutta, esimerkiksi määritellä kuvan, jonka leveys on 150% palstan leveydestä, sen voisi toteuttaa vaikkapa seuraavasti. Tehdään uusi class semi-wide, laitetaan sen leveydeksi (enintään) 150% ja annetaan sille 5rem:n verran pystysuuntaista marginaalia ja -25%:n verran vaakasuuntaista marginaalia, jolla tasataan se, että kuva on palstaa leveämpi.

.semi-wide {
    max-width: 150%;
    margin: 5rem -25%;
}

Nyt elementti

<img class="semi-wide" src="https://meri.klaanon.fi/manfred/Surutulitus/kuvitus/kalingatar.webp" />

näyttää seuraavalta:

Tämä ei välttämättä näytä kovin hyvältä mobiilina (vilkaise huviksesi kännykällä, miltä tuo yllä oleva kuva näyttää; todennäköisesti se leikkaantuu reunoilta aika paljon). Tämän voi korjata käyttämällä niin kutsuttuja media queryja. Meidän palstamme maksimikoko on 38rem (tallennettuna CSS-muuttujaan --article-max-width). Eli niin kauan kuin näytön leveys on enemmän kuin 150% tuosta leveydestä 38rem, mikä tekee 1,5 · 38rem = 57rem, kuva näyttää järkevältä. Voimme määritellä seuraavanlaisen media queryn tapaukselle, jossa näyttö on tätä kapeampi:

@media screen and (max-width: 57rem) {
    .semi-wide {
        max-width: 100%;
        margin: 5rem 0;
    }
}

Olemme siis käytännössä määritelleet uudelleen luokan semi-wide tyylit tapauksessa, jossa näytön leveys on enintään 57rem. Tällöin kuva näyttää seuraavalta (leveällä näytöllä samalta kuin edellinen kuva, mutta vilkaisepa kännykällä, ja näyttääkin vähän paremmalta!):

Skriptaus

Uusi sivu tarjoaa muutamia uusia työkaluja postausskriptauksen tueksi globaalissa objektissa window.nuvaGlobal.

Skriptien käyttö

Skriptejä voidaan ajaa kahdella tapaa: joko suoraan editorin “Skriptit”-kenttään syötettynä, tai sitten tiedosto-URLeina “Ulkoiset skriptit” -kentän avulla. Skriptit ajetaan kun postauksen sisältö on latautunut. Ulkoiset skriptit ajetaan ennen sisäisiä, siinä järjestyksessä kun ne on lueteltu listassa. Avaamalla konsolin näet demon ulkoisesta skriptistä.

Tekstin ja musiikin synkronointi

Jos haluat synkronoida tekstin tulemaan näkyviin pienissä palasissa kuten esimerkiksi viestissä XII, tässä on siihen ohjeet.

Ensinnäkin, lisää “Ulkoiset skriptit” -kenttään

https://meri.klaanon.fi/manfred/ajastus.js

Sen jälkeen voit käyttää “Skriptit”-kentässä funktiota timeTextWithMusic, joka syö kolme argumenttia: times, songNumber ja containerElement. Ensimmäinen näistä, times, on lista ajankohdista. Lista annetaan muodossa

[{m: minuutit1, s: sekunnit1}, {m: minuutit2, s: sekunnit2}, ...]

missä kukin aaltosulkeilla rajattu palikka kertoo, missä kohdin musiikkikappaletta seuraava osa tekstiä paljastuu. songNumber on yksinkertaisesti sen nappulan järjestysluku, joka käynnistää ajastuksen ja jonka musiikin tahtiin tekstiä paljastetaan. containerElement on viite sellaiseen palikkaan tekstissä, jonka sisällä paljastettavat palaset ovat.

Itse tekstissä joudut käärimään kaiken haluamasi tekstin elementtiin, johon containerElement viittaa, ja sen sisälle joudut jakamaan tekstin niin moneen pienempään palaseen kuin times-listassa on ajankohtia.

Seuraa konkreettinen esimerkki! Oletetaan, että haluamme ajastaa seuraavan Samuel L. Ipsumin tekstikappaleet musiikin tahtiin.

My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?

The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.

Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.

Käärimme jokaisen kappaleen div-elementtiin (tämä ei ole tarkalleen ottaen tarpeellista, sillä WordPress käärii kunkin kappaleen automaattisesti p-elementin sisään ja timeTextWithMusic-funktiota ei kiinnosta, mitä elementtejä paljastettavat palikat itse asiassa ovat). Sitten käärimme kokonaisuuden vielä yhteen div:iin, jolle annamme id:n ajastus. Ennen tätä wrapper-elementtiä laitamme musiikkisoittimen.

<audio src="https://meri.klaanon.fi/guardian/kuulapsi/musiikki/002_Title+Theme.mp3" />

<div id="ajastus">

<div>

My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?

</div>

<div>

The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.

</div>

<div>

Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.

</div>

</div>

Sen jälkeen asetamme “Sktiptit”-kenttään funktiokutsun

timeTextWithMusic([
    {m: 0, s: 0},
    {m: 0, s: 30},
    {m: 1, s: 6}
], 12, document.getElementById("ajastus"));

Huomaa, että argumentin songNumber arvoksi on laitettu 12, koska seuraava musiikkinappula on kahdestoista nappula tällä sivulla. containerElement-argumentin arvoksi on laitettu document.getElementById("ajastus"), joka viittaa elementtiin, jonka id on ajastus.

Nyt joudumme vielä hieman tyylittelemään: funktio lisää kullekin paljastettavalle palikalle luokan visible, joten haluamme tavalla tai toisella piilottaa ajastus-elementin sisällä olevat div:t silloin, kun niillä ei tätä luokkaa ole. Esimerkiksi seuraava pätkä “Tyylit”-kentässä tekee tempun:

#ajastus > *:not(.visible) {
    opacity: 0.2;
}

#ajastus > * {
    transition: opacity 500ms ease-in-out;
}

(Jälkimmäinen määritelmä tekee paljastamisesta hieman pehmeämmän.)

Tällä saamme seuraavan lopputuloksen:

Käyttäjän asetukset

Käyttäjä voi Profiili-sivun kautta määritellä itselleen asetuksia, mm. äänenvoimakkuuden oletusarvon. Näihin pääsee käsiksi globaalien saveSetting– ja loadSetting-funktioiden kautta. Esimerkiksi käyttäjän äänenvoimakkuuden saa näin:

let volume = window.nuvaGlobal.loadSetting("volume");

Tämä palauttaa numeron välillä 0-100. Oletusarvo on 50.

Voit tallentaa asetuksiin postauksessasi myös omia arvoja! Näin eri ropeosat voivat “kommunikoida” keskenään… jos jostain syystä niin haluat!

Globaalin scopen kanssa työskentely

Tämä luku käsittelee corner casea joka tulee toivottavasti vastaan hyvin harvoin. Jos kaikki tyylijuttusi ovat vain stylesheeteissa ja skriptisi työskentelevät ainoastaan postauksen wrappaavan article-elementin sisällä, ei sinun tarvitse huolehtia tästä.

Yksi iso ero vanhaan sivuun verrattuna on se, että navigaatio toimii dynaamisesti clientin puolella, jos käyttäjällä on JavaScript päällä (ja toivottavasti on). Tästä seuraa sellainen sivuvaikutus, että postauksesta pois navigoitaessa globaaliin namespaceen on mahdollista jäädä roskia. Näin saattaa tapahtua esimerkiksi, jos skripti muokkaa tai luo uusia HTML-elementtejä article-elementin ulkopuolelle (pls no), tai asettaa document– tai window-objekteihin event listenereitä.

Jos viestisi tekee tällaista (ja toivottavasti mahdollisimman harvoin tekee), ne täytyy siivota manuaalisesti. Tämä tapahtuu määrittelemällä postauksen skripteissä siivousfunktio window.nuvaGlobal.onPostDestroy. Seuraavassa esimerkissä skripti asettaa body-elementille luokan ja sitten poisnavigoitaessa poistaa sen.

document.querySelector("body").classList.add("moi-testi-luokka");

window.nuvaGlobal.onPostDestroy = () => {
  document.querySelector("body").classList.remove("moi-testi-luokka");
  console.log("moi sivu tuhottiin");
}

Tämä kyseinen skripti on voimassa tällä Muotoiluopas-sivulla; voit itse nähdä devtoolien kautta sen toiminnassa.

Postausten validaatio

Uusi sivu tarjoaa työkalut postausten virheiden debuggaamiseen. Ensinnäkin yläkulmaan ilmestyy toast ilmoitukseksi, jos jokin sivun skripteistä epäonnistuu. Virhe löytyy tämän jälkeen kehittäjätyökalujen konsolista.

Hyödyllinen uusi työkalu on HTML-validaatio. Se on päällä oletuksena viestien esikatselusivulla, mutta sen voi kytkeä manuaalisesti päälle lisäämällä sivun osoitteen perään ?preview. Tällöin sivu ajaa HTML-validaattorin viestin sisällölle, ja kertoo toastina menikö validaatio läpi vai ei. Jos validaatio ei mene läpi, virheet printataan kehittäjätyökalujen konsoliin.