Make sidenotes mobile-friendly

themes/vanilla/assets/scss/sidenotes.scss

@@ -4,16 +4,6 @@ $sidenote-width: 350px;
 $sidenote-offset: 15px;
 
 .sidenote {
-    &.right .sidenote-content {
-        right: 0;
-        margin-right: -($sidenote-width + $sidenote-offset);
-    }
-
-    &.left .sidenote-content {
-        left: 0;
-        margin-left: -($sidenote-width + $sidenote-offset);
-    }
-
     &:hover {
         .sidenote-label {
             background-color: $primary-color;
@@ -32,12 +22,47 @@ $sidenote-offset: 15px;
     border-bottom: 2px solid $primary-color;
 }
 
+.sidenote-checkbox {
+    display: none;
+}
+
 .sidenote-content {
     display: block;
     position: absolute;
     width: $sidenote-width;
     margin-top: -1.5em;
 
+    &.sidenote-right {
+        right: 0;
+        margin-right: -($sidenote-width + $sidenote-offset);
+    }
+
+    &.sidenote-left {
+        left: 0;
+        margin-left: -($sidenote-width + $sidenote-offset);
+    }
+
+    @media screen and
+        (max-width: $container-width + 2 * ($sidenote-width + 2 * $sidenote-offset)) {
+        position: static;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        width: 100%;
+        display: none;
+
+        .sidenote-checkbox:checked ~ & {
+            display: block;
+        }
+
+        &.sidenote-left {
+            margin-left: 0px;
+        }
+
+        &.sidenote-right {
+            margin-right: 0px;
+        }
+    }
+
     @include bordered-block;
     padding: 10px;
     box-sizing: border-box;

themes/vanilla/layouts/shortcodes/sidenote

@@ -1,6 +1,7 @@
-<span class="sidenote {{ .Get 0 }}">
-<label class="sidenote-label">{{ .Get 2 }}</label>
-<span class="sidenote-content">
+<span class="sidenote">
+<label class="sidenote-label" for="{{ .Get 1 }}">{{ .Get 2 }}</label>
+<input class="sidenote-checkbox" type="checkbox" id="{{ .Get 1 }}"></input>
+<span class="sidenote-content sidenote-{{ .Get 0 }}">
 {{ .Inner }}
 </span>
 </span>