Blost name

Markdown

Text can be bold, italic, ~~strikethrough~~, and ~~all at the same time~~.

Link to another page.

There should be whitespace between paragraphs¹.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a normal paragraph² following a header.

😭😂🥺🤣❤️✨🙏😍🥰😊

Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.

“Original content is original only for a few seconds before getting old”
Rule #21 of the internet

Item 1
Item 2
- Item 2.1
- Item 2.2
Item 3
Item 4

Perform step #1
Proceed to step #2
Conclude with step #3

Milk
Eggs
Flour
Coffee
Combustible lemons

Character	Show	Quotes
Derpy Hooves	My Little Pony	I just don’t know what went wrong
Gir	Invader ZIM	GUESS WHO MADE WAAAAFFLES?!!
WALL-E	WALL-E	Ooooo 0.0
Taco	Inanimate Insanity	SOUR CREAM!

let highlight = true;

10pre mark {
12  display: block;
13  color: currentcolor;
14}
15pre table td:nth-of-type(1) {
17  color: #6b6b6b;
18  font-style: italic;
19}

Useful information that users should know, even when skimming content.

Helpful advice for doing things better or more easily.

Key information users need to know to achieve their goal.

Urgent info that needs immediate user attention to avoid problems.

Advises about risks or negative outcomes of certain actions.

Shortcodes

Ametrine provides a few useful shortcodes that simplify some tasks. They can be used on all pages.

Alerts

[!NOTE]
Useful information that users should know, even when skimming content.

Useful information that users should know, even when skimming content.

Images and Videos

By default images and videos come with some generic styling, such as rounded corners and shadow. To fine-tune these, you can use shortcodes with different variable combinations.

Available variables are:

url: URL to an image.
url_min: URL to compressed version of an image, original can be opened by clicking on the image.
alt: Alt text, same as if the text were inside square brackets in Markdown.
full: Forces image to be full-width.
start: Float image to the start of paragraph and scale it down.
end: Float image to the end of paragraph and scale it down.
pixels: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.
transparent: Removes rounded corners and shadow, useful for images with transparency.
drop_shadow: Uses drop shadow instead of box shadow, useful for images with transparency.
no_hover: Removes zoom on hover.
spoiler: Blurs image until hovered over/pressed on, useful for plot rich game screenshots.
spoiler with solid: Ditto, but makes the image completely hidden.

{{ image(url="image.png", alt="This is an image", no_hover=true) }}

Portal Gun blueprint — Image with an alt text and without zoom on hover

The gravestone of J.P.G. — Image with compressed version, an alt text, and without zoom on hover

Alternatively, you can append the following URL anchors. It can be more handy in some cases, e.g. such images will render normally in any Markdown editor, opposed to the Zola shortcodes.

#full: Forces image to be full-width.
#start: Float image to the start of paragraph and scale it down.
#end: Float image to the end of paragraph and scale it down.
#pixels: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.
#transparent: Removes rounded corners and shadow, useful for images with transparency.
#drop-shadow: Uses drop shadow instead of box shadow, useful for images with transparency.
#no-hover: Removes zoom on hover.
#spoiler: Blurs image until hovered over/pressed on, useful for plot rich game screenshots.
#spoiler with #solid: Ditto, but makes the image completely hidden.

Toolbx header image — Full-width image with an alt text, pixel-art rendering, drop shadow, and with no rounded corners and zoom on hover

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur.

For videos it’s all the same except for a few differences: no_hover and url_min variables are not available.

Additionally, the following attributes can be set:

autoplay: Start playing the video automatically.
controls: Display video controls such as volume control, seeking and pause/resume.
loop: Play the video again once it ends.
muted: Turn off the audio by default.
playsinline: Prevent the video from playing in fullscreen by default (depends on the browser).

{{ video(url="video.webm", alt="This is a video", controls=true) }}

Duckling preening

CRT

