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.

“Make it simple, but significant.”

my own design philosophy

• Item 1
• Item 2
  • Item 2.1
  • Item 2.2
• Item 3
• Item 4

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

• Ship AutoSauce V2
• Publish nest post
• Rewrite homepage
• Sleep
• Drink coffee

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.

extra

KaTeX

i can render LaTeX with the KaTeX library, enabled by the extra.katex config variable.

$$\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$

$$\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi),e^{2 \pi i \xi x},d\xi$$

shortcodes

i have a few useful shortcodes that simplify some tasks, usable on any page.

alerts

github-style alerts. wrap the alert text inside the shortcode to get the look.

available alert types:

• note: useful information that users should know, even when skimming content.
• tip: helpful advice for doing things better or more easily.
• important: key information users need to know to achieve their goal.
• warning: urgent info that needs immediate user attention to avoid problems.
• caution: advises about risks or negative outcomes of certain actions.

{% alert(note=true) %}
-> Alert text <-
{% end %}

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.

images and videos

by default, images and videos come with generic styling, like rounded corners and shadow. to fine-tune that, use shortcodes with different variable combinations.

available variables:

• url: url to an image.
• url_min: url to a compressed version, the original opens by clicking the image.
• alt: alt text, same as text inside square brackets in markdown.
• full: forces the image to full-width.
• full_bleed: forces the image to fill all available screen width. removes shadow, rounded corners and zoom on hover.
• start: floats the image to the start of the paragraph and scales it down.
• end: floats the image to the end of the paragraph and scales it down.
• pixels: nearest neighbor scaling, keeps pixel-art sharp.
• transparent: removes rounded corners and shadow, useful for images with transparency.
• no_hover: removes zoom on hover.
• spoiler: blurs the image until hovered/pressed, useful for plot rich game screenshots.
• spoiler with solid: ditto, but hides the image completely.

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

alternatively, you can append the following URL anchors. handier in some cases, e.g. these render normally in any markdown editor, unlike the Zola shortcodes.

• #full: forces the image to full-width.
• #full-bleed: forces the image to fill all available screen width. removes shadow, rounded corners and zoom on hover.
• #start: floats the image to the start of the paragraph and scales it down.
• #end: floats the image to the end of the paragraph and scales it down.
• #pixels: nearest neighbor scaling, keeps pixel-art sharp.
• #transparent: removes rounded corners and shadow, useful for images with transparency.
• #no-hover: removes zoom on hover.
• #spoiler: blurs the image until hovered/pressed, useful for plot rich game screenshots.
• #spoiler with #solid: ditto, but hides the image completely.

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, with a few differences: the no_hover and url_min variables aren’t available.

you can also set the following attributes:

• autoplay: start playing the video automatically.
• controls: show video controls like volume, seeking and pause/resume.
• loop: play the video again once it ends.
• muted: turn off audio by default.
• playsinline: prevent the video from playing fullscreen by default (depends on the browser).

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

CRT

this one doesn’t simplify anything, it just adds a CRT-like effect around markdown code blocks.

{% crt() %}
-> Markdown code block <-
{% end %}

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

there’s also a cursor class you can add to a span with e.g. the █ character to simulate the terminal cursor. it doesn’t work inside markdown code blocks though.

YouTube

embeds a YouTube video using youtube-nocookie.

available variables:

• autoplay: whether the video should autoplay.
• start: which second the video starts on.

{{/* youtube(id="0Da8ZhKcNKQ") */%}}

Vimeo

embeds a Vimeo video.

available variables:

• autoplay: whether the video should autoplay.

{{/* vimeo(id="869483483") */%}}

Mastodon

embeds a Mastodon post.

available variables:

• host: the instance the post lives on. if not set, falls back to the one in the [extra.comments] section of config.toml.
• user: the poster. if not set, falls back to the one in the [extra.comments] section of config.toml.
• id: the post id, usually at the end of the URL.

{{/* mastodon(host="toot.community", user="sungsphinx", id="111789185826519979") */%}}

description list (<dl>)

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

Name

Brenner Cruvinel

Role

AI Researcher / Product Designer

Location

Brazil

Philosophy

Make it simple, but significant.

form input (<input>)

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

•  Ship AutoSauce
•  Finish PrettyEyes
•  Write more posts
•  Rewrite homepage
•  Invent cold fusion

with the switch class:

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

•  Dark mode
•  Reading time

figure captions (<figcaption>)

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

accordion (<details>)

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

side comment (<small>)

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

Small, cute text that doesn’t catch attention.

abbreviation (<abbr>)

<abbr title="Artificial Intelligence">AI</abbr>

the AI tools are getting better every day.

aside (<aside>)

<aside>

-> Contents here <-
</aside>

AI researcher and product designer working at the intersection of computer science and mental health.

keyboard input (<kbd>)

<kbd>⌘ Command</kbd>.

to open the command palette, press ⌘ Command + Shift + P.

mark text (<mark>)

<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> and <ins>)

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

Old homepage New homepage based on GitHub

progress indicator (<progress>)

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

sample output (<samp>)

<samp>Sample Output</samp>

Sample Output

inline quotation (<q>)

<q>Someone said something</q>

blah blah make it simple, but significant hmm.

unarticulated annotation (<u>)

<u>Gmarrar mitsakes</u>

Build the thing that matters.

external links

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

GitHub profile

spoilers

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

you know, the best code is the code you don’t have to write. i know, crazy.

with the solid class:

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

you know, the best code is the code you don’t have to write. i know, crazy.

buttons dialog

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

with the centered and big classes:

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