New attempt at sidenotes using strategy found in scripter.co

assets/css/extended/custom.css

@@ -0,0 +1,53 @@
+.sidenote {
+    font-size: 80%;
+    position: relative;
+}
+/* Wide viewport */
+@media (min-width: 960px) {
+    .sidenote {
+        float: right;
+        clear: right;
+        margin-right: -23vw;
+        text-align: left;
+
+        top: -3rem;
+        width: 20vw;
+        margin-top: 1rem;
+    }
+}
+
+/* Narrow viewport */
+@media (max-width: 960px) {
+    .sidenote {
+        float: right;
+        text-align: left;
+
+        width: 100%;
+        margin: 1rem 0;
+        padding-left: 15%;
+    }
+}
+
+/* Sidenote counter */
+body {
+    counter-reset: sidenote-counter;
+}
+.sidenote-number {
+    counter-increment: sidenote-counter;
+}
+/* Counter before the sidenote in the margin. */
+.sidenote::before {
+    content: counter(sidenote-counter)".";
+    position: relative;
+    vertical-align: baseline;
+    font-size: 0.9em;
+    font-weight: bold;
+}
+/* Counter in the main body. */
+.sidenote-number::after {
+    content: counter(sidenote-counter);
+    vertical-align: super;
+    font-size: 0.7em;
+    font-weight: bold;
+    margin-right: 0.5rem;
+}