# Test · Callouts
---
## All Types · Open
> [!note]
> **Note**: General information. Each checkbox type has its own icon. Eight color slots, ten checkboxes. [Κ] and [Σ] share pink, which is a perfectly acceptable compromise.
> [!tip]
> **Tip**: Navigate by Quick Switcher and backlinks, not the file explorer. The explorer is for people who know where they put things.
> [!info]
> **Info**: #Egg means just wrote it down. #Dragon means proficient. #Greatwyrm means you can explain it to anyone and they will understand.
> [!success]
> **Success**: Build passed. `publish.css` pushed. No em dashes found.
> [!warning]
> **Warning**: Do not assume your relatives keep house the same way you do. Learned the hard way. Documented in [[Lessons on traveling]].
> [!danger]
> **Danger**: The chest section of the corrosive damage tattoo. Three hours minimum. Know your limits before you book.
> [!failure]
> **Failure**: Ran the build from inside `custom/index.scss` instead of `publish.scss`. Wrong file, wrong output, wrong everything.
> [!bug]
> **Bug**: The serpent was rendering on H6 instead of H1. Fixed in `_headings.ts`. The H6 moon background also needed a cleanup pass.
> [!question]
> **Question**: Τι ημέρα είναι σήμερα; What day is it today? A1-level checkpoint. Sofia would approve.
> [!abstract]
> **Abstract**: Seven tattoo elements, one limb at a time. The tattoo is the magic being cast at the cost of organic material. Progress tracked in [[Becoming the battle mage]].
> [!example]
> **Example**: A note about corrosive damage starts as #Egg (just wrote it down). After the tattoo sessions are logged: #Hatchling. After the Appendix N effect is fully written: #Dragon.
> [!quote]
> _"There are a lot of un-beautiful setups in use that you don't see because 'some headings and paragraphs in the default theme' isn't an exciting thing to share."_
>
> -- CawlinTeffid, Obsidian Discord
---
## All Types · Collapsed
> [!note]-
> Collapsed note. Click to expand.
> [!tip]-
> Collapsed tip. Contains a helpful suggestion inside.
> [!info]-
> Collapsed info block.
> [!success]-
> Collapsed success. Build complete, no errors.
> [!warning]-
> Collapsed warning. Important caution. Expand to read.
> [!danger]-
> Collapsed danger. High-severity alert. Expand immediately.
> [!failure]-
> Collapsed failure notice.
> [!bug]-
> Collapsed bug report. Expand for reproduction steps.
> [!question]-
> Collapsed open question. Expand to see the full inquiry.
> [!abstract]-
> Collapsed abstract / TL;DR.
> [!example]-
> Collapsed example. Click to reveal.
> [!quote]-
> Collapsed quotation.
---
## Rich Content Inside Callouts
> [!info] Callout with a Custom Title
> This callout has a **custom title** replacing the default type label.
>
> It also has multiple paragraphs of content, _italic text_, and `inline code`.
> [!note] The Zettelkasten Levels
> Dragon lifecycle tags, from first draft to mastery:
>
> 1. #Egg: Just wrote it down. All notes start here.
> 2. #Hatchling: Reviewed a few times.
> 3. #Whelpling: Got the basics, can add to it.
> 4. #Drakeling: Can continue to add, but a lot of it is wrong and ugly.
> 5. #Drake: Getting more right, need less rechecking, and more brief.
> 6. #Dragon: Proficient, rarely needs to review.
> 7. #Greatwyrm: Can explain to anyone and they will understand.
> [!example] Callout with a Code Block
> Serpent catch scheduler from `publish.ts`:
>
> ```typescript
> function _scheduleCatch(h1: HTMLElement, serpent: HTMLElement): void {
> if (_catchScheduled || _shipCaught) return;
> _catchScheduled = true;
> // Fires 1–3 hours after the serpent first surfaces
> const delayMs = 3_600_000 + Math.random() * 7_200_000;
> setTimeout(() => {
> if (_shipCaught) return;
> const target = document.contains(h1) ? h1
> : document.querySelector<HTMLElement>('.markdown-rendered h1');
> const s = target?.querySelector<HTMLElement>('.td-serpent') ?? serpent;
> if (target && s) _triggerCatch(target, s);
> }, delayMs);
> }
> ```
> [!tip] Callout with a Table
> | Tag | Definition |
> | :--- | :--- |
> | #Egg | Just wrote it down |
> | #Dragon | Proficient, rarely needs to review |
> | #Greatwyrm | Can explain to anyone and they will understand |
---
## Collapsed with Rich Content
> [!example]- Collapsed Callout with Code Block
> Full vault em-dash scanner in Python. Expand to verify syntax highlighting and no content bleed.
>
> ```python
> from __future__ import annotations
> from dataclasses import dataclass, field
> from pathlib import Path
> from typing import Iterator
>
> EM_DASH: str = '\u2014'
>
>
> @dataclass
> class VaultScanner:
> root: Path
> skip_folders: list[str] = field(
> default_factory=lambda: ["⚙️ Αρχείο", "Συνημμένα"]
> )
>
> def notes(self) -> Iterator[Path]:
> for p in self.root.rglob("*.md"):
> if any(folder in str(p) for folder in self.skip_folders):
> continue
> yield p
>
> def find_em_dashes(self) -> Iterator[tuple[Path, int, str]]:
> for note_path in self.notes():
> for lineno, line in enumerate(
> note_path.read_text(encoding="utf-8").splitlines(), 1
> ):
> if EM_DASH in line:
> yield note_path, lineno, line.strip()
>
>
> vault = VaultScanner(root=Path.home() / "Vaults" / "Tenebrous-dragon")
>
> for path, lineno, line in vault.find_em_dashes():
> print(f"{path.relative_to(vault.root)}:{lineno}: {line}")
> ```
> [!abstract]- Collapsed Callout with Table
> Full Zettelkasten level reference. Expand to verify alignment, borders, and no layout bleed.
>
> | Level Tag | Definition |
> | :--- | :--- |
> | #Egg | Just wrote it down. All zettels start here. |
> | #Hatchling | Reviewed a few times. |
> | #Whelpling | Got the basics and can add to it. |
> | #Drakeling | Can continue to add, but a lot of it is wrong and ugly. |
> | #Drake | Getting more right, need less rechecking, and more brief. |
> | #Dragon | Proficient, rarely needs to review as understands the concept. |
> | #Greatwyrm | Can explain to anyone, and they will understand. |
---
## Nested Callouts
> [!warning] Outer Warning
> This is the outer callout. It contains a nested callout below.
>
> > [!danger] Inner Danger (nested)
> > This nested danger callout sits inside the warning. The visual indentation and color should distinguish the two levels.
> >
> > > [!note] Triple-nested Note
> > > Three levels deep. Background and border should still be legible.
> [!abstract]- Collapsed Outer with Open Inner
> The outer callout is collapsed by default. When expanded, the inner callout is already open.
>
> > [!info] Inner Info (always open)
> > This info block is visible once the outer abstract is expanded.
---
## Callouts with Task Lists
> [!note] Pre-publish Checklist
> - [x] Run sass build from vault root, not from inside `custom/index.scss`
> - [x] Check for em dashes in any edited files
> - [ ] Push `publish.css`
> - [ ] Push all `publish: true` notes that were edited
> - [Β] Fix whatever just broke
> - [Φ] Appreciate the wave underlines