Layout Tags

Every custom Markdown syntax this site's Jekyll plugins support, reverse-engineered directly from _plugins/. Each tag below goes at the start of its own line, followed by your content on the same line.

Image layout tags

From _plugins/blot_layout_tags.rb. These only bleed into the margin correctly inside .container--entry — Writing entries and Work case studies. On photo albums or plain pages the reserved margin column doesn't exist, so margin/wide tags will overflow instead of bleeding cleanly. On narrow screens (portrait, or under 1060px), margin/wide/inside tags collapse to full-width and column tags reduce their column count.

{<>}

Full bleed. Spans the text column plus the reserved right margin — breaks out of the normal reading width entirely.

{<<}

Full bleed, left variant. Currently renders identically to {<>} — no left-aligned distinction exists in the CSS yet, despite the class name.

{>>}

Full bleed, right variant. Also currently renders identically to {<>}, same as the left variant above.

{>|}

Right margin. Floats the content out into the reserved right-hand margin column, outside the normal text width — the classic Tufte-style sidenote placement.

{>}

Right inside. Floats right at 40% width but stays inside the text column — text wraps around it on the left. Doesn't bleed into the margin.

{<}

Left inside. Floats left at 40% width, staying inside the text column — text wraps around it on the right.

{||}

Two-column grid. Tag each image with {||} on its own line — one image per line, same as every other image on this site — separated by a blank line. Consecutive {||} lines merge automatically into one shared row, however many blank lines sit between them:

{||} ![](one.jpg) {||} ![](two.jpg)

A tag change, or any real (non-blank) content, ends the row — so a third image needs its own {||} pair, not a third line tacked onto this one.

{|||}

Three-column grid — same multi-line, blank-line-separated pattern as {||} above, just three {|||} lines instead of two.

{||||}

Four-column grid — same pattern again, four {||||} lines.

{slider}

Swipeable Glide.js carousel. Same multi-line, blank-line-separated pattern as the column tags above — one image per {slider} line:

{slider} ![](one.jpg) {slider} ![](two.jpg)

No minimum image count — even two tagged lines produce a working slider. Replaces the old behavior where 3+ consecutive untagged images in a paragraph were auto-detected as a slider; that heuristic is gone, so tagging is now the only way to get one.

Legacy

Old Blot posts used a genuine two-sided left/right margin system. This site's Tufte-style layout only has a right-hand margin column, so this tag was mapped to the same right-margin CSS purely for backwards compatibility with migrated posts — it isn't meaningful as a distinct "left margin" anymore. Don't use it for new content; use {>|} instead.

{|<}

Deprecated alias of {>|}. Renders identically (right margin) — kept only so old migrated posts still work.

Footnote & margin content

Link-preview card — from _plugins/card_notes.rb. Requires card_notes: true in frontmatter (currently only the About page uses it), and the same .container--entry margin column as the image layout tags above. Define it once as a footnote, reference it inline like a normal footnote:

[^label]: {card} [Title](https://example.com) "/path/to/image.jpg"

Referenced inline as [^label]. Renders a right-margin card (image + linked title) beside the paragraph that references it.

Inline footnote shorthand — from _plugins/convert_inline_footnotes.rb. Works everywhere, no frontmatter flag needed. Write the footnote text right where you reference it, instead of defining it separately at the bottom:

Some claim^[This becomes a footnote automatically.]

Auto-embed

From _plugins/auto_embed.rb. A bare URL alone on its own line (nothing else on that line) auto-converts to an embed. Only activates on layout: post (Writing entries) and layout: block (Idea Board blocks) — not photo albums, Work case studies, or pages.

YouTube

https://www.youtube.com/watch?v=dQw4w9WgXcQ

Bluesky

https://bsky.app/profile/example.bsky.social/post/abc123

X / Twitter

https://x.com/example/status/1234567890123456789