Alright, this one doesn’t simplify anything, it just puts ASCII art into a CRT-like box.

As this element is intended to be purely decorative (e.g. for displaying ASCII art), it is hidden from screen readers unless a label is supplied. Ensure that no vital content is wrapped in it.

{% crt(label = "ASCII illustration of public library halls.") %}
-> ASCII art <-
{% end %}

_____________________________________________
|.'',        Public_Library_Halls         ,''.|
|.'.'',                                 ,''.'.|
|.'.'.'',                             ,''.'.'.|
|.'.'.'.'',                         ,''.'.'.'.|
|.'.'.'.'.|                         |.'.'.'.'.|
|.'.'.'.'.|===;                 ;===|.'.'.'.'.|
|.'.'.'.'.|:::|',             ,'|:::|.'.'.'.'.|
|.'.'.'.'.|---|'.|, _______ ,|.'|---|.'.'.'.'.|
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|,',',',',|---|',|'|???????|'|,'|---|,',',',',|
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|.'.'.'.'.|---|','   /%%%\   ','|---|.'.'.'.'.|
|.'.'.'.'.|===:'    /%%%%%\    ':===|.'.'.'.'.|
|.'.'.'.'.|%%%%%%%%%%%%%%%%%%%%%%%%%|.'.'.'.'.|
|.'.'.'.','       /%%%%%%%%%\       ','.'.'.'.|
|.'.'.','        /%%%%%%%%%%%\        ','.'.'.|
|.'.','         /%%%%%%%%%%%%%\         ','.'.|
|.','          /%%%%%%%%%%%%%%%\          ','.|
|;____________/%%%%%Spicer%%%%%%\____________;|

Alternatively, if you have syntax highlighting enabled and you need to preserve whitespace, you can use a code block with crt=true added right after three backticks.

The downside of this approach is that it will keep the ASCII art accessible to screen readers, which is bad for accessebility. Whitespace issue should hopefully be fixed with the release of Zola 0.23.0. See #116.

```crt=true
  /\
 /  \
/____\
```

  /\
 /  \
/____\

Sticker

Use any custom sticker from Mastodon. Uses the instance set in the [extra.fediverse] section of page/section front-matter or config.toml, otherwise falls back to mastodon.social.

Available variables are:

name: Name of the sticker.
path: Path or filename of the local, colocated sticker.
big: Makes the sticker bigger.

{{ sticker(name="neofax_floof_explode", path="/wmoji/neofax_floof_explode.webp") }}

Hello there, I’m an inline custom sticker.

{{ sticker(name="neofox_googly_shocked", path="/emoji/neofax_floof_explode.webp", big=true) }}

Audio

Places a useless audio button with a funny hover animation. Needs extra.audio_button to be enabled on page, section, or config level for it to work.

{{ audio(name="Party!", url="party-horn.mp3") }}

Hi everyone! You know what I like doing? That’s right, throwing ! Actually I don’t I just wanted to show off audio button.

YouTube

Allows to embed a YouTube video using youtube-nocookie.

Available variables are:

autoplay: Whether the video should autoplay.
start: On which second video should start.

{{ youtube(id="0Da8ZhKcNKQ") }}

Vimeo

Allows to embed a Vimeo video.

Available variables are:

autoplay: Whether the video should autoplay.

{{ vimeo(id="869483483") }}

Mastodon

Allows to embed a Mastodon post.

Available variables are:

host: The instance on which the post resides. If not set, it will fallback to the one set in the [extra.fediverse] section of page/section front-matter or config.toml.
user: The poster. If not set, it will fallback to the one set in the [extra.fediverse] section of page/section front-matter or config.toml.
id: The ID of the post, located at the end of the post URL.

{{ mastodon(host="vmst.io", user="daudix", id="113375516179365586") }}

Description List

<dl>
<dt>Something</dt>
<dd>And its description</dd>
</dl>

Name: Godzilla
Born: 1952
Birthplace: Japan
Color: Green

