Table of Contents

This guide demonstrates how to use the shortcodes and other visual elements available.

Divider Shortcode

The divider shortcode creates decorative separators with various moon-themed designs.

Code:

• Default: {{ divider() }}
• Line: {{ divider(style="line") }}
• New Moon: {{ divider(style="new_moon") }}
• Simple: {{ divider(style="simple") }}
• Quarter: {{ divider(style="quarter") }}
• Ornate: {{ divider(style="ornate") }}

Divider Styles

Default/moon phases divider:

Line/stars divider:

New moon divider:

Simple/crescent moon divider:

Quarter moon divider:

Ornate/full moon divider:

Working with OG Emoji

The theme includes a special vintage emoji font. To use it, wrap emojis in <span class="og"> tags:

Code:

<span class="og">📷</span> This text has a vintage camera emoji

Output: A vintage-styled camera emoji followed by regular text

For a complete list of emojis that work with the og class, see the Emoji Table.

Setting Moon Phases in Content

To indicate a note's development stage, add moon phase information to the frontmatter:

+++
title = "My Note Title"
date = "2025-05-01"
[extra]
moon_phase = "waxing_crescent"
+++

Valid moon phase values:

• new (🌑)
• waxing_crescent (🌙)
• first_quarter (🌓)
• waxing_gibbous (🌔)
• full (🌕)

Adding Related Notes

To display related notes at the bottom of a page, add this to the frontmatter:

[extra]
related_notes_links = [
  {
    "url": "/notes/example/",
    "title": "Example Note",
    "description": "Description of the related note",
    "moon_phase": "waxing_crescent"
  },
  {
    "url": "/notes/another-example/",
    "title": "Another Example",
    "description": "Description of another related note",
    "moon_phase": "full"
  }
]

This will automatically generate a "Related Notes" section with links and descriptions.

Adding a TL;DR Summary

To add a summary box at the top of your content:

[extra]
tldr = "A brief summary of this note's content."

This will create a highlighted summary box below the title.

HTML Snippets

While not shortcodes, use these HTML snippets for consistent formatting:

Callouts

Callouts are styled boxes for highlighting important information.

Available styles:

Image Formatting

Use the following HTML snippets to format images with captions and pixel corners.

Centered Image with Caption

<figure class="center">
  <div class="pixel-corners--wrapper">
    <img src="/path/to/image.jpg" alt="Description" width="450px">
  </div>
  <figcaption>Caption text</figcaption>
</figure>

Floating Right Image

<figure class="float-right">
  <div class="pixel-corners--wrapper">
    <img src="/path/to/image.jpg" alt="Description" width="450px">
  </div>
  <figcaption>Caption text</figcaption>
</figure>

Floating Left Image

<figure class="float-left">
  <div class="pixel-corners--wrapper">
    <img src="/path/to/image.jpg" alt="Description" width="450px">
  </div>
  <figcaption>Caption text</figcaption>
</figure>

Pixel Corners (without figure)

<div class="pixel-corners--wrapper">
  <img src="/path/to/image.jpg" alt="Description" width="100%">
</div>