` tags. According the to spec, `
` tags cannot have a block element inside them. When you _try_ to put a block element, such as `
`, the browser will automatically close the `
` tag, breaking the rest of the page. So, even though conceptually (and visually) the content of the sidenote is a block, {{< sidenote "right" "markdown-note" "it has to be inside an inline element." >}} There's another consequence to this. Hugo implements Markdown inside shortcodes by rendering the "inner" part of the shortcode, substituting the result into the shortcode's definition, and then finally placing that into the final output. Since the Markdown renderer wraps text in paragraphs, which are block elements, the inside of the shortcode ends up with block elements. The same tag-closing issue manifests, and the view ends up broken. So, Markdown cannot be used inside sidenotes. {{< /sidenote >}} That's not too bad, overall. We end up with a shortcode definition as follows: ```HTML {{ .Inner }} ``` As Koos points out, "label" works as a semantic tag for the text that references the sidenote. It also helps us with the checkbox ``, which we will examine later. Since it will receive its own style, the inner content of the sidenote is wrapped in another ``. Let's get started on styling the parts of a sidenote, beginning with the content: ```SCSS .sidenote-content { display: block; position: absolute; width: $sidenote-width; box-sizing: border-box; margin-top: -1.5em; &.sidenote-right { right: 0; margin-right: -($sidenote-width + $sidenote-offset); } // ... } ``` As you can see from the sidenotes on this page, they are displayed as a block. We start with that, then switch the sidenotes to be positioned absolutely, so that we can place them exactly to the right of the content, and then some. We also make sure that the box is sized __exactly__ the amount in `$sidenote-width`, by ensuring that the border and padding are included in the size calculation using `border-box`. We also hide the checkbox: ```SCSS .sidenote-checkbox { display: none; } ``` Finally, let's make one more adjustment to the sidenote and its label: when you hover over one of them, the other will change its appearence slightly, so that you can tell which note refers to which label. We can do so by detecting hover of the parent element: ```SCSS .sidenote { &:hover { .sidenote-label { /* style for the label */ } .sidenote-content { /* style for the sidenote */ } } } ``` ### Hiding and Showing So far, it's hard to imagine where JavaScript would come in. If you were always looking at the page from a wide-screen machine, it wouldn't at all. Unfortunately phones don't leave a lot of room for margins and sidenotes, so to make sure that these notes are visible to mobile users, we want to show them inline. Since the entire idea of sidenotes is to present more information __without__ interrupting the main text, we don't want to plop something down in the middle of the screen by default. So we hide sidenotes, and show them only when their label is clicked. Gwern's site doesn't show the notes on mobile at all (when simulated using Firefox's responsive design mode), and Koos uses JavaScript to toggle the sidenote text. We will go another route. This is where the checkbox `` comes in. When the `` checkbox is checked, we show the sidenote text, as a block, in the middle of the page. When it is not checked, we keep it hidden. Of course, keeping a checkbox in the middle of the page is not pretty, so we keep it hidden. Rather than clicking the checkbox directly, {{< sidenote "right" "accessibility-note" "the users can click the text that refers to the sidenote," >}} I'm not sure about the accessibility of such an arrangement. The label is semantic, sure, but the checkbox is more sketchy. Take this design with a grain of salt. {{< /sidenote >}} which happens to also be a label for the checkbox input. Clicking the label toggles the checkbox, and with it the display of the sidenote. We can use the following CSS to get that to work: ```SCSS .sidenote-content { // ... @media screen and (max-width: $container-width + 2 * ($sidenote-width + 2 * $sidenote-offset)) { position: static; margin-top: 10px; margin-bottom: 10px; width: 100%; display: none; .sidenote-checkbox:checked ~ & { display: block; } &.sidenote-right { margin-right: 0px; } // ... } // ... } ``` We put the position back to `static`, and add margins on the top and bottom of the node. We keep the `display` to `none`, unless the checkbox contained in the sidenote span is checked. Finally, we reset the margin we created earlier, since we're not moving this note anywhere. ### Conclusion Here, we've implemented sidenotes in Hugo with zero JavaScript. They work well on both mobile and desktop devices, though their accessibility is, at present, somewhat uncertain.