# Asides

All [`<aside>`][aside] elements in MDX are rendered on the right side of the
paragraph before them on wide screens.

[aside]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside

I've stolen the idea, obviously. The main inspiration was the side note rendered
in a second column on [Paco Coursey's website][paco].

<aside>The [MDN example][aside] of `aside` presents a similar idea.</aside>

[paco]: https://paco.me/writing/redesign-2021

![](/asides/sidenote-1.png)

Paco has used `position: absolute` in his implementation, and that's very
elegant and simple, but it has one tiny problem. On narrow screens, you end up
with the sidenote _above_ the content, and in a left-to-right language, we'd
expect what's on _right_ to go _below_ when it's no room for it on the side.

![](/asides/sidenote-2.png)

I couldn't think of a pure-CSS solution, so this is ~~overengineered~~
implemented with a rehype plugin. We grab the nearest previous sibling of an
`aside`, and wrap them both in a flexbox container.

<style>{`
  /* tiny tweak to ensure screenshotted text is not mistaken with written text */
  html:not(.dark) img {
    border: 1px solid rgb(229 229 229);
  }
`}</style>

To be clear, Paco's website is beautiful, and the [post][paco] I screenshotted
states an intentional goal of **simplicity** in its design. It would be a bit
disingenuous if he traversed the AST just to position the sidenote. This
project, for better or worse, is&nbsp;free of such constraints.