Form Input

<input type="checkbox" />
<label>Checkbox</label>

Milk
Eggs
Flour
Coffee
Combustible lemons

With switch class:

<input class="switch" type="checkbox" />
<label>Checkbox</label>

Milk
Eggs
Flour
Coffee
Combustible lemons

With switch and big classes:

<input class="switch big" type="checkbox" />
<label>Checkbox</label>

Milk
Eggs
Flour
Coffee
Combustible lemons

With radio type:

<input type="radio" name="test" />
<label>Radio</label>

Milk
Eggs
Flour
Coffee
Combustible lemons

With color type:

<label>Color:</label>
<input type="color" value="#000000" />

Color:

Disabled:

With range type:

<input type="range" max="100" value="33">

Figure Captions

<figure>
  -> Whatever content <-
  <figcaption>Caption of content above</figcaption>
</figure>

The Office where Stanley works, it has yellow floor and beige walls

Accordion

<details>
  <summary>Accordion title</summary>
  -> Contents here <-
</details>

Reveal accordion

Get it? I know, it’s an awful pun.

Side Comment

<small>Small, cute text that doesn't catch attention.</small>

Small, cute text that doesn’t catch attention.

Abbreviation

<abbr title="American Standard Code for Information Interchange">ASCII</abbr>

The ASCII art is awesome!

Aside

<aside>

-> Contents here <-
</aside>

A quill is a writing tool made from a moulted flight feather (preferably a primary wing-feather) of a large bird. Quills were used for writing with ink before the invention of the dip pen, the metal-nibbed pen, the fountain pen, and, eventually, the ballpoint pen.

As with the earlier reed pen (and later dip pen), a quill has no internal ink reservoir and therefore needs to periodically be dipped into an inkwell during writing. The hand-cut goose quill is rarely used as a calligraphy tool anymore because many papers are now derived from wood pulp and would quickly wear a quill down. However it is still the tool of choice for a few scribes who have noted that quills provide an unmatched sharp stroke as well as greater flexibility than a steel pen.

Keyboard Input

<kbd>⌘ Command</kbd>.

To switch the keyboard layout, press ⌘ Super + Space.

Mark Text

<mark>Marked text</mark>

You know what? I’m gonna say some very important stuff, so important that even bold is not enough.

Deleted and Inserted Text

<del>Something deleted</del> <ins>Something added</ins>

~~Text deleted~~ Text added

Progress Indicator

<progress></progress>
<progress value="33" max="100"></progress>

Sample Output

<samp>Sample Output</samp>

Sample Output

Inline Quotation

<q>Someone said something</q>

Blah blah Inline Quote hmm.

Unarticulated Annotation

<u>Gmarrar mitsakes</u>

Yeet the sus drip while vibing with the TikTok fam on a cap-free boomerang.

Titles

<strong class="title">Title-Looking Text</strong>

Title-Looking Text

External Links

<a class="external" href="https://example.org">External link</a>

Link to site

Spoilers

<span class="spoiler">Some spoiler</span>

You know, Ametrines are very pretty. I know, crazy.

With solid class:

<span class="spoiler solid">Some spoiler</span>

You know, Ametrines are very pretty. I know, crazy.

Buttons

<div class="buttons">
  <a href="#top">Go to Top</a>
  <a class="suggested external" href="https://example.org">Example</a>
</div>

Go to Top Example

With centered and big classes:

<div class="buttons centered big">
  <button class="suggested">Do Something…</button>
</div>

Standalone:

<button class="suggested">Do Something…</button>
<a class="button external" href="https://example.org">Example</a>

Example

Disabled:

<button disabled class="suggested">Do Something…</button>
<a aria-disabled="true" class="button external" href="https://example.org">Example</a>

Example

Accent Color

For demo purposes only, usually it should be changed from the config file.

hsl(, , )

Footnote ↩
Footnote (link) ↩