Marginal Note

A marginal note contains additional important but nonessential information. It explains some context, sheds light on a detail or speculates on a given topic etc.

A marginal note should accompany the main text without interrupting it. If the view-port is big enough, it’s placed in the right margin. On mobile view-ports it appears in a box of limited height.

Syntax

The marginal note follows after the content block it belongs to and this is the usual layout order on mobile view-ports. But the note will also be placed besides the next block on large view-ports and that is usually not intended.

To let it float besides the block before, we need to change the layout of this block with the attribute .inline to make room in the right margin.

Longer Paragraph …
{.inline}

{{< mnote >}}
**Public junk dwarves** hug my quartz fox. Zack Gappow saved the job requirement
list for the six boys. Bored? Craving a pub quiz fix? Why, just come to the
Royal Oak! Cozy sphinx waves quart jug of bad milk. Quads of blowzy fjord 
ignite map vex’d chicks.
{{< /mnote >}}

The shortcode is called mnote and needs an opening and closing tag around the note. The note can contain only inline styling and no headings etc.

The shortcode has four named parameters:

star
Number of stars to show at the beginning of the note. 1 or 2 are possible.
dagger
Kind of dagger to show at the beginning of the note. 1 or 2 crossings are possible.
up
Number of units (1rem) to push the note up. The default line height for this theme is three units. We can move the note up in case we can’t use {.inline}.
down
Number of units (1rem) to push the note down. This is the way to make room for absolute positionend layout elements (like the featured image) in the margin before the current note.

Optional stars or daggers should be matched by similar signs in the main text. They are used to reference notes which can’t be placed in the vincinity of the text they are referring to because other layout elements got in the way.

A star is the usual asterisk * on the keyboard. A dagger † corresponds to the entity &dagger; and a double dagger ‡ to &Dagger;.

Layout

The theme distinguishes between short and long marginal notes. On screens with a right margin, their layout is identical. On smaller ones, the long notes are partly hidden and can be expanded.

Short Note

Pack my red box with five dozen quality jugs. Watch “Jeopardy!”, Alex Trebek’s fun TV quiz game. Waltz, bad nymph, for quick jigs vex!* Grumpy wizards make a toxic brew for the jovial queen. Big dwarves heckle my top quiz of jinx. Vex quest wizard, judge my backflop hand. DJs flock by when MTV ax quiz prog. Bobby Klun awarded Jayme sixth place for her very high quiz.

Long Note

Quizzical twins proved my hijack-bug fix. Hick dwarves jam blitzing foxy quip. Cute, kind, jovial, foxy physique, amazing beauty? Wowser! Quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. Battle of Thermopylae: Quick javelin grazed wry Xerxes. Sex prof gives back no quiz with mild joy.† A very big box sailed up then whizzed quickly from Japan. Vexed nymphs go for quick waltz job. Woven silk pyjamas exchanged for blue quartz. The wizard quickly jinxed the gnomes before they vaporized. “Who am taking the ebonics quiz?”, the prof jovially axed. Heavy boxes perform quick waltzes and jigs. When zombies arrive, quickly fax judge Pat. Fix problem quickly with galvanized jets. Zelda might fix the job growth plans very quickly on Monday.

See Also