Tämä juttu toimii sisältöesimerkkinä: näytetään otsikkotasot, typografia, listat, linkit, kuvat (uusi img-shortcode) sekä sivuston koko väripaletti. Myös pieniä lisäelementtejä, kuten korostetut lainaukset ja koodiblokit, on mukana.
Otsikkotasot ja typografia
Tässä kappaleessa käytetään tekstihierarkiaa ja fonttipinoa.
Fontit
Pääfonttipino on Space Grotesk, Fira Sans, IBM Plex Sans, Segoe UI, system-ui, -apple-system, sans-serif. Seuraava tekstipari havainnollistaa eroja:
- Leipäteksti: käyttää
var(--muted)-sävyä ja 1.7 riviväliä, jotta kappaleet ovat helposti luettavia. - Otsikot:
font-weight: 700, kirjainten väliä kevyesti tiivistetty.
H4-esimerkki
H4-taso toimii mikro-otsikkona, jolla voi nimetä pieniä osioita.
“Hyvä sisältö on rakennettu kuin hyvä resepti: aineksia on sopivasti ja niille on oikea järjestys.”
Värit
Alla taulukko sivuston väreistä (nimi, hex ja esikatselu). Näitä käytetään taustaan, typografiaan ja korostuksiin.
| Nimi | Hex | Näyte |
|---|---|---|
| Dark charcoal | #0e111a | Päätausta |
| Navy tint | #11182a | Liukuväri/paneelit |
| Card night | #101726 | Korttien tausta |
| Outline blue-gray | #1f2a3d | Rajaukset |
| Ice white | #eef2ff | Teksti |
| Steel blue | #9fb3d3 | Leipäteksti |
| Sunset orange | #ff8a3d | CTA/linkit |
| Mint teal | #45d6c5 | Eyebrow-korostus |
Listat ja linkit
- Lista tukee korostuksia, kursiivia ja lihavoituja sanoja.
- Ulkoinen linkki: Linkki GitHubiin (aukeaa normaalisti).
- Sisäinen linkki: Evästeet.
Numeroitu lista:
- Ensimmäinen vaihe: otsikko ja johdanto.
- Toinen vaihe: korostukset, lainaukset ja listat.
- Kolmas vaihe: kuvat ja tekniset asetukset.
Kuvat ja shortcode
Kuva ladataan sivun resurssina ja käsitellään Hugo Pipes -ketjussa (WebP + fallback, sizes-attribuutti). Alt-teksti on pakollinen:
{{< img src="demo.png" alt="Gradienttikuva, jossa sekoittuu taustan tummuus ja korostevärit" sizes="(min-width: 960px) 60vw, 100vw" maxWidth="1200" quality="82" >}}
Toinen esimerkki samasta kuvasta pienemmällä maksimileveydellä ja omalla CSS-luokalla, jos haluat rajata tilaa kortin sisällä:
{{< img src="demo.png" alt="Pienennetty versio gradienttikuvasta" maxWidth="720" sizes="(min-width: 720px) 50vw, 90vw" class="card" >}}
Ulkoiset kuvat (R2 + manifest)
Klikkaa mitä tahansa kuvaa avataksesi suurimman version modaalissa. Nämä käyttävät data/external-media.json -manifestia ja noutavat optimoinnit static2.nohittomiksei.fi/optimized/ -polusta.
Täysleveä:
{{< externalimg server="static2" name="reiska" alt="Sinitaivaan alla polulla kävelevä Reiska metsän laidassa" layout="full" title="Reiska polulla" description="Täysleveä ulkoinen kuva, joka venyy koko sisältöalueen leveydelle ja aukeaa 1920px versiona modaalissa." >}}
Keskelle pakattu puolikas leveys:
Kuva vasemmalla, teksti oikealla:
Kuva oikealla, teksti vasemmalla:
Linkbox ja quote -shortcodet
Esimerkkilainaus omalla korostuksellaan:
Hyvä sisältö on rakennettu kuin hyvä resepti: aineksia on sopivasti ja niille on oikea järjestys.
CTA-kortti linkkaamaan toiseen sivuun:
Linkbox-demoTutustu meihin
Avaa esittelyTiivis näkymä kokemukseen ja teknologioihin, painike vie esittelyyn.
Google Photos -linkit
CTA ulkoisiin Google Photos -linkkeihin (kuva ja albumi):
Muita elementtejä
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Hyvä sisältö on rakennettu kuin hyvä resepti: aineksia on sopivasti ja niille on oikea järjestys | Value 2 | Hyvä sisältö on rakennettu kuin hyvä resepti: aineksia on sopivasti ja niille on oikea järjestys3 |
Koodiblokki:
hugo server -D
Painikkeeksi stailattu linkki toimii kuten tavallinen linkki, mutta käyttää btn-luokkia (voit lisätä luokan markdownin HTML-blokissa):