Add intermediate style to fit right sidenotes

themes/vanilla/assets/scss/sidenotes.scss

@@ -1,5 +1,6 @@
 @import "style.scss";
 
+$sidenote-accommodate-shrink: 10rem;
 $sidenote-width: 30rem;
 $sidenote-offset: 1.5rem;
 $sidenote-padding: 1rem;
@@ -45,29 +46,50 @@ $sidenote-highlight-border-width: .2rem;
         margin-left: -($sidenote-width + $sidenote-offset);
     }
 
-    @media screen and
-        (max-width: $container-width + 2 * ($sidenote-width + 2 * $sidenote-offset)) {
-        position: static;
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-        width: 100%;
-        display: none;
-
-        .sidenote-checkbox:checked ~ & {
-            display: block;
-        }
-
-        &.sidenote-left {
-            margin-left: 0rem;
-        }
-
-        &.sidenote-right {
-            margin-right: 0rem;
-        }
-    }
-
     @include bordered-block;
     padding: $sidenote-padding;
     box-sizing: border-box;
     text-align: left;
 }
+
+@mixin hidden-sidenote {
+    position: static;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    width: 100%;
+    display: none;
+
+    .sidenote-checkbox:checked ~ & {
+        display: block;
+    }
+}
+
+@media screen and
+(max-width: $container-width + 2 * ($sidenote-width + 2 * $sidenote-offset)) {
+    .sidenote-content.sidenote-left {
+        @include hidden-sidenote;
+        margin-left: 0rem;
+    }
+
+    .container {
+        position: relative;
+        left: -$sidenote-width/2
+    }
+}
+
+@media screen and
+(max-width: $container-width + ($sidenote-width + 3 * $sidenote-offset)) {
+    .post-content {
+        max-width: 100%;
+    }
+
+    .sidenote-content.sidenote-right {
+        @include hidden-sidenote;
+        margin-right: 0rem;
+    }
+
+    .container {
+        position: initial;
+    }
+}
+

themes/vanilla/assets/scss/style.scss

@@ -1,4 +1,4 @@
-$container-width: 50rem;
+$container-width: 45rem;
 $standard-border-width: .075rem;
 
 $primary-color: #36e281;