Tufte Example

HTML

<p> The parapgraph before the sidenote </p>

<p><span class=marginnote> content of the sidenote </span></p>

<p>The paragraph the sidenote is meant to be read after</p>

CSS

@charset "UTF-8";

/* @font-face { */
/*   font-family: et-book; */
/*   src: url(et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot); */
/*   src: url(et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix) format("embedded-opentype"), url(et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff) format("woff"), url(et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf) format("truetype"), url(et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf) format("svg"); */
/*   font-weight: 400; */
/*   font-style: normal; */
/*   font-display: swap */
/* } */
/**/
/* @font-face { */
/*   font-family: et-book; */
/*   src: url(et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot); */
/*   src: url(et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot?#iefix) format("embedded-opentype"), url(et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff) format("woff"), url(et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf) format("truetype"), url(et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg#etbookromanosf) format("svg"); */
/*   font-weight: 400; */
/*   font-style: italic; */
/*   font-display: swap */
/* } */
/**/
/* @font-face { */
/*   font-family: et-book; */
/*   src: url(et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot); */
/*   src: url(et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot?#iefix) format("embedded-opentype"), url(et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff) format("woff"), url(et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf) format("truetype"), url(et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg#etbookromanosf) format("svg"); */
/*   font-weight: 700; */
/*  ...