Up: My web site

My web site has sidenotes. This paragraph¹¹1 This is a sidenote (or footnote) that is long just for sake of being long — lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua and all that — taking up space so that the sidenote below it gets pushed down.  has two examples.²²2 Here is a sidenote/footnote example that got pushed down. 

Here is a paragraph “The film Mulholland Drive is good:”³³3 A very uninspired piece of writing on my part, but it helps for demonstration purposes. 

The film Mulholland Drive111 [SNIP] 11 Mulholland Dr., written and directed by David Lynch (Les Films Alain Sarde, Asymmetrical Productions, Babbo Inc., 2001).  is good.

There a two parts to this.

First, there is the footnote reference, which will only be shown on small screens:

  1

  1

  1
 [SNIP] 

Second, there is the sidenote, which will be shown on wide screens:

  
    1
  

  
    1
    [SNIP]
  

The sidenote consists of a sidenote-ref, which is the number you see in the main text body, and a sidenote-def, which appears in the sidebar.

Additionally, there is the list of footnotes at the end:

  

    

      
[SNIP] ↩︎
    
  

To do: Describe the ARIA setup of this.

Styling sidenotes

Sidenotes have a fixed width, and are floated to the right:

.sidenote-def {
  width: 14rem;

  float: right;

Additionally, the sidenote is moved out of the main content body with a negative right margin:⁴⁴4 The use of calc() isn’t strictly needed here, but if I had used -16rem here, it wouldn’t have been as obvious that this is the width of the sidenote plus the width of the gap. 

  margin-right: calc(-14rem - 2rem);

Sidenotes are forced, with clear, below other floating elements (i.e. other sidenotes, primarily):

  clear: both;

  margin-bottom: 1.5rem;
}

Switching between sidenotes and footnotes

On large screens, footnote references and the list of footnotes (at the bottom of the page) are hidden:

@media screen and (min-width: 920px) {
  .footnotes,
  sup:has([role~="doc-noteref"]) {
    display: none;
  }
}

Sidenotes (both the reference in the main body with the sidenote-ref class and the definitions in the sidebar with the sidenote-def class) are not shown by default, but only visible on larger screens:

.sidenote-def,
.sidenote-ref {
  display: none;
}

@media screen and (min-width: 920px) {
  .sidenote-def,
  .sidenote-ref {
    display: inline;
  }
}

Credits

Thanks to Roma Komarov, whose help with sidenotes has been invaluable.