From 153349f3d5651000b2aa9f8f4eced2730a8d2ffa Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Mon, 3 Feb 2020 13:38:21 -0800
Subject: [PATCH] Add intermediate style to fit right sidenotes

---
 themes/vanilla/assets/scss/sidenotes.scss | 64 +++++++++++++++--------
 themes/vanilla/assets/scss/style.scss     |  2 +-
 2 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/themes/vanilla/assets/scss/sidenotes.scss b/themes/vanilla/assets/scss/sidenotes.scss
index e972294..01149cd 100644
--- a/themes/vanilla/assets/scss/sidenotes.scss
+++ b/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;
+    }
+}
+
diff --git a/themes/vanilla/assets/scss/style.scss b/themes/vanilla/assets/scss/style.scss
index 6c189e1..a73c8d9 100755
--- a/themes/vanilla/assets/scss/style.scss
+++ b/themes/vanilla/assets/scss/style.scss
@@ -1,4 +1,4 @@
-$container-width: 50rem;
+$container-width: 45rem;
 $standard-border-width: .075rem;
 
 $primary-color: #36e281;