aside, .aside { /* works for "aside" tag and class name "aside" */
display: inline; /* prevents parent paragraph from breaking */
float: right; /* positions the note to the right of the content */
position: relative; /* forces note to be relative its the normal position */
width: 20vw; /* limits the width of the marginal note */
margin-right: -22vw; /* sets the distance away from the body text */
font-size: 16px; /* makes font slightly smaller */
}
@media (max-width: 768px) {
aside, .aside {
display: block;
float: none;
margin: 5% 10% 5% 10%;
width: 80%;
font-size: 15px;
}
}
Gwern2 recommends sidenote.js.