From 277c0a2ce6f46df35bd03ef59ca0f3a99eac5887 Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Wed, 15 Jul 2020 13:13:47 -0700
Subject: [PATCH] Rework sidenote spacing and TOC.

---
 themes/vanilla/assets/scss/margin.scss    | 15 +++---
 themes/vanilla/assets/scss/mixins.scss    |  2 +-
 themes/vanilla/assets/scss/sidenotes.scss |  2 -
 themes/vanilla/assets/scss/style.scss     | 58 ++------------------
 themes/vanilla/assets/scss/toc.scss       | 66 +++++++++++++++++++++++
 themes/vanilla/assets/scss/variables.scss |  6 +--
 6 files changed, 83 insertions(+), 66 deletions(-)
 create mode 100644 themes/vanilla/assets/scss/toc.scss

diff --git a/themes/vanilla/assets/scss/margin.scss b/themes/vanilla/assets/scss/margin.scss
index 48d470f..26c62be 100644
--- a/themes/vanilla/assets/scss/margin.scss
+++ b/themes/vanilla/assets/scss/margin.scss
@@ -2,20 +2,21 @@
 @import "mixins.scss";
 
 $margin-width: 30rem;
-$margin-offset: 1.5rem;
+$margin-inner-offset: 0rem;
+$margin-outer-offset: 1.5rem;
 
 @mixin below-two-margins {
     @media screen and
-        (max-width: $container-width +
-            2 * ($margin-width + 2 * $margin-offset)) {
+        (max-width: $container-width-threshold +
+            2 * ($margin-width + $margin-inner-offset + $margin-outer-offset)) {
         @content;
     }
 }
 
 @mixin below-one-margin {
     @media screen and
-        (max-width: $container-width +
-            ($margin-width + 3 * $margin-offset)) {
+        (max-width: $container-width-threshold +
+            ($margin-width + $margin-inner-offset + $margin-outer-offset)) {
         @content;
     }
 }
@@ -29,7 +30,7 @@ $margin-offset: 1.5rem;
 
 @mixin margin-content-left {
     left: 0;
-    margin-left: -($margin-width + $margin-offset);
+    margin-left: -($margin-width + $container-min-padding + $margin-inner-offset);
 
     @include below-two-margins {
         display: none;
@@ -38,7 +39,7 @@ $margin-offset: 1.5rem;
 
 @mixin margin-content-right {
     right: 0;
-    margin-right: -($margin-width + $margin-offset);
+    margin-right: -($margin-width + $container-min-padding + $margin-inner-offset);
 
     @include below-one-margin {
         display: none;
diff --git a/themes/vanilla/assets/scss/mixins.scss b/themes/vanilla/assets/scss/mixins.scss
index 43f355a..ee4f75d 100644
--- a/themes/vanilla/assets/scss/mixins.scss
+++ b/themes/vanilla/assets/scss/mixins.scss
@@ -6,7 +6,7 @@
 }
 
 @mixin below-container-width {
-    @media screen and (max-width: $container-width){
+    @media screen and (max-width: $container-width-threshold){
         @content;
     }
 }
diff --git a/themes/vanilla/assets/scss/sidenotes.scss b/themes/vanilla/assets/scss/sidenotes.scss
index ef46365..7939998 100644
--- a/themes/vanilla/assets/scss/sidenotes.scss
+++ b/themes/vanilla/assets/scss/sidenotes.scss
@@ -2,8 +2,6 @@
 @import "mixins.scss";
 @import "margin.scss";
 
-$sidenote-width: 30rem;
-$sidenote-offset: 1.5rem;
 $sidenote-padding: 1rem;
 $sidenote-highlight-border-width: .2rem;
 
diff --git a/themes/vanilla/assets/scss/style.scss b/themes/vanilla/assets/scss/style.scss
index 3b259d6..0da3003 100755
--- a/themes/vanilla/assets/scss/style.scss
+++ b/themes/vanilla/assets/scss/style.scss
@@ -1,6 +1,7 @@
 @import "variables.scss";
 @import "mixins.scss";
 @import "margin.scss";
+@import "toc.scss";
 
 body {
   font-family: $font-body;
@@ -62,11 +63,13 @@ div.highlight table {
   box-sizing: border-box;
 
   @include below-container-width {
-      padding: 0rem 1rem 0rem 1rem;
+      padding: 0 $container-min-padding 0 $container-min-padding;
+      margin: 0;
+      max-width: $container-width + 2*$container-min-padding;
   }
 
   @include below-two-margins {
-      left: -($margin-width + $margin-offset)/2;
+      left: -($margin-width + $margin-inner-offset + $margin-outer-offset)/2;
   }
 
   @include below-one-margin {
@@ -239,54 +242,3 @@ figure {
         text-align: center;
     }
 }
-
-.table-of-contents {
-    @include margin-content;
-    @include margin-content-left;
-    display: flex;
-    flex-direction: column;
-    align-items: end;
-
-    em {
-        font-style: normal;
-        font-weight: bold;
-        font-size: 1.2em;
-        display: block;
-        margin-bottom: 1rem;
-    }
-
-    #TableOfContents > ul {
-        padding-left: 0;
-    }
-
-    nav {
-        width: auto;
-        margin: 0px;
-    }
-
-    ul {
-        position: relative;
-        list-style: none;
-        padding-left: 2rem;
-        margin: 0px;
-    }
-
-    li {
-        position: relative;
-    }
-
-    a {
-        padding: 0;
-    }
-
-    div.wrapper {
-        @include bordered-block;
-        padding: 1rem;
-        background-color: $toc-color;
-        border-color: $toc-border-color;
-
-        @include below-two-margins {
-            width: auto;
-        }
-    }
-}
diff --git a/themes/vanilla/assets/scss/toc.scss b/themes/vanilla/assets/scss/toc.scss
new file mode 100644
index 0000000..344884e
--- /dev/null
+++ b/themes/vanilla/assets/scss/toc.scss
@@ -0,0 +1,66 @@
+@import "variables.scss";
+@import "mixins.scss";
+
+$toc-color: $code-color;
+$toc-border-color: $code-border-color;
+$toc-float-max-width: 20rem;
+
+@mixin below-max-toc-width {
+    @media screen and (max-width: 2.5rem + 1.5 * $toc-float-max-width + 2 * $container-min-padding){
+        @content;
+    }
+}
+
+.table-of-contents {
+    @include margin-content;
+    @include margin-content-left;
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    margin-bottom: 1rem;
+
+    em {
+        font-style: normal;
+        font-weight: bold;
+        font-size: 1.2em;
+        display: block;
+        margin-bottom: 1rem;
+    }
+
+    #TableOfContents > ul {
+        padding-left: 0;
+    }
+
+    nav {
+        width: auto;
+        margin: 0px;
+    }
+
+    ul {
+        position: relative;
+        list-style: none;
+        padding-left: 2rem;
+        margin: 0px;
+    }
+
+    li {
+        position: relative;
+    }
+
+    a {
+        padding: 0;
+        vertical-align: top;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+    }
+
+    div.wrapper {
+        @include bordered-block;
+        padding: 1rem;
+        background-color: $toc-color;
+        border-color: $toc-border-color;
+        box-sizing: border-box;
+        max-width: 100%;
+    }
+}
diff --git a/themes/vanilla/assets/scss/variables.scss b/themes/vanilla/assets/scss/variables.scss
index 8f8e377..b1e3f67 100644
--- a/themes/vanilla/assets/scss/variables.scss
+++ b/themes/vanilla/assets/scss/variables.scss
@@ -1,16 +1,16 @@
 $container-width: 45rem;
+$container-min-padding: 1.5rem;
+$container-width-threshold: $container-width + 2 * $container-min-padding;
 $standard-border-width: .075rem;
 
 $primary-color: #36e281;
 $border-color: #bfbfbf;
 $code-color: #f0f0f0;
 $code-border-color: darken($code-color, 10%);
-$toc-color: $code-color;
-$toc-border-color: $code-border-color;
 
 $font-heading: "Lora", serif;
 $font-body: "Raleway", serif;
 $font-code: "Inconsolata", monospace;
 
 $standard-border: $standard-border-width solid $border-color;
-$code-border: 0.0375rem solid $code-border-color;
+$code-border: $standard-border-width solid $code-border-color;